QML控件 - Slider

最新推荐文章于 2025-10-14 16:25:50 发布

原创

最新推荐文章于 2025-10-14 16:25:50 发布 · 448 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #qt

一、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
}