Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct


    Qt World Summit: Early-Bird Tickets

    Unsolved ListView center on screen

    QML and Qt Quick
    2
    2
    938
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • GGAllin
      GGAllin last edited by

      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 1 Reply Last reply Reply Quote 0
      • p3c0
        p3c0 Moderators @GGAllin last edited by

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

        157

        1 Reply Last reply Reply Quote 0
        • First post
          Last post