Shulou(Shulou.com)06/01 Report--

This "Qt5 QML how to customize the ring menu / ring selection box" article knowledge points most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can read this article can have a harvest, let's take a look at this "Qt5 QML how to customize the ring menu / ring selection box" article bar.

Qt5 itself provides a fan-shaped menu PieMenu, which belongs to the QtQuick.Extras module, which is extended from QtQuick.Control1. QtQuick.Control1 is discarded in the higher version of Qt5 and removed in Qt6.

However, we can also use QtQuick.Control2 components to customize the style to implement circular or fan-shaped menus and selection boxes. The main idea is to replace the default ListView with PathView, and then change the background style of the pop-up box.

ItemDelegate needs to be set to ComboBox or Menu, not View. It is best to use the relevant type of Button (the default is ItemDelegate type), because the component defaults to these widgets as Button type, and the internal cast is handled as a button. And if you use the button, you don't have to handle the drop-down box currentIndex yourself, but you will handle it internally, which avoids the problem of invalidating the binding of its properties after the delegate assigns a value to the currentIndex.

QQuickAction * QQuickMenu::actionAt (int index) const {QQ (const QQuickMenu); QQuickAbstractButton * item = qobject_cast (d-> itemAt (index)); if (! item) return nullptr; return item- > action ();}

When customizing, I encounter a situation, that is, after PathView replaces ListView as the contentItem of Menu, Menu's contentData and contentModel will always have one more highlighted Item, so there is a gap in the circular path. At present, I can only subtract one from the number of Item displayed to make the display look normal.

ContentItem: PathView {model: control.contentModel / / put PathView in Menu, and a highlight Item will be put into contentModel, minus pathItemCount: control.count > 0? Control.count-1: 0 / /...}

Main code:

Import QtQuick 2.12import QtQuick.Window 2.12import QtQuick.Controls 2.12 Window {width: 640 height: 480 visible: true title: qsTr ("PathView") Row {anchors.centerIn: parent spacing: 20 MyComboBox {model: 10} Button {width: 60 height: 30 text: "menu" Background: Rectangle {radius: 15 color: "red" border.color: "black"} onClicked: {menu.popup ()} MyMenu {id: menu anchors.centerIn: parent Action {text: "1"} Action {text: "2"} Action {text: "3"} Action {text: "4"} Action {text: "5"} Action {text: "6"} Action {text: "7"} Action {text: "8"} Action {text: "9"} Action {text: "10"}} import QtQuick 2.12import QtQuick.Controls 2.12 / / circular selection box / / Gong Jianbo 2022-03-13//note: if the pop-up box is pop, it will be restricted to window ComboBox {id: control implicitWidth : 30 implicitHeight: 30 opacity: 0.9999 delegate: ItemDelegate {width: 30 height: width padding: 0 background: Rectangle {radius: width / 2 color: "green" border.color: "black"} contentItem: Text {text: modelData padding: 0 verticalAlignment: Text.AlignVCenter HorizontalAlignment: Text.AlignHCenter}} contentItem: Text {text: control.displayText padding: 0 verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter} indicator: null background: Rectangle {radius: 15 color: "green" border.color: "black"} popup: Popup {id: pop width: Angle range and extended radius of height: width anchors.centerIn: parent margins: 0 padding: 0 / / pathview ring property int angle: 1 property int spread: 1 / / pop transition animation enter: Transition {NumberAnimation {property: "angle" when pop-up and hidden From: 1; to: 360; duration: 500} NumberAnimation {property: "spread"; from: 1; to: 100; duration: 500} exit: Transition {ParallelAnimation {NumberAnimation {property: "angle"; from: 360; to: 1; duration: 500} NumberAnimation {property: "spread"; from: 100; to: 1 Duration: 500} background: Item {} contentItem: PathView {model: control.popup.visible? Control.delegateModel: null / / currentIndex: control.highlightedIndex / / highlightRangeMode: PathView.NoHighlightRange interactive: false path: Path {/ / A ring path PathAngleArc {centerX: 100; centerY: 100 radiusX: pop.spread RadiusY: pop.spread moveToStart: true startAngle: 0 sweepAngle: pop.angle}} import QtQuick 2.12import QtQuick.Controls 2.12 / / Circular menu / / Gong Jianbo 2022-03-13//note: if the pop-up frame is pop, it will be restricted to window Menu {id: control implicitWidth : 250implicitHeight: 250margins: 0 padding: 0 / / the angle range and extended radius of the pathview ring property int angle: 1 property int spread: 1 / / pop transition animation enter: Transition {NumberAnimation {property: "angle" when pop-up and hidden From: 1; to: 360; duration: 500} NumberAnimation {property: "spread"; from: 1; to: 100; duration: 500}} exit: Transition {ParallelAnimation {NumberAnimation {property: "angle"; from: 360; to: 1; duration: 500} NumberAnimation {property: "spread"; from: 100; to: 1 Duration: 500}} delegate: MenuItem {id: item width: 30 height: width padding: 0 spacing: 0 indicator: null arrow: null background: Rectangle {radius: width / 2 color: "red" border.color: "black"} contentItem: Text { Text: item.text padding: 0 verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter}} contentItem: PathView {implicitWidth: 250implicitHeight: 250model: control.contentModel / / put PathView in Menu A highlight Item will be put into the contentModel, minus pathItemCount: control.count > 0? Control.count-1: 0 / / currentIndex: control.currentIndex / / highlightRangeMode: PathView.NoHighlightRange interactive: false path: Path {/ / A ring path PathAngleArc {centerX: 125; centerY: 125 radiusX: control.spread RadiusY: control.spread moveToStart: true startAngle: 0 sweepAngle: control.angle}} background: Item {} above is about how to customize the circular menu / circular selection box in QML in Qt5. I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.