Qt5中QML如何自定義環形菜單/環形選擇框

Qt5中QML如何自定義環形菜單/環形選擇框

引言

在Qt5的QML中，自定義控件是一個非常強大的功能，它允許開發者根據應用需求創建獨特的用戶界面元素。環形菜單（Circular Menu）或環形選擇框（Circular Selector）是一種常見的UI組件，通常用于提供一種直觀且美觀的方式來選擇選項或執行操作。本文將詳細介紹如何在Qt5的QML中自定義一個環形菜單或環形選擇框。

1. 環形菜單的基本概念

環形菜單是一種以圓形布局排列的菜單項，用戶可以通過點擊或滑動來選擇不同的選項。與傳統的線性菜單相比，環形菜單提供了更加直觀和美觀的用戶體驗，特別適用于觸摸屏設備。

1.1 環形菜單的特點

• 圓形布局：菜單項圍繞一個中心點排列，形成一個圓形。
• 直觀操作：用戶可以通過點擊或滑動來選擇菜單項。
• 美觀性：環形菜單通常比傳統的線性菜單更具視覺吸引力。

1.2 環形菜單的應用場景

• 移動應用：在移動設備上，環形菜單可以提供更加直觀的操作體驗。
• 游戲界面：在游戲中，環形菜單可以用于選擇武器、技能等。
• 儀表盤：在儀表盤或控制面板中，環形菜單可以用于選擇不同的模式或設置。

2. QML基礎

在開始自定義環形菜單之前，我們需要了解一些QML的基礎知識。

2.1 QML簡介

QML（Qt Meta-Object Language）是一種用于描述用戶界面的聲明性語言。它允許開發者以簡潔的方式定義用戶界面的結構和行為。QML與JavaScript緊密結合，使得開發者可以在QML中嵌入JavaScript代碼來實現復雜的邏輯。

2.2 QML的基本結構

一個典型的QML文件通常包含以下幾個部分：

• 導入語句：用于導入所需的QML模塊和組件。
• 根元素：定義QML文件的根元素，通常是Item、Rectangle或Window等。
• 子元素：在根元素內部定義子元素，用于構建用戶界面。

import QtQuick 2.15

Rectangle {
    width: 360
    height: 360
    color: "lightblue"

    Text {
        text: "Hello, QML!"
        anchors.centerIn: parent
    }
}

2.3 QML中的屬性綁定

QML中的屬性綁定是一種強大的機制，它允許一個屬性的值自動更新以反映另一個屬性的變化。例如：

Rectangle {
    width: 100
    height: width  // height屬性綁定到width屬性
}

在這個例子中，height屬性的值始終與width屬性的值相同。

3. 自定義環形菜單的實現

接下來，我們將逐步實現一個自定義的環形菜單。我們將使用QML中的Item、Rectangle、Text等基本元素，并結合JavaScript來實現環形菜單的邏輯。

3.1 創建環形菜單的基本結構

首先，我們需要創建一個基本的環形菜單結構。我們將使用Item作為根元素，并在其中定義多個Rectangle元素來表示菜單項。

import QtQuick 2.15

Item {
    width: 300
    height: 300

    Rectangle {
        id: centerCircle
        width: 50
        height: 50
        radius: width / 2
        color: "gray"
        anchors.centerIn: parent
    }

    Rectangle {
        id: menuItem1
        width: 50
        height: 50
        radius: width / 2
        color: "red"
        x: centerCircle.x + centerCircle.width / 2 + 100
        y: centerCircle.y + centerCircle.height / 2 - menuItem1.height / 2
    }

    Rectangle {
        id: menuItem2
        width: 50
        height: 50
        radius: width / 2
        color: "blue"
        x: centerCircle.x + centerCircle.width / 2 - menuItem2.width / 2
        y: centerCircle.y + centerCircle.height / 2 + 100
    }

    Rectangle {
        id: menuItem3
        width: 50
        height: 50
        radius: width / 2
        color: "green"
        x: centerCircle.x + centerCircle.width / 2 - menuItem3.width / 2 - 100
        y: centerCircle.y + centerCircle.height / 2 - menuItem3.height / 2
    }

    Rectangle {
        id: menuItem4
        width: 50
        height: 50
        radius: width / 2
        color: "yellow"
        x: centerCircle.x + centerCircle.width / 2 - menuItem4.width / 2
        y: centerCircle.y + centerCircle.height / 2 - menuItem4.height / 2 - 100
    }
}

在這個例子中，我們創建了一個中心圓和四個菜單項，分別位于中心圓的上下左右四個方向。

3.2 使用JavaScript動態計算菜單項的位置

為了更靈活地控制菜單項的位置，我們可以使用JavaScript來動態計算每個菜單項的位置。我們可以定義一個函數來計算每個菜單項的坐標，并在Component.onCompleted中調用這個函數。

import QtQuick 2.15

