1. 简介

今天弄了一个实例，如gif所示，当我们拖动滑块的时候，黄绿颜色也会随着拖动而变化。在此中用到了 Gradient颜色渐变、drag实现了滑块、transform的平移、ITem属性的clip，最难处理的是，当长宽变化后，如何去保持滑块和颜色比列不变（小菜鸟的自以为）

（说个题外话，CSDN不方便传视频，但可以转gif再传，这个MP4转GIF的在线网站超好用）

2. 详解

共有两个QML文件，一个是主文件SliderMain.qml，它实例化了另外一个颜色变化的ColorRect.qml，且实现了滑块的逻辑。SliderMain.qml如下：

import QtQuick 2.2
import QtQuick.Window 2.1Window {property int _pix: 16property int _margin: 10property real _defaultSilderValueproperty int oldHeight: container.height;width: 300; height: 300visible: true;Rectangle {anchors.fill: parent;color: "lightGray"//1、 实例化了ColorRect.qml文件，且传入了要平移的value。ColorRect {id: colorRectanchors.centerIn: parent//[重点1]: 因为需要小滑块处于正中间，且正中间的值为0value :   slider.y - _defaultSilderValue;}//2、 滑块条的实现Rectangle {id: containeranchors {top: parent.top;topMargin: _margin * 2;bottom: parent.bottom;bottomMargin: _margin *2;right: parent.right;rightMargin: _margin}width: _pixradius: width/2;opacity: 0.6            //不透明度antialiasing: true      // 抗锯齿，具体效果见下面图片//黑色——>棕色的渐变gradient: Gradient {GradientStop { position: 0.0; color: "black" }GradientStop { position: 1.0; color: "brown" }}//[重点2]:当面板放大放小的时候，需要保持滑块的比例不变onHeightChanged: {if(height <= slider.height){     //当缩小的太小的时候，可以把小滑块也跟着变小slider.height = height;      //小滑块高度  =  滑道高度}else  {slider.height = _pix*2;      //小滑块高度  =  固定高度var _scale =  (height -  _pix*2) / (oldHeight -  _pix*2) //比列尺 * 之前的实际距离slider.y =  slider.y * _scale;oldHeight = height;//[重点3]默认中间值，也会随着长宽拖动而变化的。_defaultSilderValue = height/2-_pix;}}//小滑块条Rectangle {id: sliderx: 1; y: container.height/2-_pix;    //y轴向向下为负, 默认滑块放中间width: _pix-2;  height: _pix*2  ;radius: width/2;antialiasing: truegradient: Gradient {GradientStop { position: 0.0; color: "green" }GradientStop { position: 1.0; color: "aqua" }}MouseArea {anchors.fill: parentanchors.margins: -_pixdrag.target: parent;drag.axis: Drag.YAxisdrag.minimumY: 1;drag.maximumY: container.height - slider.height-1;}}}}
}

具体的解释，看注释就好了，重要的部分用 “[重点x]” 标记了，注释直接加在代码上才更香嘛。下面是ColorRect.qml 颜色文件的实现：

import QtQuick 2.3Item {property real value;id: root//[重点1]：clip, 当元素的子项超出父项范围后会自动裁剪，也就是子项超出了范围就剪切掉，不让他显示和起作用//在此中，限定在距离parent的54的范围内，默认为falseclip:           trueanchors.fill:   parentanchors.margins: 54;Item {width:  root.widthheight: root.height * 3; //高一点，不然上下颜色会被移没去...anchors.centerIn: parentRectangle {id: _topanchors.fill: parentsmooth: trueantialiasing: truegradient: Gradient {GradientStop { position: 0; color: "green" }GradientStop { position: 0.5;  color: "aqua" }}}Rectangle {id: _bottomheight: _top.height / 2anchors {left:   _top.left;right:  _top.right;bottom: _top.bottom}smooth: trueantialiasing: truegradient: Gradient {GradientStop { position: 0.0;  color: "yellow"  }GradientStop { position: 1; color: "orange" }}}//蓝绿面板的上下平移transform: Translate{y:  value         //Y轴方向的偏移量}}
}

恩，就只有这两个文件，参考了下官网的实例，QT Creat 欢迎中搜“dial control”，它是拖动滑块实现了仪表盘的旋转。

它的演示如下

核心代码代码在此，transform的对象是Rotation ，并对角度设计了个弹簧动画，之前已经学过了弹簧动画了QT Quick QML 动画——SpringAnimation弹簧动画和Behavior

Image {id: needlex: 98; y: 33antialiasing: truesource: "needle.png"transform: Rotation {id: needleRotationorigin.x: 5; origin.y: 65//! [needle angle]angle: Math.min(Math.max(-130, root.value*2.6 - 130), 133)Behavior on angle {SpringAnimation {spring: 1.4damping: .15}}//! [needle angle]}}

● 抗锯齿(antialiasing)
再补充下抗锯齿的表现，开了抗锯齿，效果明显，可能性能下降吧，但是小程序在乎这点性能吗，建议开启。左图是开启了抗锯齿。

QML其它文章请点击这里: QT QUICK QML 学习笔记

QT Quick Qml 实例——滑块拖动颜色框的平移(Gradient、drag、clip、transform、antialiasing)相关推荐

QT Quick QML 实例之 Popup 弹出界面
QT Quick QML 实例之 Popup 弹出界面一.演示二.实现过程 1. 居中弹出 2. 正下方弹出所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多的时间吧! GIT工程文件 ...
Qt Quick QML 实例之疯狂数字游戏（QML C++混合编程、翻译、QSetting ）【建议收藏】
文章目录一.开门见山二.最基本的框架(v0.1) 1. 后端数据处理 2. 导出 C++ 对象的 QML 的属性 3. 前台 UI 数据三.完善执行逻辑(v0.2) 四.发布版本(v1.0) 1 ...
Qt Quick里的图形效果——颜色（Color）
Qt Quick提供了通过改变一个 Item 的颜色来产生各种各样效果的元素.有下面几种: BrightnessContrast,调整亮度和对比度 ColorOverlay,在源 Item 上覆盖一层 ...
Qt Quick Qml 之QML与C++ 混合编程学习
<QML与C++ 混合编程学习> 1. 在 QML 中使用 C++ 类和对象 1) C++ 类的修改 2) 注册 QML 类型 3) 在 QML 中导入类型 4) 在 QML 创建由 C+ ...
Qt Quick QML实现自定义虚拟软键盘详解
Qt Quick QML实现自定义虚拟软键盘详解在Qt5.8版本推出的QML软键盘功能中,有两种实现方案.一种是基于中文汉字数据库,另一种是基于Google拼音输入引擎.然而,相比于官方软键盘,这两 ...
Qt Quick QML
Qt Quick简介 Qt Quick是一个用于帮助开发者设计直观,现代,流畅的用户界面的技术集,近年来被广泛应用于手机,媒体播放器,机顶盒和其他手提设备.Qt Quick中包含了大量的用户界面元素, ...
Qt Quick 图像处理实例之美图秀秀（附源码下载）
在<Qt Quick 之 QML 与 C++ 混合编程详解>一文中我们讲解了 QML 与 C++ 混合编程的方方面面的内容,这次我们通过一个图像处理应用,再来看一下 QML 与 C++ 混 ...
Qt Quick 图像处理实例之美图秀秀附源码下载
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在< ...
Qt Quick QMl学习笔记之图片浏览器
Qt Quick模块是编写QML应用程序的标准库.虽然Qt QML模块提供QML引擎和语言基础结构,但Qt Quick模块提供了使用QML创建用户界面所需的所有基本类型.它提供了一个可视画布,包括用于 ...

QT Quick Qml 实例——滑块拖动颜色框的平移(Gradient、drag、clip、transform、antialiasing)

《实例——滑块拖动颜色框的平移》

1. 简介

2. 详解

QT Quick Qml 实例——滑块拖动颜色框的平移(Gradient、drag、clip、transform、antialiasing)相关推荐

最新文章

热门文章