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

QML控件 - Slider

news 来源：原创 2025/5/17 0:31:01

一、Slider 基础用法

1. 导入模块

import QtQuick.Controls 2.15  // 根据你的 Qt 版本调整

2. 基本滑块

Slider {
    id: mySlider
    from: 0      // 最小值
    to: 100      // 最大值
    value: 50    // 当前值
    stepSize: 1  // 步长
}

二、属性绑定

1. 单向绑定：将滑块值与其他属性同步

Text {
    text: mySlider.value.toFixed(1)  // 实时显示滑块值，保留1位小数
}

Rectangle {
    width: mySlider.value * 2  // 矩形宽度随滑块值变化
    height: 50
    color: "blue"
}

2. 双向绑定

Slider {
    id: sliderA
    value: sliderB.value  // 初始绑定
    onValueChanged: sliderB.value = value  // 避免循环更新
}

Slider {
    id: sliderB
    // 反向绑定同理
}

三、使用 `Binding` 组件

当需要更复杂的绑定逻辑时：

Binding {
    target: rect          // 目标对象
    property: "radius"    // 要绑定的属性
    value: mySlider.value // 绑定到滑块的当前值
}

Rectangle {
    id: rect
    width: 100; height: 100
}

四、避免绑定中断

错误做法（会破坏绑定）：

Component.onCompleted: {
    mySlider.value = 30 // 使用 = 赋值会破坏原有绑定
}

正确做法：

Component.onCompleted: {
    mySlider.value = Qt.binding(() => someOtherValue * 2)
}

五、进阶用法

1. 实时更新模式

Slider {
    live: false // 默认为 true（实时更新），设为 false 时只在释放滑块时更新值
}

2. 自定义样式

Slider {
    handle: Rectangle {
        width: 20
        height: 20
        radius: 10
        color: pressed ? "lightgray" : "white"
    }

    background: Rectangle {
        implicitHeight: 4
        color: "#bdbebf"
        Rectangle {
            width: mySlider.visualPosition * parent.width
            height: parent.height
            color: "green"
        }
    }
}

六、完整示例

import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    width: 400
    height: 200

    Slider {
        id: slider
        anchors.centerIn: parent
        width: 200
        from: 0
        to: 1
        value: 0.5

        // 自定义渐变色轨道
        background: Rectangle {
            gradient: Gradient {
                GradientStop { position: 0; color: "red" }
                GradientStop { position: 1; color: "blue" }
            }
        }
    }

    Rectangle {
        anchors.top: slider.bottom
        anchors.horizontalCenter: slider.horizontalCenter
        width: 100
        height: 100
        color: Qt.rgba(slider.value, 0.5, 1 - slider.value, 1)
    }
}