一、概述

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

使用这个就很好绑定的

ColumnLayout{anchors.fill: parent;RowLayout{Label{text: "音量值："}Label{id: musicLoudtext: "0"}Layout.alignment: Qt.AlignHCenter}Slider{from: 1value: 20to: 100stepSize:1Layout.alignment: Qt.AlignHCenteronMoved: {musicLoud.text = value/1;}}
}

二、使用介绍

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

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

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

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

三、定制化样式

Slider 就需要定制background 和 handle 组件即可。

  Slider {id: controlvalue: 0.5background: Rectangle {x: control.leftPaddingy: control.topPadding + control.availableHeight / 2 - height / 2implicitWidth: 200implicitHeight: 4width: control.availableWidthheight: implicitHeightradius: 2color: "#bdbebf"Rectangle {width: control.visualPosition * parent.widthheight: parent.heightcolor: "#21be2b"radius: 2}}handle: Rectangle {x: control.leftPadding + control.visualPosition * (control.availableWidth - width)y: control.topPadding + control.availableHeight / 2 - height / 2implicitWidth: 26implicitHeight: 26radius: 13color: control.pressed ? "#f0f0f0" : "#f6f6f6"border.color: "#bdbebf"}}

Qt Quick - Slider相关推荐

qml自定义switch_QML官方系列教程——Qt Quick Controls Styles
附网址:http://qt-project.org/doc/qt-5/qtquickcontrolsstyles-index.html Qt Quick Controls Styles -- Qt Q ...
Qt Quick实现的涂鸦程序
之前一直以为 Qt Quick 里 Canvas 才可以自绘,后来发觉不是,原来还有好几种方式都可以绘图!可以使用原始的 OpenGL(Qt Quick 使用 OpenGL 渲染),可以构造QSGNo ...
Qt Quick里的图形效果——颜色（Color）
Qt Quick提供了通过改变一个 Item 的颜色来产生各种各样效果的元素.有下面几种: BrightnessContrast,调整亮度和对比度 ColorOverlay,在源 Item 上覆盖一层 ...
Hello Qt（五十一）———Qt Quick Controls
一.Qt Quick Controls基础 QT5.1发布了Qt Quick的一个全新模块:Qt Quick Controls.Qt Quick Controls模块提供了大量类似Qt Widgets ...
QT Quick Qml 实例——滑块拖动颜色框的平移(Gradient、drag、clip、transform、antialiasing)
<实例--滑块拖动颜色框的平移> 1. 简介 2. 详解所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多的时间吧! QML其它文章请点击这里: QT QUICK QM ...
Qt使用教程：使用Qt Quick UI表单（五）
2019独角兽企业重金招聘Python工程师标准>>> <Qt Enterprise最新版下载> 创建标签创建注释标签该Customer Notes标签包含了一个关于 ...
10.QML Qt Quick Controls 2之imagine style
Qt Quick Controls 2的目标之一是将控件的逻辑与外观分离.外观的实现由QML代码和图形资源组成.使用Imagine样式(imagine style),可以自定义应用程序的外观和图形资源 ...
7.QML Qt Quick——基于Qt Quick Controls 2实现图片浏览器
Qt Quick Controls 2提供了一组UI控件,例如按钮,标签,复选框,滑块等(用之查之即可).用于在Qt Quick中创建用户界面.UI控件很多,这里通过一个图片浏览器的实现来逐步讲解图 ...
qt on android qml,Qt on Android: Qt Quick 之 Hello World 图文详解
在上一篇文章,<Qt on Android:QML 语言基础>中,我们介绍了 QML 语言的语法,在最后我们遗留了一些问题没有展开,这篇呢,我们就正式开始撰写 Qt Quick 程序,而那 ...

Qt Quick - Slider

Qt Quick - Slider理论使用总结

一、概述

二、使用介绍

三、定制化样式

Qt Quick - Slider相关推荐

最新文章

热门文章