Unsolved Is it possible to set a dynamic height for Tableview ?
-
Hi,
So I wanted to have a TableView between two button and when I set the top anchors it works but when I add the bottom one I can't see the window of my application. So my question is why when the height is dynamic for TableView it doesn't work ? And is there an equivalent of tableView in QtQuick.Controls 2.1 ?
I can post my code if its needed.
Thanks in advance for the answers.
-
@Arkning said in Is it possible to set a dynamic height for Tableview ?:
And is there an equivalent of tableView in QtQuick.Controls 2.1 ?
Not yet. More info http://blog.qt.io/blog/2016/10/06/qt-quick-controls-2-1-and-beyond/
-
@sierdzio ok Thanks but do you have any clue why when I want a dynamic Tableview is doesn't work ?
-
Have your tried putting it into a ColumnLayout? Something like:
ColumnLayout { Button {} TableView {} Button {} }
Also, when you set up anchors, remember to set left and right one, too (or at least set "width" property) otherwise - maybe - your table view is there, but with
width == 0
and thus invisible. -
@sierdzio Yes it's in a ColumnLayout but the problem has I said it's not the width but the height actually. The problem is that if i set for example :
anchors.top: button_1.bottom
anchors.bottom: button_2.top
It doesn't work but it works if I do :
anchors.top or bottom + asign a implicitHeight or preferredHeight but if I give a dynamic value to those element it doesn't work. -
@sierdzio There is my code :
ColumnLayout {
id: mainview
anchors.fill: parentText { id: typo text: qsTr("Typologie") font.pointSize: 20 anchors.verticalCenter: mainview.top anchors.horizontalCenter: mainview.left anchors.verticalCenterOffset: typo.contentHeight anchors.horizontalCenterOffset: typo.contentWidth } ComboBox { id: cb model: [ "", "house 1", "house 2", "house 3", "house 4", "house 5" ] Layout.preferredWidth: 300 anchors.verticalCenter: typo.verticalCenter anchors.horizontalCenter: mainview.horizontalCenter } Button { id: o_typo onClicked: dialog.open() Layout.preferredWidth: o_typo_text.contentWidth + 30 anchors.verticalCenter: typo.verticalCenter anchors.horizontalCenter: mainview.right anchors.horizontalCenterOffset: - o_typo.width Text { id: o_typo_text text: "Gérer les typologies..." anchors.centerIn: parent } } Dialog { id: dialog x: 400 y: 100 width: 800 modal: true focus: true title: qsTr("Gestion des typologies") height: 700 //standardButtons: Dialog.Ok | Dialog.Cancel | Dialog.Save onAccepted: console.log("Ok clicked") onRejected: console.log("Cancel clicked") ColumnLayout { id: v_top Text { id: n_typo Layout.topMargin: 30 Layout.leftMargin: 30 text: qsTr("Typologie") font.pointSize: 20 } ComboBox { id: n_cb Layout.leftMargin: 400 Layout.preferredWidth: 300 anchors.verticalCenter: n_typo.verticalCenter model: [ "", "house 1", "house 2", "house 3", "house 4", "house 5" ] } CheckBox { id:opt1 ; text: qsTr("Opt 1") ; Layout.leftMargin: 30 ; Layout.preferredWidth: 100 } CheckBox { id:opt2 ; text: qsTr("Opt 2") ; Layout.leftMargin: 30 ; Layout.preferredWidth: 100 } CheckBox { id:opt3 ; text: qsTr("Opt 3") ; Layout.leftMargin: 30 ; Layout.preferredWidth: 100 } Text { id: t_opt anchors.verticalCenter: opt1.verticalCenter anchors.horizontalCenter: n_cb.horizontalCenter text: qsTr("XX") } ComboBox { anchors.verticalCenter: t_opt.verticalCenter Layout.alignment: Qt.AlignRight model: [ "", "1", "2", "3..." ] } Text { id: t_opt1 anchors.verticalCenter: opt2.verticalCenter anchors.horizontalCenter: n_cb.horizontalCenter text: qsTr("YY") } ComboBox { anchors.verticalCenter: t_opt1.verticalCenter Layout.alignment: Qt.AlignRight model: [ "", "1", "2", "3..." ] } } footer: DialogButtonBox { Button { id: end ; text: qsTr("Quitter") ; onClicked: dialog.close() } } } Button { id: check anchors.left: o_typo.left anchors.right: o_typo.right anchors.verticalCenter: parent.bottom anchors.verticalCenterOffset: - check.height Text { id: check_text ; text: "Valider les typologies" ; anchors.centerIn: parent } } Rectangle { id: tricks color: "white" anchors.left: typo.left anchors.right: o_typo.right anchors.top: typo.bottom anchors.bottom: check.top } ListModel { id: equipmentModel ListElement { name: "sofa" ; state: "OUI" } ListElement { name: "TV" ; state: "NON" } } TableView { id: view width: parent.width implicitHeight: 200 anchors.left: typo.left //anchors.bottom: check.top anchors.top: typo.bottom anchors.right: o_typo.right anchors.topMargin: 50 TableViewColumn { role: "name" title: qsTr("Equipment") width: view.width / 3 movable: false resizable: false } TableViewColumn { movable: false resizable: false width: view.width / 3 title: qsTr("Connecté") role: "state" delegate: Rectangle { color: if (styleData.value === "OUI") { "white" } else { "orange" } Text { text: styleData.value } } } TableViewColumn { movable: false resizable: false width: view.width / 3 title: qsTr("Reference") role: "reference" delegate: ComboBox { anchors.fill: parent model: [ "Reference", "Test", "N/A" ] } } model: equipmentModel }
}
-
that's the expected logical behaviour for your code
when you setanchors.top: typo.bottom anchors.bottom: check.top
it's just like you set fixed height so it should have fixed height with scroll bar
Note: when you use ColumnLayout you should not use anchors instead use
Layout.fillWidth: true // for full width
and let the height be automatically setnow the best solution for you is to use flickable
ColumnLayout { anchors.fill: parent Button { implicitHeight: 48 Layout.fillWidth: true } Flickable { clip: true Layout.fillWidth: true Layout.fillHeight: true // or give it fixed height depend on your needs contentHeight: view.height flickableDirection: Flickable.VerticalFlick TableView { id: view width: parent.width } } Button { implicitHeight: 48 Layout.fillWidth: true } }
-
@Oussama-Kh---IPeculiar Thanks for the answer but I still have the same problem it doesn't do what i want.
The Flickable juste made the TableView moving I don't want that, I just want that the eight of my TableView is the height between my top and bottom button.
If I get it correctly the anchors doesn't work because the Tableview inherit Scrollbar ? Because when I set a rectangle with anchors top and bottom it works and its get the height that I want but I have no clue why it doesn't work with TableView or what can I do to make my TableView have the good height (of course it will never be a fixed height for me because I want a dynamic one) -
@Arkning
the anchors doesn't work because you're using ColumnLayout
Can you illustrate what you want with images ? -
@Oussama-Kh---IPeculiar
So I want my the height of my TableView is equal to the black rectangle -
@Oussama-Kh---IPeculiar And I don't think that the anchors doesn't work because of the ColumnLayout see my code I almost only use anchors to set my position, for example the black rectangle is set with anchors
-
@Arkning
try thisItem { RowLayout { id: headControls height: 48 anchors.margins: 16 anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right spacing: 8 Text { id: typo text: qsTr("Typologie") font.pointSize: 20 verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } ComboBox { id: cb Layout.fillWidth: true model: ["", "house 1", "house 2", "house 3", "house 4", "house 5"] } Button { id: o_typo Layout.fillWidth: true text: "Gérer les typologies..." onClicked: dialog.open() } } ColumnLayout { id: mainview anchors.top: headControls.bottom anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom anchors.margins: 16 spacing: 16 Button { id: check Layout.fillWidth: true text: "Valider les typologies" } TableView { id: view Layout.fillWidth: true Layout.fillHeight: true TableViewColumn { width: view.width / 3 role: "name" title: qsTr("Equipment") movable: false resizable: false } TableViewColumn { width: view.width / 3 title: qsTr("Connecté") movable: false resizable: false role: "state" delegate: Rectangle { color: if (styleData.value === "OUI") { "white" } else { "orange" } Text { text: styleData.value } } } TableViewColumn { width: view.width / 3 role: "reference" title: qsTr("Reference") movable: false resizable: false delegate: ComboBox { anchors.fill: parent model: ["Reference", "Test", "N/A"] } } model: ListModel { id: equipmentModel ListElement { name: "sofa" state: "OUI" } ListElement { name: "TV" state: "NON" } } } } }
-
Thanks it's working !!! But now I have an other issue it's that I'm using a StackLayout and a TabBar, and when i copy paste the code inside my fisrt view it doesn't work but when it's in the second or third view it works and I don't know why.