Item {
    width: 300
    height: 300

    property int itemCount: 4
    property int radius: 100

    Rectangle {
        id: centerCircle
        width: 50
        height: 50
        radius: width / 2
        color: "gray"
        anchors.centerIn: parent
    }

    Repeater {
        model: itemCount
        Rectangle {
            id: menuItem
            width: 50
            height: 50
            radius: width / 2
            color: ["red", "blue", "green", "yellow"][index]
            x: centerCircle.x + centerCircle.width / 2 + radius * Math.cos(2 * Math.PI * index / itemCount) - width / 2
            y: centerCircle.y + centerCircle.height / 2 + radius * Math.sin(2 * Math.PI * index / itemCount) - height / 2
        }
    }
}

在這個例子中，我們使用Repeater來動態創建菜單項，并使用JavaScript的Math.cos和Math.sin函數來計算每個菜單項的位置。itemCount屬性定義了菜單項的數量，radius屬性定義了菜單項與中心圓的距離。

3.3 添加交互功能

為了讓環形菜單具有交互功能，我們可以為每個菜單項添加MouseArea，并在點擊時觸發相應的操作。

import QtQuick 2.15

Item {
    width: 300
    height: 300

    property int itemCount: 4
    property int radius: 100

    Rectangle {
        id: centerCircle
        width: 50
        height: 50
        radius: width / 2
        color: "gray"
        anchors.centerIn: parent
    }

    Repeater {
        model: itemCount
        Rectangle {
            id: menuItem
            width: 50
            height: 50
            radius: width / 2
            color: ["red", "blue", "green", "yellow"][index]
            x: centerCircle.x + centerCircle.width / 2 + radius * Math.cos(2 * Math.PI * index / itemCount) - width / 2
            y: centerCircle.y + centerCircle.height / 2 + radius * Math.sin(2 * Math.PI * index / itemCount) - height / 2

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Menu item", index + 1, "clicked")
                }
            }
        }
    }
}

在這個例子中，我們為每個菜單項添加了MouseArea，并在onClicked信號中輸出點擊的菜單項的索引。

3.4 添加動畫效果

為了增強用戶體驗，我們可以為環形菜單添加一些動畫效果。例如，當用戶點擊菜單項時，我們可以讓菜單項放大或縮小。

import QtQuick 2.15

Item {
    width: 300
    height: 300

    property int itemCount: 4
    property int radius: 100

    Rectangle {
        id: centerCircle
        width: 50
        height: 50
        radius: width / 2
        color: "gray"
        anchors.centerIn: parent
    }

    Repeater {
        model: itemCount
        Rectangle {
            id: menuItem
            width: 50
            height: 50
            radius: width / 2
            color: ["red", "blue", "green", "yellow"][index]
            x: centerCircle.x + centerCircle.width / 2 + radius * Math.cos(2 * Math.PI * index / itemCount) - width / 2
            y: centerCircle.y + centerCircle.height / 2 + radius * Math.sin(2 * Math.PI * index / itemCount) - height / 2

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Menu item", index + 1, "clicked")
                    scaleAnimation.start()
                }
            }

            PropertyAnimation {
                id: scaleAnimation
                target: menuItem
                property: "scale"
                from: 1.0
                to: 1.2
                duration: 200
                easing.type: Easing.InOutQuad
                onStopped: {
                    scaleAnimationBack.start()
                }
            }

            PropertyAnimation {
                id: scaleAnimationBack
                target: menuItem
                property: "scale"
                from: 1.2
                to: 1.0
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }
    }
}

在這個例子中，我們為每個菜單項添加了兩個PropertyAnimation，一個用于放大菜單項，另一個用于縮小菜單項。當用戶點擊菜單項時，首先觸發放大動畫，然后在放大動畫結束后觸發縮小動畫。

3.5 添加文本標簽

為了讓用戶更清楚地了解每個菜單項的功能，我們可以為每個菜單項添加文本標簽。

import QtQuick 2.15

Item {
    width: 300
    height: 300

    property int itemCount: 4
    property int radius: 100

    Rectangle {
        id: centerCircle
        width: 50
        height: 50
        radius: width / 2
        color: "gray"
        anchors.centerIn: parent
    }

    Repeater {
        model: itemCount
        Rectangle {
            id: menuItem
            width: 50
            height: 50
            radius: width / 2
            color: ["red", "blue", "green", "yellow"][index]
            x: centerCircle.x + centerCircle.width / 2 + radius * Math.cos(2 * Math.PI * index / itemCount) - width / 2
            y: centerCircle.y + centerCircle.height / 2 + radius * Math.sin(2 * Math.PI * index / itemCount) - height / 2

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Menu item", index + 1, "clicked")
                    scaleAnimation.start()
                }
            }

            PropertyAnimation {
                id: scaleAnimation
                target: menuItem
                property: "scale"
                from: 1.0
                to: 1.2
                duration: 200
                easing.type: Easing.InOutQuad
                onStopped: {
                    scaleAnimationBack.start()
                }
            }

            PropertyAnimation {
                id: scaleAnimationBack
                target: menuItem
                property: "scale"
                from: 1.2
                to: 1.0
                duration: 200
                easing.type: Easing.InOutQuad
            }

            Text {
                text: "Item " + (index + 1)
                anchors.centerIn: parent
                color: "white"
                font.pixelSize: 12
            }
        }
    }
}

