CODEWITHSUNDEEP
qtbuttonqml
T.Poe
T.Poe

Reputation: 2079

QML: Problems with setting the size of the button in a layout

I have this app page in qml:

Image {
    source: "file:///C:/Users/image.jpg"
    fillMode: Image.PreserveAspectCrop

    Rectangle {
        width: parent.width/3
        height: parent.height/3
        anchors.centerIn: parent
        radius: 5

        ColumnLayout {
            width: parent.width * 0.5
            height: parent.height * 0.5
            anchors.centerIn: parent

            //some components here ...

            Button {
                //width: 100   nothing changes in the app
                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom

                style: ButtonStyle {
                    background: Rectangle {
                        color: "blue"
                        radius: 15
                        //width: 100   nothing changes in the app
                    }
                    label: Text {
                        text: qsTr("Button")
                        color: "white"
                    }
                }
            }
        }
    }
}

Now I'm trying to set the size (width and height) of the button, so that depends on the size of the parent (layout), something like width: parent * 0.4. I probably tried every possible position of the width statement in the code, but when I run the app the size of the button never changes. I also tried to set the size to a specific number, not to bind it to the parent, still nothing.

So what could be the problem here? Where and how should be the button size defined so it's binded to its parent layout size?

Upvotes: 5

Views: 8257

Answers (1)

ChrisM
ChrisM

Reputation: 185

I'm guessing this is a similar issue to the question here. In that example, elements inside of a Layout were not responding to the width and height parameters. Setting Layout.preferredWidth and Layout.preferredHeight seemed to solve the issue. Please refer to the documentation provided in that answer.

You can still bind to the parent's properties, for example

Layout.preferredWidth: parent.width * 0.4

Upvotes: 9

Related Questions