Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. ListView center on screen
Forum Updated to NodeBB v4.3 + New Features

ListView center on screen

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 1.2k Views 1 Watching
  • 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.
  • GGAllinG Offline
    GGAllinG Offline
    GGAllin
    wrote on last edited by
    #1

    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.

    p3c0P 1 Reply Last reply
    0
    • GGAllinG 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.

      p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

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

      157

      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved