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
}

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
}

To copy to clipboard, switch view to plain text mode 

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

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}

    }
}

To copy to clipboard, switch view to plain text mode 

Here is the result :
aeffacer.jpg

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
}

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
}

To copy to clipboard, switch view to plain text mode 

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

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

To copy to clipboard, switch view to plain text mode 

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

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

To copy to clipboard, switch view to plain text mode 

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

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

To copy to clipboard, switch view to plain text mode 

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.fillarent to make the LayoutColumn take the whole parent size.