How can I create an image like layout with QML ?



  • 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?

    0_1547128291384_template.png

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


  • 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



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



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

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


  • @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" }
        }
    }



Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.