Layout Width



  • 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
                }
    
            }
    
        }
    
    }
    
    

  • Moderators

    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.



  • Thanks it works.

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


  • Moderators

    @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


Log in to reply
 

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