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/MyTestCode/tree/master/Qml/TestQml_20220313_PathView

主要代码：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12Window {width: 640height: 480visible: truetitle: qsTr("PathView")Row {anchors.centerIn: parentspacing: 20MyComboBox {model: 10}Button {width: 60height: 30text: "menu"background: Rectangle {radius: 15color: "red"border.color: "black"}onClicked: {menu.popup()}MyMenu {id: menuanchors.centerIn: parentAction { 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.12
import QtQuick.Controls 2.12//环形选择框
//龚建波 2022-03-13
//note：弹框为pop会被限制在window内
ComboBox {id: controlimplicitWidth: 30implicitHeight: 30opacity: 0.9999delegate: ItemDelegate {width: 30height: widthpadding: 0background: Rectangle {radius: width / 2color: "green"border.color: "black"}contentItem: Text {text: modelDatapadding: 0verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCenter}}contentItem: Text {text: control.displayTextpadding: 0verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCenter}indicator: nullbackground: Rectangle {radius: 15color: "green"border.color: "black"}popup: Popup {id: popwidth: 200height: widthanchors.centerIn: parentmargins: 0padding: 0//pathview环形的角度范围和延申半径property int angle: 1property 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.NoHighlightRangeinteractive: falsepath: Path {//一个圆环路径PathAngleArc {centerX: 100; centerY: 100radiusX: pop.spread; radiusY: pop.spreadmoveToStart: truestartAngle: 0sweepAngle: pop.angle}}}}
}

import QtQuick 2.12
import QtQuick.Controls 2.12//环形菜单
//龚建波 2022-03-13
//note：弹框为pop会被限制在window内
Menu {id: controlimplicitWidth: 250implicitHeight: 250margins: 0padding: 0//pathview环形的角度范围和延申半径property int angle: 1property 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: itemwidth: 30height: widthpadding: 0spacing: 0indicator: nullarrow: nullbackground: Rectangle {radius: width / 2color: "red"border.color: "black"}contentItem: Text {text: item.textpadding: 0verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCenter}}contentItem: PathView {implicitWidth: 250implicitHeight: 250model: control.contentModel//把PathView放Menu，会有一个高亮Item被放到contentModel，减去pathItemCount: control.count > 0 ? control.count - 1 : 0//currentIndex: control.currentIndex//highlightRangeMode: PathView.NoHighlightRangeinteractive: falsepath: Path {//一个圆环路径PathAngleArc {centerX: 125; centerY: 125radiusX: control.spread; radiusY: control.spreadmoveToStart: truestartAngle: 0sweepAngle: control.angle}}}background: Item { }
}

QML自定义环形菜单/环形选择框相关推荐

html下拉选择框箭头改为年,CSS自定义select下拉选择框的样式(不用其他标签模拟)...
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
自定义html下拉选择框,CSS自定义select下拉选择框的样式(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
[RN] React Native 自定义底部弹出选择框实现
React Native 自定义底部选择框实现效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...
DevExpress的TreeList实现自定义右键菜单打开文件选择对话框
场景 DevExpress的TreeList实现节点上添加自定义右键菜单并实现删除节点功能: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...
开发一个出生年份的下拉选择框供用户选择_你的下拉式菜单设计对了吗？
追波范儿(dribbbledesign)------------------------------------------- 下拉菜单主要有两种类型:1. 用于导航的下拉菜单:2. 用于表单的下拉菜 ...
开发一个出生年份的下拉选择框供用户选择_关于下拉式菜单，这一篇足够了
下拉菜单主要有两种类型: 1.用于导航的下拉菜单: 2.用于表单的下拉菜单. 在本文中,我们将对以下内容进行介绍: 01 结构剖析下拉菜单的解剖结构与文本输入字段的解剖结构非常相似. 02 下拉菜单 ...
自定义组合控件：下拉选择框
Spinner 自定义组合控件之下拉选择框项目概述下拉选择框主要是通过在EditText 下用PopupWindow 动态显示ListView 控件来实现的.下拉选择框可以方便用户的输入效率,以此 ...
fluent design_Fluent Design单选按钮，复选框，选择框，Java菜单
fluent design 这次我对JMetro进行了重大更新. 3.8版带来了以下新的Fluent Design (FDS)启发风格(深色和浅色)和更新: 新的单选按钮样式: 复选框的新样式: 菜单 ...
Fluent Design单选按钮，复选框，选择框，Java菜单
这次我对JMetro进行了重大更新. 3.8版引入了以下新的Fluent Design (FDS)启发风格(深色和浅色)和更新: 新的单选按钮样式: 复选框的新样式: 菜单的新样式: 更新了上下文菜单 ...

QML自定义环形菜单/环形选择框

QML自定义环形菜单/环形选择框相关推荐

最新文章

热门文章