Calculate width of QML Item

Stefanoxjx · wrote on 4 Jan 2023, 09:44

Hi guys,
can you help me to how calculate a QML Item width?
Wrongly, I thought that the width was automatically calculated, but seems not be!

I've this Item that I want to center in a Rectangle:

import QtQuick 2.15
import QtQuick.Window 2.15

Rectangle /*Item*/ {
    id: tempSelector

    color: "orange"
//anchors.fill: parent

//    height: parent.height
width: 120
    //width: parent.width
height: parent.height
    Image {
        id: tempDown

        anchors {
            left: parent.left
            verticalCenter: parent.verticalCenter
        }

        height: parent.height / 4
        fillMode: Image.PreserveAspectFit
        source: "Images/TempDown.png"
    }

    Text {
        id: temp

        anchors {
            verticalCenter: parent.verticalCenter
            left: tempDown.right
            leftMargin: 10
        }

        font.pixelSize: 35
        color: "white"
        text: "20.0"
    }

    Image {
        id: tempUp

        anchors {
            verticalCenter: tempDown.verticalCenter
            left: temp.right
            leftMargin: 10
        }

        height: parent.height / 4
        fillMode: Image.PreserveAspectFit
        source: "Images/TempUp.png"
    }
}

but if I specify width: 120, I've this result:

if I don't specify the width property, this is the result:

With width: 120 I solve the problem, but is bad solution, because the temperature could be 0.0 (lenght minor of 120) and the centering could be inaccurate.

Which solution I could use for this problem?
Thanks.

JoeCFD · wrote on 4 Jan 2023, 15:08

add a horizontal layout to put two images and text in the middle.

Stefanoxjx · wrote on 4 Jan 2023, 19:55

Hi joeCFD, and thanks for yout help.
I'm trying to understand RowLayout but (grrrrrrrr !#@?) I don't understand :(
From code below, I expect that all icons was equally distributed in the red rectangle, instead the result is this:

What I wrong?

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3

Window {
    width: 1024
    height: 800
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: menuBar
        width: parent.width
        height: 100
        color: "grey"

        Rectangle /*Item*/ {
            id: centralMenu

            anchors {
                top: parent.top
                bottom: parent.bottom
                horizontalCenter: parent.horizontalCenter
            }
            color: "red"
            width: parent.width * 0.6

            RowLayout {
                anchors {
                    fill: parent
                    topMargin: 10
                    bottomMargin: 10
                }

                //spacing: 2

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/HAL9000.svg"
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Stats.png"
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Sentinel.png"
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/bluetooth.pnt"
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Option.png"
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Multimedia.png"
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/joystick.png"
                }
            }
        }
    }
}

JoeCFD · wrote on 4 Jan 2023, 20:02

@Stefanoxjx said in Calculate width of QML Item:

        RowLayout {
            anchors {
                fill: parent
                topMargin: 10
                bottomMargin: 10
            }

            //spacing: 2

            Image {
                Layout.fillHeight: true
                fillMode: Image.PreserveAspectFit
                source: "Images/HAL9000.svg"
            }

            Image {
                Layout.fillHeight: true
                fillMode: Image.PreserveAspectFit
                source: "Images/Stats.png"
            }

            Image {
                Layout.fillHeight: true
                fillMode: Image.PreserveAspectFit
                source: "Images/Sentinel.png"
            }

            Image {
                Layout.fillHeight: true
                fillMode: Image.PreserveAspectFit
                source: "Images/bluetooth.pnt"
            }

            Image {
                Layout.fillHeight: true
                fillMode: Image.PreserveAspectFit
                source: "Images/Option.png"
            }

            Image {
                Layout.fillHeight: true
                fillMode: Image.PreserveAspectFit
                source: "Images/Multimedia.png"
            }

            Image {
                Layout.fillHeight: true
                fillMode: Image.PreserveAspectFit
                source: "Images/joystick.png"
            }
        }

Try this and you may need spacing.

            RowLayout {
                anchors {
                    fill: parent
                    topMargin: 10
                    bottomMargin: 10
                }

                //spacing: 2
                Item {
                            Layout.fillHeight: true
                            Layout.fillWidth: true
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/HAL9000.svg"
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Stats.png"
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Sentinel.png"
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/bluetooth.pnt"
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Option.png"
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Multimedia.png"
                }

                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/joystick.png"
                }       

                Item {
                            Layout.fillHeight: true
                            Layout.fillWidth: true
                }
            }

