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.
- 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 } } } }
-
Hi @Cyril and Welcome to Qt Devnet.
That is because you have specified width less than that of its parent i.e
Window
and thusColumnLayout
will adjust the Items inside it accordingly.
As far as the Layouts are concerned you must useLayout.*
properties as described here to properly layout the items.
I have modified your example to make it work as perLayouts
. Try the followingimport 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.
-
@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