How can I create a layout like the image with QML?

Question

How can I create a layout like the image with QML?

Asked 5 years, 11 months ago

Viewed 108 times

1

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

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

Important you [Dit] your post and explain in detail your problem, describing what you tried and where is the current difficulty. Requests for complete refactoring, ready-made code, tutorials and/or things involving more than one subject or procedure in the same post usually do not fit the site scope. Links to better understand how Sopt works: [Tour], [Ask], Manual on how NOT to ask questions and [Help]. If you have doubt in any specific detail, posting a [MCVE] of difficulty can help a lot.

– Bacco

2019/01/09 at 08:43
@Bacco Now will you help me?

– Janilson Duarte

2019/01/10 at 07:08

1 answer

Browser other questions tagged c++ qt qml

You are not signed in. Login or sign up in order to post.

by Diogo Guimarães • 19 points · Answer 1 · 2021-02-10T23:30:26+00:00

You can try following the example below...

Ex:

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
   width: Screen.width
   height: Screen.height
   visible: true
   title: qsTr("Layout")

   property color leftFrame_bgcolor: "#3c4a55"
   property color main_bgcolor: "#ebebeb"

ListModel {
    id: _listModelMenu

    ListElement {
        label: "Sites"
        icon : "caminho_icon"
        fun: ()=>{console.log("Clicked on: Sites")}
    }

    ListElement {
        label: "Secure Notes"
        icon : "caminho_icon"
        fun: ()=>{console.log("Clicked on: Secure Notes")}
    }

    ListElement {
        label: "Form Files"
        icon : "caminho_icon"
        fun: ()=>{console.log("Clicked on: Form Files")}
    }

    ListElement {
        label: "Sharing Center"
        icon : "caminho_icon"
        fun: ()=>{console.log("Clicked on: Sharing Center")}
    }

    ListElement {
        label: "Security Challenge"
        icon : "caminho_icon"
        fun: ()=>{console.log("Clicked on: Security Challenge")}
    }
}

Rectangle {
    anchors.fill: parent
    color: main_bgcolor
}

Column {
    id: leftFrame
    width: 300
    height: parent.height
    anchors.left: parent.left
    anchors.leftMargin: 0
    anchors.top: parent.top
    anchors.topMargin: 0
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 0

    Rectangle {
        id: backgroundColor
        color: leftFrame_bgcolor
        anchors.fill: parent
    }

    Rectangle {
        color: "transparent"
        height: 100
        width: parent.width

        Image {
            id: _icon
            source: "source_image"
            height: 25
            width: height
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 30
        }

        Text {
            id: _label
            text: "Collapse"
            font.family: "Arial"
            font.bold: true
            color: "#959595"
            font.pixelSize: 20
            anchors.left: _icon.right
            anchors.leftMargin: 25
            anchors.verticalCenter: parent.verticalCenter
        }
    }

    Repeater {
        id: _rpt_btns
        model: _listModelMenu
        delegate: Rectangle {
            id: _btn
            color: _ma.containsMouse ? "#20313b" : "transparent"
            height: 50
            width: parent.width

            Image {
                id: _iconbtn
                source: icon
                height: 25
                width: height
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 30
            }

            Text {
                id: _labelbtn
                text: label
                font.family: "Arial"
                font.bold: true
                color:  _ma.containsMouse ? "white" : "#959595"
                font.pixelSize: 20
                anchors.left: _iconbtn.right
                anchors.leftMargin: 25
                anchors.verticalCenter: parent.verticalCenter
            }

            MouseArea {
                id: _ma
                anchors.fill: parent
                hoverEnabled: true
                onClicked: {
                    fun()
                }
            }
        }
    }

}

Item {
    width: parent.width - leftFrame.width
    height: parent.height
    anchors.left: leftFrame.right
    anchors.leftMargin: 0
    anchors.top: parent.top
    anchors.topMargin: 0

    Rectangle {
        anchors.top: parent.top
        anchors.topMargin: 100
        width: parent.width - 10
        height: 2
        color: "#959595"
    }

    Grid {
        id: middleView
        anchors.centerIn: parent
        spacing: 200
        columns: 2
        rows: 2

        Rectangle {
            color: "white"
            width: 400
            height: 200
            border.color: "#959595"
        }

        Rectangle {
            color: "white"
            width: 400
            height: 200
            border.color: "#959595"
        }

        Rectangle {
            color: "white"
            width: 400
            height: 200
            border.color: "#959595"
        }

        Rectangle {
            color: "white"
            width: 400
            height: 200
            border.color: "#959595"
        }
    }

}

}