Calculate width of QML Item

JoeCFD

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

Stefanoxjx

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

@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

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

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

Stefanoxjx

@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

@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

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

Stefanoxjx

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

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