ListView center on screen

[GGAllin]

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.

[p3c0]

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