How can I create an image like layout with QML ?

[Janilson Duarte]

I'm learning QML now and I want to create something like the attached image, I've already tried to create something but I can not manipulate the vertical menu buttons and leave the image equal, could someone show me what I should do?

import QtQuick 2.9
import QtQuick.Window 2.2

import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.11
import QtCharts 2.0

 Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")

        color: "gainsboro"

        Rectangle {
            id: page
            width: 320; height: 1020
            color: "navy"

            Text {
                id: helloText
                y: 30
                anchors.horizontalCenter: page.horizontalCenter
                font.pointSize: 24; font.bold: true
            }

 Button {
                text: "button"
                style: ButtonStyle {
                    background: Rectangle {
                        implicitWidth: 321
                        implicitHeight: 25
                        border.width: control.activeFocus ? 2 : 1
                        border.color: "#fff"
                        radius: 0
                        gradient: Gradient {
                            GradientStop { position: 0 ; 
color: control.pressed ? "#ccc" : "deepskyblue" }
                            GradientStop { position: 1 ; 
color: control.pressed ? "#aaa" : "deepskyblue" }
                        }
                    }
                }
            }
        }

Item {
                    x: 520; y: 50;
                    width: 300; height: 100

                    Row { 
                        spacing: 20 
                        Rectangle { width: 300; height: 100; color: "white" }
                        Rectangle { width: 300; height: 100; color: "white" }
                        Rectangle { width: 300; height: 100; color: "white" }
                        Rectangle { width: 300; height: 100; color: "white" }
                    }

                    Row { 
                        spacing: 20
                        x: 0; y: 220;

                        Rectangle { width: 300; height: 100; color: "white" }
                        Rectangle { width: 300; height: 100; color: "white" }
                        Rectangle { width: 300; height: 100; color: "white" }
                        Rectangle { width: 300; height: 100; color: "white" }
                    }
                }
    }    

[ODБOï]

Hi @Janilson-Duarte,

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    id:wn
    color: "gainsboro"
    //page
    RowLayout{
        anchors.fill: parent
        // left navigation menu
        ColumnLayout{
            //Layout.maximumHeight: 100
            //Layout.maximumWidth: 100
            //Layout.minimumHeight: 50
            //Layout.minimumWidth: 50
            Text{text:"Menu";font.bold: true;font.pixelSize: 15;Layout.alignment: Qt.AlignCenter}
            Repeater{
                model: 5
                Button{
                    text:"menu btn " + index
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }
            }

        }

        // shown page content(white Rectangles)
        GridLayout{
            columns: 2

            Repeater{
                model:4
                Rectangle{
                    color: "white"
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    Layout.preferredHeight: 100
                    Layout.preferredWidth: 100

                    Text{text: "menu item " + index;anchors.centerIn: parent}
                }
            }
        }
    }

}

In this page there is all you need to master positioning with QML

[Janilson Duarte]

@LeLev Thanks for help, but you know how i can do a vertical menu with icons like that?

[ODБOï]

@Janilson-Duarte
several possibilities, one is to create your custom Component

Rectangle{
 RowLayout{
   Image{} 
   Text{}
 }
MouseArea{}
}

[Janilson Duarte]

@LeLev Thanks a lot, now I want to know how to make a tabview vertical menu with icons?

Can you help me again?

I tried this

TabView {
    Tab {
        title: "Red"
        RowLayout{
          Image{ source: "img/image.png"}
     }

    }
    
    Tab {
        title: "Blue"
        Rectangle { color: "blue" }
    }
    Tab {
        title: "Green"
        Rectangle { color: "green" }
    }
}

[ODБOï]

can this help ? https://forum.qt.io/topic/81323/how-can-i-create-vertical-tab-view-in-qml