这篇“Qt5中QML如何自定义环形菜单/环形选择框”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Qt5中QML如何自定义环形菜单/环形选择框”文章吧。
Qt5 中本身提供了扇形菜单 PieMenu，属于 QtQuick.Extras 模块，这个模块是拓展自 QtQuick.Control1 的，QtQuick.Control1 在 Qt5 高版本被废弃，并在 Qt6 移除。
不过我们也可以用 QtQuick.Control2 的组件自定义样式来实现环形或扇形的菜单和选择框。主要思路就是使用 PathView 来替换默认的 ListView，再改下弹框的背景样式。
ItemDelegate 需要设置给 ComboBox 或者 Menu，而不是 View。最好用 Button 的相关类型（默认是 ItemDelegate 类型），因为组件默认这些小部件是 Button 类型，内部 cast 成按钮来处理的。而且用按钮就不用自己处理下拉框 currentIndex，内部会自己处理，这也避免了我们在这个 delegate 对 currentIndex 赋值后导致其属性绑定失效的问题。
QQuickAction *QQuickMenu::actionAt(int index) const{ Q_D(const QQuickMenu); QQuickAbstractButton *item = qobject_cast<QQuickAbstractButton *>(d->itemAt(index)); if (!item) return nullptr; return item->action();}自定义的时候遇到一点状况，就是 PathView 替代 ListView 作为 Menu 的 contentItem 后，Menu 的 contentData 和 contentModel 始终会多一个表示高亮的 Item，这样环形路径就有个缺口，目前我只能将显示的 Item 个数减去一个来使显示效果正常。
contentItem: PathView { model: control.contentModel //把PathView放Menu，会有一个高亮Item被放到contentModel，减去 pathItemCount: control.count > 0 ? control.count - 1 : 0 //... ... }
主要代码：
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 //环形选择框//龚建波 2022-03-13//note：弹框为pop会被限制在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: 200 height: width anchors.centerIn: parent margins: 0 padding: 0 //pathview环形的角度范围和延申半径 property int angle: 1 property int spread: 1 //pop弹出和隐藏时的过渡动画 enter: Transition { ParallelAnimation { NumberAnimation { property: "angle"; 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 { //一个圆环路径 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 //环形菜单//龚建波 2022-03-13//note：弹框为pop会被限制在window内Menu { id: control implicitWidth: 250 implicitHeight: 250 margins: 0 padding: 0 //pathview环形的角度范围和延申半径 property int angle: 1 property int spread: 1 //pop弹出和隐藏时的过渡动画 enter: Transition { ParallelAnimation { NumberAnimation { property: "angle"; 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: 250 implicitHeight: 250 model: control.contentModel //把PathView放Menu，会有一个高亮Item被放到contentModel，减去 pathItemCount: control.count > 0 ? control.count - 1 : 0 //currentIndex: control.currentIndex //highlightRangeMode: PathView.NoHighlightRange interactive: false path: Path { //一个圆环路径 PathAngleArc { centerX: 125; centerY: 125 radiusX: control.spread; radiusY: control.spread moveToStart: true startAngle: 0 sweepAngle: control.angle } } } background: Item { }}以上就是关于“Qt5中QML如何自定义环形菜单/环形选择框”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