在這個例子中，我們為每個菜單項添加了一個Text元素，用于顯示菜單項的標簽。

3.6 添加旋轉功能

為了讓環形菜單更具動態感，我們可以為整個環形菜單添加旋轉功能。用戶可以通過拖動來旋轉環形菜單。

import QtQuick 2.15

Item {
    width: 300
    height: 300

    property int itemCount: 4
    property int radius: 100
    property real rotationAngle: 0

    Rectangle {
        id: centerCircle
        width: 50
        height: 50
        radius: width / 2
        color: "gray"
        anchors.centerIn: parent
    }

    Repeater {
        model: itemCount
        Rectangle {
            id: menuItem
            width: 50
            height: 50
            radius: width / 2
            color: ["red", "blue", "green", "yellow"][index]
            x: centerCircle.x + centerCircle.width / 2 + radius * Math.cos(2 * Math.PI * index / itemCount + rotationAngle) - width / 2
            y: centerCircle.y + centerCircle.height / 2 + radius * Math.sin(2 * Math.PI * index / itemCount + rotationAngle) - height / 2

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Menu item", index + 1, "clicked")
                    scaleAnimation.start()
                }
            }

            PropertyAnimation {
                id: scaleAnimation
                target: menuItem
                property: "scale"
                from: 1.0
                to: 1.2
                duration: 200
                easing.type: Easing.InOutQuad
                onStopped: {
                    scaleAnimationBack.start()
                }
            }

            PropertyAnimation {
                id: scaleAnimationBack
                target: menuItem
                property: "scale"
                from: 1.2
                to: 1.0
                duration: 200
                easing.type: Easing.InOutQuad
            }

            Text {
                text: "Item " + (index + 1)
                anchors.centerIn: parent
                color: "white"
                font.pixelSize: 12
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        onPositionChanged: {
            var dx = mouse.x - centerCircle.x
            var dy = mouse.y - centerCircle.y
            rotationAngle = Math.atan2(dy, dx)
        }
    }
}

在這個例子中，我們為整個環形菜單添加了一個MouseArea，并在onPositionChanged信號中計算鼠標相對于中心圓的角度，然后更新rotationAngle屬性。rotationAngle屬性用于動態調整每個菜單項的位置，從而實現旋轉效果。

3.7 添加平滑旋轉動畫

為了讓旋轉效果更加平滑，我們可以為rotationAngle屬性添加一個Behavior，使其在變化時自動應用動畫效果。

import QtQuick 2.15

Item {
    width: 300
    height: 300

    property int itemCount: 4
    property int radius: 100
    property real rotationAngle: 0

    Rectangle {
        id: centerCircle
        width: 50
        height: 50
        radius: width / 2
        color: "gray"
        anchors.centerIn: parent
    }

    Repeater {
        model: itemCount
        Rectangle {
            id: menuItem
            width: 50
            height: 50
            radius: width / 2
            color: ["red", "blue", "green", "yellow"][index]
            x: centerCircle.x + centerCircle.width / 2 + radius * Math.cos(2 * Math.PI * index / itemCount + rotationAngle) - width / 2
            y: centerCircle.y + centerCircle.height / 2 + radius * Math.sin(2 * Math.PI * index / itemCount + rotationAngle) - height / 2

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Menu item", index + 1, "clicked")
                    scaleAnimation.start()
                }
            }

            PropertyAnimation {
                id: scaleAnimation
                target: menuItem
                property: "scale"
                from: 1.0
                to: 1.2
                duration: 200
                easing.type: Easing.InOutQuad
                onStopped: {
                    scaleAnimationBack.start()
                }
            }

            PropertyAnimation {
                id: scaleAnimationBack
                target: menuItem
                property: "scale"
                from: 1.2
                to: 1.0
                duration: 200
                easing.type: Easing.InOutQuad
            }

            Text {
                text: "Item " + (index + 1)
                anchors.centerIn: parent
                color: "white"
                font.pixelSize: 12
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        onPositionChanged: {
            var dx = mouse.x - centerCircle.x
            var dy = mouse.y - centerCircle.y
            rotationAngle = Math.atan2(dy, dx)
        }
    }

    Behavior on rotationAngle {
        NumberAnimation {
            duration: 200
            easing.type: Easing.InOutQuad
        }
    }
}

在這個例子中，我們為rotationAngle屬性添加了一個Behavior，使其在變化時自動應用NumberAnimation動畫效果。這樣，當用戶拖動環形菜單時，旋轉效果將更加平滑。

4. 環形選擇框的實現

環形選擇框與環形菜單類似，但它通常用于選擇一個選項，而不是執行多個操作。我們可以通過修改環形菜單的代碼來實現一個環形選擇框。

4.1 添加選擇功能

為了實現選擇功能，我們可以為每個菜單項添加一個selected屬性，并在點擊時更新當前選擇的菜單項。

”`qml import QtQuick 2.15

Item { width: 300 height: 300

property int itemCount: 4
property int radius: 100
property real rotationAngle: 0
property int selectedIndex: -1

Rectangle {
    id: centerCircle
    width: 50
    height: 50
    radius: width / 2
    color: "gray"
    anchors.centerIn: parent