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        //... ...    }

demo 公司中秋节放假通知链接：https://github.com/gongjianbo/mytestcode2021/tree/master/qml/testqml_20220313_pathview

主要代码：

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: "angl给好朋友的一封信e"; 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: fal            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: fal        path: p有关中秋节的手抄报ath {            //一个圆环路径            pathanglearc {                centerx: 125; centery: 125                radiusx: control.spread; radiusy: control.spread                movetostart: true                startangle: 0                sweepangle: control.angle            }        }    }    background: item { }}

到此这篇关于qt5中qml自定义环形菜单/环形选择框的实现的文章就介绍到这了,更多相关qt5 qml环形菜单内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！