ListView center on screen



  • Hi everyone!
    I'm a beginner with qml...
    I need to display my listView centered with a fixed width on my widget,
    Looking at this picture you can see on the left the actual view of my listview
    link text
    on the right the desired version
    Here's my code

    import QtQuick 2.5
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Layouts 1.2
    import QtGraphicalEffects 1.0
    import QtQml.Models 2.1
    Rectangle {
        width: 800
        height: 600
        id:rootId
        FontLoader{ id: avenirRegular; source: "../../fonts/qml-fonts/AvenirRegular.otf" }
        FontLoader{ id: avenirBold; source: "../../fonts/qml-fonts/AvenirBold.otf" }
        FontLoader{ id: avenirCn; source: "../../fonts/qml-fonts/AvenirC.otf"}
        FontLoader{ id: avenirBoldCn; source: "../../fonts/qml-fonts/AvenirCondensedBold.otf"}
        Component {
            id:itemList
            Item{
                id:mainItem
                property bool isTitle: header===true
                property bool isUnit: unitTitle !=="" && header === false
                property bool isElement: title!=="" && !isTitle && !isUnit
                property string resType: resourceType;
                property string imageSource: getImageSource()
                height: heighSelection();
                Row{
                    Column{
                        width: 800
                        Rectangle{
                            y:10
                            visible: isTitle
                            anchors.topMargin: 20
                            Text{
                                font.family: avenirBold.name
                                font.pixelSize:18
                                text:title
                                color:"#333333"
                            }
                        }
                        Rectangle{
                            visible:isUnit
                            width: mainList.width
                            Rectangle{
                                width: mainList.width -40
                                height: 1
                                color: "#CCCCCC"
                            }
                            Rectangle{
                                y:60
                                width: mainList.width -40
                                height: 1
                                color: "#CCCCCC"
                            }
                            Text{
                                y:20
                                id:unitDisplayTitle
                                font.family: avenirRegular.name
                                font.pixelSize:20
                                color: "#666666"
                                text:unitTitle
                            }
                        }
                        Rectangle{
                            visible:isElement
                            MouseArea{
                                width: mainList.width
                                height: 50
                                cursorShape: "PointingHandCursor"
                                Image{
                                    id:resIcon
                                    source: imageSource
                                    width: sourceSize.width / pixelratio
                                    height: sourceSize.height /pixelratio
                                }
                                Text{
                                    x:resIcon.width + 10
                                    id:displayElementTitle
                                    font.family: avenirRegular.name
                                    font.pixelSize:16
                                    text:title
                                    color:"#666666"
                                    y:(resIcon.height/2 - height/2)
                                }
                                Text{
                                    x:mainList.width - 40 -width
                                    font.family: avenirRegular.name
                                    font.pixelSize:16
                                    text:pageLabel
                                    color:"#666666"
                                    y:(resIcon.height/2 - height/2)
                                }
                                onClicked: {
                                    controller.open(index);
                                    console.log(index + " "+packageName+ " assetPath: "+assetPath)
                                }
                            }
    
                        }
                    }
                }
    
                function heighSelection(){
                    if(isTitle)
                        return 30;
                    else if(isUnit)
                        return 60
                    else if(isElement)
                        return 40
    
                    return 0;
                }
    
                function getImageSource()
                {
                    if(!isElement)return ""
                    var icon=""
                    if(resType==="video"){
                        icon =  pixelratio >= 2 ? "../../icons/type-video-mini@2x.png" :"../../icons/type-video-mini.png"
                    }
                    if(resType=="audio"){
                        icon = pixelratio >= 2 ? "../../icons/type-audio-mini@2x.png" : "../../icons/type-audio-mini.png"
                    }
                    if(resType=="external"){
                        icon = pixelratio >= 2 ?  "../../icons/type-external-mini@2x.png" : "../../icons/type-external-mini.png"
                    }
                    if(resType=="browser"){
                        icon = pixelratio >= 2 ?  "../../icons/type-browser-mini@2x.png" :  "../../icons/type-browser-mini.png"
                    }
                    if(resType=="link"){
                        icon = pixelratio >= 2 ?  "../../icons/type-link-mini@2x.png" :  "../../icons/type-link-mini.png"
                    }
                    if(resType=="pdf"){
                        icon =  pixelratio >= 2 ? "../../icons/type-pdf-mini@2x.png" : "../../icons/type-pdf-mini.png"
                    }
                    if(resType=="karaoke"){
                        icon = pixelratio >= 2 ?  "../../icons/type-karaoke-mini@2x.png" : "../../icons/type-karaoke-mini.png"
                    }
                    if(resType=="map"){
                        icon = pixelratio >= 2 ?  "../../icons/type-map-mini@2x.png" : "../../icons/type-map-mini.png"
                    }
                    return icon;
                }
            }
        }
    
        ScrollView{
            anchors.fill: parent
            ListView {
                width: parent.width
                Layout.fillHeight: true
                Layout.fillWidth: true
                topMargin: 10
                leftMargin: 15
                rightMargin: 10
                bottomMargin: 10
                spacing: 25
                id:mainList
                model: indexListModel
                delegate: itemList
            }
        }
    }
    
    
    

    In c++

    void AutomaticIndexView::init(QString filter, QString viewName)
    {
        qDebug()<< "index width" << filter;
        indexListModel = new AutoMaticIndexModel(viewName,this);
        ui->view->engine()->rootContext()->setContextProperty("controller",this);
        ui->view->engine()->rootContext()->setContextProperty("indexListModel",indexListModel);
        ui->view->engine()->rootContext()->setContextProperty("pixelratio",this->devicePixelRatio());
        ui->view->setSource(QUrl("qrc:/qml/indexview/IndexView.qml"));
        indexListModel->setFilterName(filter);
    }
    

    Any suggestion ?
    Thanks in advanced ;)
    GG.


  • Moderators

    Hi @GGAllin
    What happens if you increase the left and right margins ?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.