Layout Width

Cyril

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

TextFields have space btween even though i set spacing: 0
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
            }

        }

    }

}

p3c0

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.

Cyril

Thanks it works.

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

p3c0

@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

Qt World Summit: Register Today!

Layout Width