溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“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.12
import QtQuick.Window 2.12
import 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.12
import 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.12
import 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如何自定義環形菜單/環形選擇框”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