Stefanoxjx · 1 Apr 2023, 20:07

I try this, but the result is the same :(

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3

Window {
    width: 1024
    height: 800
    visible: true
    title: qsTr("Hello World")
    
    Rectangle {
        id: menuBar
        width: parent.width
        height: 100
        color: "grey"
        
        Rectangle /*Item*/ {
            id: centralMenu
            
            anchors {
                top: parent.top
                bottom: parent.bottom
                horizontalCenter: parent.horizontalCenter
            }
            color: "red"
            width: parent.width * 0.6
            
            RowLayout {
                anchors {
                    fill: parent
                    topMargin: 10
                    bottomMargin: 10
                }
                
                spacing: 2
                Item {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }
                
                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/HAL9000.svg"
                }
                
                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Stats.png"
                }
                
                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Sentinel.png"
                }
                
                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/bluetooth.pnt"
                }
                
                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Option.png"
                }
                
                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Multimedia.png"
                }
                
                Image {
                    Layout.fillHeight: true
                    fillMode: Image.PreserveAspectFit
                    source: "Images/joystick.png"
                }
                
                Item {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }
            }
            
        }
    }
}

JoeCFD · wrote on 4 Jan 2023, 20:10

add this to each image
Layout.alignment: Qt.AlignCenter

Stefanoxjx · wrote on 4 Jan 2023, 20:15

@JoeCFD said in Calculate width of QML Item:

Layout.alignment: Qt.AlignCenter

Doesn't work :(

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3

Window {
    width: 1024
    height: 800
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: menuBar
        width: parent.width
        height: 100
        color: "grey"

        Rectangle /*Item*/ {
            id: centralMenu

            anchors {
                top: parent.top
                bottom: parent.bottom
                horizontalCenter: parent.horizontalCenter
            }
            color: "red"
            width: parent.width * 0.6

            RowLayout {
                anchors {
                    fill: parent
                    topMargin: 10
                    bottomMargin: 10
                }

                //spacing: 2
                Item {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }

                Image {
                    Layout.fillHeight: true
                    Layout.alignment: Qt.AlignCenter
                    fillMode: Image.PreserveAspectFit
                    source: "Images/HAL9000.svg"
                }

                Image {
                    Layout.fillHeight: true
                    Layout.alignment: Qt.AlignCenter
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Stats.png"
                }

                Image {
                    Layout.fillHeight: true
                    Layout.alignment: Qt.AlignCenter
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Sentinel.png"
                }

                Image {
                    Layout.fillHeight: true
                    Layout.alignment: Qt.AlignCenter
                    fillMode: Image.PreserveAspectFit
                    source: "Images/bluetooth.png"
                }

                Image {
                    Layout.fillHeight: true
                    Layout.alignment: Qt.AlignCenter
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Option.png"
                }

                Image {
                    Layout.fillHeight: true
                    Layout.alignment: Qt.AlignCenter
                    fillMode: Image.PreserveAspectFit
                    source: "Images/Multimedia.png"
                }

                Image {
                    Layout.fillHeight: true
                    Layout.alignment: Qt.AlignCenter
                    fillMode: Image.PreserveAspectFit
                    source: "Images/joystick.png"
                }

                Item {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }
            }
        }
    }
}

JoeCFD · 1 Apr 2023, 20:17

@Stefanoxjx said in Calculate width of QML Item:

import QtQuick.Layouts 1.3

import QtQuick.Layouts 1.15. Use two images first to see if they are in the center.

Stefanoxjx · wrote on 4 Jan 2023, 20:20

This is the result with two images and Import 1.15 instead 1.3:

Stefanoxjx · 5 Jan 2023, 16:05

I discovered that for Layout is better use Layout.preferredWidth and Layout.preferredHeight and the empty initial and endig Item is not necessary.

Many thanks for your help :)

JoeCFD · 1 May 2023, 16:06

@Stefanoxjx Great you made it. The empty item is supposed to work as spacer. You may need it down the road.