当前位置：首页 > article >正文

QML输入控件：Dial联动、音频均衡器的实现 (3)

article 2025/3/31 22:53:34

示例1：带数显的Dial

代码说明

适用场景

运行效果

示例2：多组Dial控件联动

代码说明

运行效果

示例3：音频均衡器界面

代码说明

运行效果

完整工程下载

在上篇中介绍了Dial控件与鼠标事件的应用，本文主要介绍Dial与其它控件的联动，以及音频均衡器界面的实现。

相关阅读：

QML输入控件: Dial基本用法与样式定制（1）-CSDN博客

QML输入控件: Dial与事件 (2)-CSDN博客

最终展示效果:

示例1：带数显的Dial

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("带数值显示的Dial")

    Dial {
        id: valueDisplayDial
        width: 200
        height: 200
        from: 0
        to: 100

        Rectangle {
            anchors.centerIn: parent
            width: 60
            height: 30
            radius: 5
            color: "#f0f0f0"
            border.color: "#808080"

            Text {
                anchors.centerIn: parent
                text: valueDisplayDial.value.toFixed(0)
                font.bold: true
                font.pixelSize: 14
            }
        }
    }
}

这段 QML 代码实现了一个带实时数值显示的 Dial（旋钮）控件，数值会在旋钮中央以矩形框内的文本形式呈现。

代码说明

Dial控件：

id: valueDisplayDial，宽高均为 200（未显式设置位置，默认左上角）。
数值范围：from: 0 到 to: 100（初始值未设置，默认 0）。

数值显示实现：

矩形背景（Rectangle）：

居中于 Dial 内（anchors.centerIn: parent）。
尺寸 60x30，圆角 radius: 5。
浅灰色背景（#f0f0f0）和灰色边框（#808080）。

数值文本（Text）：

显示 Dial 的当前值 valueDisplayDial.value.toFixed(0)（取整）。
样式：加粗（font.bold: true），字号 14px，居中显示。

适用场景

需要直观显示当前值的旋钮控件（如音量、亮度调节）。

运行效果

示例2：多组Dial控件联动

Row {
    spacing: 20
    anchors.centerIn: parent
    
    Dial {
        id: masterDial
        width: 150
        height: 150
        from: 0
        to: 100
        value: 50
        
        onValueChanged: {
            slaveDial1.value = value / 2
            slaveDial2.value = 100 - value
        }
    }
    
    Dial {
        id: slaveDial1
        width: 120
        height: 120
        from: 0
        to: 50
        enabled: false
    }
    
    Dial {
        id: slaveDial2
        width: 120
        height: 120
        from: 0
        to: 100
        enabled: false
    }
}

这段 QML 代码创建了一个主从联动的 Dial（旋钮）组合。

代码说明

主从联动逻辑：

主 Dial（masterDial）：

数值范围 0-100，初始值 50
值变化时（onValueChanged）：

slaveDial1.value = value / 2  // 从 Dial1 值为一半
slaveDial2.value = 100 - value  // 从 Dial2 值为反向

从 Dial（slaveDial1/slave2）：

禁用交互（enabled: false），仅作为数值显示

范围限制：

slaveDial1：0-50（主 Dial 值的一半范围）
slaveDial2：0-100（与主 Dial 反向）

运行效果

示例3：音频均衡器界面

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("音频均衡器界面")
    color: "#1a1a1a"

    Grid {
        columns: 5
        spacing: 20
        anchors.centerIn: parent

        // 使用对象数组存储数值
        property var bandNames: ["60Hz", "150Hz", "400Hz", "1kHz", "2.4kHz"]
        property var bandValues: ([-12, -12, -12, -12, -12].map(v => ({ value: v }))) // 补全闭合括号

        Repeater {
            model: 5

            Column {
                id: bandColumn
                spacing: 8
                width: 90

                Dial {
                    id: dial
                    width: 80
                    height: 80
                    from: -12
                    to: 12
                    value: 0
                    snapMode: Dial.SnapAlways
                    stepSize: 1.0

                    readonly property real innerRadius: bg.width/2
                                                      - bg.border.width
                                                      - handleItem.width/2

                    background: Rectangle {
                        id: bg  // 给背景命名
                        radius: width / 2
                        color: "#333333"
                        border.color: "#555555"
                        border.width: 2
                    }

                    handle: Rectangle {
                        id: handleItem
                        width: 16
                        height: 16
                        radius: width / 2
                        antialiasing: true
                        color: "lime"

                        transform: [
                            Translate {
                                x: bg.width/2 - handleItem.width/2
                                y: bg.height/2 - handleItem.height/2 - dial.innerRadius
                            },
                            Rotation {
                                angle: dial.angle
                                origin.x: bg.width/2
                                origin.y: bg.height/2
                            }
                        ]
                    }

                    // 强制触发数组更新
                    onValueChanged: {
                        let temp = [...bandColumn.parent.bandValues]
                        temp[index].value = Number(value.toFixed(1))
                        bandColumn.parent.bandValues = temp
                    }
                }

                Text {
                    text: bandColumn.parent.bandNames[index]
                    color: "white"
                    font.pixelSize: 14
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                // 直接绑定dial.value
                Text {
                    text: Number(dial.value.toFixed(1)) + " dB"
                    color: "lime"
                    font.pixelSize: 14
                    font.bold: true
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }
        }
    }
}

这段代码实现了一个带五个调节旋钮的音频均衡器界面，每个旋钮都能在圆圈范围内转动并实时显示数值.