How to make this menu ?
Unsolved
QML and Qt Quick
-
Hello, I want to create a submenu like in the photos. How can I show the active menu as in the photo?
-
There is nothing exist like this. You may need to work with many custom images to make this happen.
-
The components in the pictures are available, but I have no idea how to use them.
-
@NullByte definitely not the best implementation, but maybe it brings you on the right track:
import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.12 import QtQuick.Layouts 1.12 import QtGraphicalEffects 1.15 Window { width: 320 height: 520 visible: true title: qsTr("Navbar Quick Sketch") ColumnLayout { anchors.fill: parent StackLayout { Layout.fillWidth: true Layout.fillHeight: true currentIndex: navBar.currentIndex Item { Text { anchors.centerIn: parent text: "A" } } Item { Text { anchors.centerIn: parent text: "B" } } Item { Text { anchors.centerIn: parent text: "C" } } } // BEGIN NAVBAR Item { id: navBar Layout.fillWidth: true height: 80 property int currentIndex: 0 property var navigationModel: [{ "iconName": "A" }, { "iconName": "B" }, { "iconName": "C" }] property int animationInterval: 150 Item { id: navBarBackground anchors.fill: parent // overflow outside the viewport to make outer radius invisible anchors.leftMargin: -styleRadius anchors.rightMargin: -styleRadius property color backgroundColor: "#EEF3FF" property int styleRadius: 20 // bottom background Rectangle { id: bottom anchors.fill: parent anchors.topMargin: parent.height / 2 color: parent.backgroundColor } // background left to indicator Rectangle { id: left anchors.left: parent.left anchors.top: parent.top anchors.topMargin: parent.height * 0.15 anchors.right: indicator.left anchors.bottom: parent.bottom color: parent.backgroundColor radius: parent.styleRadius } // the indicator part - 2 circles inside each other Rectangle { id: indicator height: parent.height * 0.8 width: height anchors.top: parent.top color: "white" radius: width / 2 property int itemWidth: navBar.width / navBar.navigationModel.length property int offset: (itemWidth - width) / 2 x: parent.styleRadius + offset + itemWidth * navBar.currentIndex Rectangle { id: highlightCircle anchors.fill: parent anchors.margins: 5 radius: height / 2 color: "#585CE5" } // add a simple shadow to the highlight DropShadow { anchors.fill: highlightCircle horizontalOffset: 4 verticalOffset: 4 radius: 4 samples: 9 color: "#40000000" source: highlightCircle antialiasing: true } // very simple animation Behavior on x { PropertyAnimation { duration: navBar.animationInterval easing.type: Easing.InOutBounce } } } // background right to the indicator Rectangle { id: right anchors.right: parent.right anchors.top: parent.top anchors.topMargin: parent.height * 0.15 anchors.left: indicator.right anchors.bottom: parent.bottom color: parent.backgroundColor radius: parent.styleRadius } } RowLayout { anchors.fill: parent anchors.topMargin: parent.height * 0.15 Repeater { model: navBar.navigationModel delegate: Item { id: delegateWrapper Layout.fillWidth: true Layout.fillHeight: true Text { property bool isActive: index === navBar.currentIndex parent: isActive ? indicator : delegateWrapper anchors.centerIn: parent horizontalAlignment: Text.AlignHCenter font.pointSize: 16 text: modelData.iconName color: isActive ? "white" : "#9297B2" } MouseArea { anchors.fill: parent onClicked: { navBar.currentIndex = index } } } } } } } }
-
I shared an experiment around this in a previous forum post :
https://forum.qt.io/topic/111454/qml-more-advanced-shapes/4