custom sliding menu or navigation drawer

saeidparand

Dear Friend ,
I am newer in to Qt Qml , I want to make a custom drawer like this picture , But I don't have any Idea about making this kind of custom drawer

thanks for you help.

sierdzio

Look into the cinematic demo http://quitcoding.com/?page=work#cinex

Basically you'll need to use a Path and lay out your menu items along that path.

saeidparand

@sierdzio
Thanks for your help ,
Don't you have any sample code ?

sierdzio

@saeidparand said in custom sliding menu or navigation drawer:

@sierdzio
Thanks for your help ,
Don't you have any sample code ?

No, I don't. Check the example I've sent you in my last message.

saeidparand

we can use this kind of code for making Drawer and listview

import QtQuick 2.7
import QtQuick.Controls 2.2
import Qt.labs.calendar 1.0
ApplicationWindow {
id:root
visible: true
width: 640
height: 480
// property alias mousearea: mousearea
title: qsTr("Hello World")

Drawer {
    id: drawer
    width: parent.width/3
    height: root.height
    edge: Qt.LeftArrow
    dragMargin: 20
    dim: false
    modal: false
    //opacity: 0.5
    PathView {
        id:path
        width: drawer.width//400
        height:drawer.height//400
        anchors.centerIn: parent
        model: ListModel {
            ListElement { name: "element1" }//; myimage:"images/1.png"}
            ListElement { name: "element2" }
            ListElement { name: "element3" }
            ListElement { name: "element4" }
            ListElement { name: "element5" }
            ListElement { name: "element6" }
            ListElement { name: "element7" }
            ListElement { name: "element8" }
        }
        delegate: Rectangle {
            id:delrect
            width: 40
            height: 40
            radius: 20
            color: "blue"
            Text {
                text: name
                anchors.centerIn: parent
                transform: [
                    Translate {y:-30}
                ]
            }
                           
        }
        path: Path {
            id:path2
            startX: 200
            startY: 0
            //PathArc { x: 200; y: 400; radiusX: 200; radiusY: 200; useLargeArc: true }
            PathArc { x: 200; y: 400; radiusX: 200; radiusY: 200; useLargeArc: true }
            PathArc { x: 200; y: 0; radiusX: 200; radiusY: 200; useLargeArc: true }
        }
        
    }
}

}

saeidparand

But , Unfortunately It is not responsive , how can I fix it?

sierdzio

@saeidparand said in custom sliding menu or navigation drawer:

But , Unfortunately It is not responsive , how can I fix it?

What kind of responsiveness do you expect? If the elements should be clickable, then you need to add a mouse area in the delegate, and handle the clicks there.

saeidparand

@sierdzio
this listview is in the Drawer ,but when I resize the window this listview doesn't resize ,
how can I fix it?

sierdzio

Code seems OK. Maybe try using Layout or anchors.fill: parent instead of binding to height and width?