Qt Quick - Slider

最新推荐文章于 2025-03-25 14:50:37 发布

太阳风暴

最新推荐文章于 2025-03-25 14:50:37 发布

阅读量541

点赞数 2

分类专栏： # ▶ QML笔记文章标签： Slider 滑动条 qquick qml qt5

本文链接：https://blog.csdn.net/qq_43680827/article/details/130021196

版权

▶ QML笔记专栏收录该内容

80 篇文章

订阅专栏

Qt Quick - Slider理论使用总结

一、概述
二、使用介绍
三、定制化样式

一、概述

Slider 其实就是一个滚动条控件，用来选择一个值，表现的形式就是在一个轨道上通过一个滑块来改变的。一般就是在音量设置之类的使用。

在这里插入图片描述

使用这个就很好绑定的
在这里插入图片描述

ColumnLayout{
        anchors.fill: parent;

        RowLayout{
            Label{
                text: "音量值："
            }
            Label{
                id: musicLoud
                text: "0"
            }
            Layout.alignment: Qt.AlignHCenter
        }

        Slider{
            from: 1
            value: 20
            to: 100
            stepSize:1

            Layout.alignment: Qt.AlignHCenter
            onMoved: {
                musicLoud.text = value/1;
            }
        }
}

二、使用介绍

一般就是通过设置自定义的from、value和 to 值:
简单的例子如下：

  Slider {
      from: 1
      value: 25
      to: 100
  }

Slider 有一个属性是 position属性表示为控件大小的一个小数，也就是控件的逻辑值，会被映射到0-1区间内。取值范围为0.0 ~ 1.0。visualPosition属性和上面一样，如果在从右到左的使用中是要颠倒过来的。

当设置滑块样式时，visualPosition用于定位手柄。在上面的例子中，在从左到右的应用中，visualPosition的值为0.24，而在从右到左的应用中，visualPosition的值为0.76。

三、定制化样式

在这里插入图片描述
Slider 就需要定制background 和 handle 组件即可。

  Slider {
      id: control
      value: 0.5

      background: Rectangle {
          x: control.leftPadding
          y: control.topPadding + control.availableHeight / 2 - height / 2
          implicitWidth: 200
          implicitHeight: 4
          width: control.availableWidth
          height: implicitHeight
          radius: 2
          color: "#bdbebf"

          Rectangle {
              width: control.visualPosition * parent.width
              height: parent.height
              color: "#21be2b"
              radius: 2
          }
      }

      handle: Rectangle {
          x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
          y: control.topPadding + control.availableHeight / 2 - height / 2
          implicitWidth: 26
          implicitHeight: 26
          radius: 13
          color: control.pressed ? "#f0f0f0" : "#f6f6f6"
          border.color: "#bdbebf"
      }
  }