Size of component doesn't change when windows change

[archqt]

Hi,
i did a component that extends to whole size of parent, but it doesn't work when used in a window. If i use it with qmlscene it works but nope on this example. To explain the problem here is my code :

Fist example with component in separate files

File : SelectValue2

import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1

Rectangle {
id: rectangle1
property real value : 0
property alias text : texte.text
width: 400
height: 200

visible: true

Text {
id: texte
text: "o2"
anchors.margins: 5
anchors.left: parent.left
font.pixelSize: 12
width: 30
}

TextInput {
id: an
text: value
font.pixelSize: 12
anchors.margins: 5
anchors.rightMargin: 0
anchors.left: texte.right
clip: true
width: 4*font.pixelSize
validator: DoubleValidator {bottom: -10; top: 10; decimals: 2}
Keys.onReturnPressed: value=parseFloat(text)
}

Slider {
id: slider
minimumValue: -10
maximumValue: 10
stepSize: 0.1
value: value
anchors.margins: 5
anchors.bottom: parent.bottom
anchors.top: parent.top
anchors.left: an.right
anchors.right: parent.right
onValueChanged: parent.value=value==null?0:Math.floor(value*100)/100
}
onValueChanged: slider.value=value
}


And the main that use it :

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

ApplicationWindow {
id: applicationWindow1
visible: true
width: 640
height: 480
ColumnLayout {
id: grid1
y: 28
anchors.fill: parent
anchors.leftMargin: 5
anchors.rightMargin: 5
onWidthChanged: console.log("Column : "+width)
Text { text: grid1.width
}

SelectValue2 {text: "ok"; value: 20; height: 20; width: 800}
SelectValue2 {text: "ok"; value: 20; height: 20; width: grid1.width} // doesn't work why??
SelectValue2 {text: "ok"; value: 20; height: 20}

}
}


Here is the result :
10425

As you can see the size is only made at begining (except for the second one) but after it doesn't change. What is wrong with that code ? If someone can help me please. thanks
Sincerely

[wysota]

Basically if you put items in a layout then the layout is responsible for positioning them so don't use x, y, width and height properties of such items.

[archqt]

Hi,
Ok i got it. It works but, not always.
The code that works :
File SelectValue3

import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1

Rectangle {
id: rectangle1
property real value : 0
property alias text : texte.text
//width: 400
//height: 200

visible: true

Text {
id: texte
text: "o2"
anchors.margins: 5
anchors.left: parent.left
anchors.right: an.left
font.pixelSize: 12
width: 30
}

TextInput {
id: an
text: value
font.pixelSize: 12
anchors.margins: 5
anchors.rightMargin: 0
anchors.bottom: parent.bottom
anchors.left: texte.right
clip: true
width: 4*font.pixelSize
validator: DoubleValidator {bottom: -10; top: 10; decimals: 2}
Keys.onReturnPressed: value=parseFloat(text)
}

Slider {
id: slider
minimumValue: -10
maximumValue: 10
stepSize: 0.1
value: value
anchors.margins: 5
anchors.bottom: parent.bottom
anchors.top: parent.top
anchors.left: an.right
anchors.right: parent.right
onValueChanged: parent.value=value==null?0:Math.floor(value*100)/100
}
onValueChanged: slider.value=value
}


And the "main"

import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

ApplicationWindow {
id: applicationWindow1
visible: true
width: 640
height: 480

ColumnLayout {
id: grid1
//y: 28
anchors.fill: parent
anchors.leftMargin: 5
anchors.rightMargin: 5
onWidthChanged: console.log("Column : "+width)
Text { text: grid1.width
}

SelectValue3 {text: "ok"; value: 20;
Layout.minimumHeight: 20;
Layout.minimumWidth: 100
Layout.fillWidth: true
}
SelectValue3 {text: "ok"; value: 20;
Layout.minimumHeight: 20;
Layout.minimumWidth: 100
Layout.fillWidth: true
}
SelectValue3 {text: "ok"; value: 20;
Layout.minimumHeight: 20;
Layout.minimumWidth: 100
Layout.fillWidth: true
}
}
}

And now i do a component Anbndelegate, here is the code (file Anbndelegate.qml)

import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1


Rectangle {
property int index : 1
property int an : 10
property int bn : 5
//height: index==0?20:40

radius: 2
ColumnLayout {
SelectValue3 { value: an; text: "A"+index+" : "; //height: 20;
Layout.fillWidth: true
Layout.minimumHeight: 20;
Layout.minimumWidth: 100
onValueChanged: anbn.set(index,{"an" : value})
onWidthChanged: console.log("SelectValue : "+width)
}
SelectValue3 { value: bn; text: "B"+index+" : "; //height: 20;
visible: index!=0
Layout.fillWidth: true
Layout.minimumHeight: 20;
Layout.minimumWidth: 100
onValueChanged: anbn.set(index,{"bn" : value})
}
}
onWidthChanged: console.log("Delegate Width changed "+parent.width)
}


And i try to use it

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

ApplicationWindow {
id: applicationWindow1
visible: true
width: 640
height: 480
Anbndelegate {
anchors.fill: parent
}
}


But it doesn't work. Size doesn't change. Sorry for all that questions i'm new at QtQuick.
Thanks

[archqt]

Hi,
it works i just forgot anchors.fill:parent to make the LayoutColumn take the whole parent size.