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. Layout Width
Forum Updated to NodeBB v4.3 + New Features

Layout Width

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 2 Posters 1.6k Views 2 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.
  • C Offline
    C Offline
    Cyril
    wrote on last edited by
    #1

    Hi i am new to QML. I am trying to create a component that fills its parent however i can not achieve this.

    1. TextFields have space btween even though i set spacing: 0
    2. The table width does not obey
      height: parent.height
      width: parent.widt
      TableView is to small.
    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Layouts 1.1
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2
    
    Window {
        title: qsTr("Hello World")
        visible: true
        width: 640
        height: 640
    
        ColumnLayout{
    
            width: 630
            height: 630
            RowLayout{
                id:filters
                spacing: 0
                width: parent.width
                TextField{
                    id: abelaTitle
                    width: columnTitle.width
                }
                TextField{
                    id: abelaAuthor
                    width: columnauthor.width
                }
            }
    
            TableView {
                id: tables
                anchors.top: filters.bottom
                height: parent.height
                width: parent.width
                TableViewColumn {
                    id: columnTitle
                    title: "title"
                    width: tables.width / tables.columnCount
                }
                TableViewColumn {
                    id: columnauthor
                    title: "author"
                    width: tables.width / tables.columnCount
                }
    
            }
    
        }
    
    }
    
    
    p3c0P 1 Reply Last reply
    0
    • C Cyril

      Hi i am new to QML. I am trying to create a component that fills its parent however i can not achieve this.

      1. TextFields have space btween even though i set spacing: 0
      2. The table width does not obey
        height: parent.height
        width: parent.widt
        TableView is to small.
      import QtQuick 2.4
      import QtQuick.Controls 1.3
      import QtQuick.Layouts 1.1
      import QtQuick.Window 2.2
      import QtQuick.Dialogs 1.2
      
      Window {
          title: qsTr("Hello World")
          visible: true
          width: 640
          height: 640
      
          ColumnLayout{
      
              width: 630
              height: 630
              RowLayout{
                  id:filters
                  spacing: 0
                  width: parent.width
                  TextField{
                      id: abelaTitle
                      width: columnTitle.width
                  }
                  TextField{
                      id: abelaAuthor
                      width: columnauthor.width
                  }
              }
      
              TableView {
                  id: tables
                  anchors.top: filters.bottom
                  height: parent.height
                  width: parent.width
                  TableViewColumn {
                      id: columnTitle
                      title: "title"
                      width: tables.width / tables.columnCount
                  }
                  TableViewColumn {
                      id: columnauthor
                      title: "author"
                      width: tables.width / tables.columnCount
                  }
      
              }
      
          }
      
      }
      
      
      p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

      Hi @Cyril and Welcome to Qt Devnet.

      That is because you have specified width less than that of its parent i.e Window and thus ColumnLayout will adjust the Items inside it accordingly.
      As far as the Layouts are concerned you must use Layout.* properties as described here to properly layout the items.
      I have modified your example to make it work as per Layouts. Try the following

      import QtQuick 2.4
      import QtQuick.Controls 1.3
      import QtQuick.Layouts 1.1
      import QtQuick.Window 2.2
      import QtQuick.Dialogs 1.2
      
      Window {
          title: qsTr("Hello World")
          visible: true
          width: 640
          height: 640
      
          ColumnLayout{
              anchors.fill: parent
              RowLayout{
                  id:filters
                  spacing: 0
                  width: parent.width
                  TextField{
                      id: abelaTitle
                      Layout.fillWidth: true
                      Layout.minimumWidth: 50
                      Layout.preferredWidth: 100
                      Layout.maximumWidth: parent.width/2
                  }
                  TextField{
                      id: abelaAuthor
                      Layout.fillWidth: true
                      Layout.minimumWidth: 50
                      Layout.preferredWidth: 100
                      Layout.maximumWidth: parent.width/2
                  }
              }
      
              TableView {
                  id: tables
                  anchors.top: filters.bottom
                  Layout.fillWidth: true
                  Layout.fillHeight: true
                  TableViewColumn {
                      id: columnTitle
                      title: "title"
                      width: tables.width / tables.columnCount
                  }
                  TableViewColumn {
                      id: columnauthor
                      title: "author"
                      width: tables.width / tables.columnCount
                  }
              }
          }
      }
      

      Hope this helps you in understanding it.

      157

      1 Reply Last reply
      0
      • C Offline
        C Offline
        Cyril
        wrote on last edited by
        #3

        Thanks it works.

        However it gets a bit confused having anchors, width height, Layout. all for item placing.

        p3c0P 1 Reply Last reply
        0
        • C Cyril

          Thanks it works.

          However it gets a bit confused having anchors, width height, Layout. all for item placing.

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

          @Cyril You're Welcome :)

          However it gets a bit confused having anchors, width height, Layout. all for item placing

          I would suggest you go through following for more info :
          http://doc.qt.io/qt-5/qtquick-positioning-topic.html
          http://doc.qt.io/qt-5/qtquick-usecase-layouts.html

          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