首先了,先把我上篇文章的demo准备好,不过我上次写的被我删除了,这次就重新写了一个,上代码

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
ApplicationWindow {
visible: true
width: 1366
height: 768
title: qsTr("DLSlider")
Slider
{
width: 600
height: 20
x: (parent.width - width)/2
y: (parent.height - height)/2
value: 0.1
stepSize: 0.01
onValueChanged:
{
console.log(value)
} style: SliderStyle
{
handle: Rectangle {
anchors.centerIn: parent;
color:control.pressed ? "white":"lightgray";
border.color: "gray";
border.width: 2;
width: 34;
height: 34;
radius: 12;
Text{ anchors.centerIn: parent;
text: control.value;
color: "red";
} }
groove:Rectangle
{
implicitHeight:8
color:"gray"
radius:8
}
} } }

详细解释大家可以看上一篇博客

这是目前的样式,和上一篇中基本一样,但是不是我要的样式

这里将说下升级版

这样的效果是我想要的效果,上面是进度条,下面是可以拖动的指针,不过呢,能力有限,没有通过编写style实现成功,我用了一个投机取巧的办法来实现。

下面先上我最后的效果截图

上源代码

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
ApplicationWindow {
visible: true
width: 1366
height: 768
title: qsTr("DLSlider") Rectangle
{
id:line_parent
width: 800
height: 20
x: (parent.width - width)/2
y: (parent.height - height)/2
color: "#1ae5ec"
Rectangle
{
id:line_child
height: line_parent.height
anchors.top:parent.top
anchors.left: parent.left
width: parent.width*m_Slider.value
color: "red" }
} Slider
{
id:m_Slider
anchors.top: line_parent.top
anchors.left: line_parent.left
anchors.leftMargin: -5.5
height: line_parent.height*2
width: line_parent.width+11
value: 0.1
stepSize: 0.01
onValueChanged:
{
console.log(value)
} style: SliderStyle
{
handle: Rectangle
{
anchors.horizontalCenter:parent.horizontalCenter
anchors.bottom:parent.bottom
width:11
height:16
color:"transparent"
Image {
width: 11
height: 16
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: -8
source: "qrc:/Images/ppointer.png"
} }
groove:Rectangle
{
color:"transparent"
}
} } }

剩下的需要大家自行对比了,困了,要睡觉了

Qt-QML-Slider-滑块-Style-后继的更多相关文章

  1. Qt QML referenceexamples attached Demo hacking

    /********************************************************************************************* * Qt ...

  2. 表单(下)-EasyUI Spinner 微调器、EasyUI Numberspinner 数值微调器、EasyUI Timespinner 时间微调器、EasyUI Slider 滑块

    EasyUI Spinner 微调器 扩展自 $.fn.validatebox.defaults.通过 $.fn.spinner.defaults 重写默认的 defaults. 微调器(spinne ...

  3. Qt qml 单例模式

    Qt qml 单例模式,没什么好说的,看代码吧.单例模式很适合做全局的配置文件. [示例下载] http://download.csdn.net/detail/surfsky/8539313 [以下是 ...

  4. Qt qml listview 列表视图控件(下拉刷新、上拉分页、滚动轴)

    Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) [先看效果]    [功能] 下拉刷新 ...

  5. qt qml qchart 图表组件

    qt qml qchart 图表组件 * Author: Julien Wintz * Created: Thu Feb 13 23:41:59 2014 (+0100) 这玩意是从chart.js迁 ...

  6. qt qml中PropertyAnimation的几种使用方法

    qml文章 qt qml中PropertyAnimation的几种使用方法 动画应用场景有以下几种: 首先如果一个Rectangle.动画是要改变它的x和y值 1,Rectangle一旦被创建,就要移 ...

  7. easyUI slider滑块,在加载出来后,easyUI slider滑块禁用方法

    easyUI slider滑块禁用 如下图easyUI slider滑块,在加载出来后,需要禁止拉动 easyUI slider滑块禁用方法 //禁用$(s1).slider({ disabled:t ...

  8. 指定Qt程序运行的style,比如fusion(以前没见过QStyleFactory)

    转载请注明文章:指定Qt程序运行的style,比如fusion 出处:多客博图 代码很简单,如下: #include <QtWidgets/QApplication>   #include ...

  9. Qt qml的软件架构设计

    google: qt qml application architecture 有很多资源. 1 https://www.ics.com/blog/multilayered-architecture- ...

  10. Qt Quick 常用元素:TabView(选项卡) 与 Slider(滑块)

    一.TabView TabView 可以实现类似 Windows 任务管理器的界面,有人叫 TabView 为标签控件,有人又称之为选项卡控件,我们知道它就是这么个东西就行了.现在来介绍 TabVie ...

随机推荐

  1. Selenium基础知识(详解IDE命令、css及xpath定位一)

    1. ide常用命令,参考 http://sariyalee.iteye.com/blog/1743350  2. ide介绍,参考 http://blog.csdn.net/oscar999/art ...

  2. vue.js加入购物车小球动画

    生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小 ...

  3. HDU 1273 漫步森林(数学 找规律)

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1273 漫步森林 Time Limit: 2000/1000 MS (Java/Others)    M ...

  4. Oracle 备份恢复实例

    Oracle 备份恢复实例:三思笔记 1 shutdown abort 系统归档模式,有备份 create table xx as select * from emp; update xx set e ...

  5. Spring的jar包不同版本的下载地址

    http://repo.spring.io/release/org/springframework/spring/ 可以直接下载不同版本的spring jar包

  6. zabbix 3.x 监控日志文件

    1.启用zabbix主动模式 在zabbix agent端,修改/etc/zabbix/zabbix_agentd.conf ServerActive=服务端IP Hostname=tspnginx0 ...

  7. SpringBoot整合Mybatis,TypeAliases配置失败的问题

    SpringBoot整合Mybatis,TypeAliases配置失败的问题 问题描述 在应用MyBatis时,使用对象关系映射,将对象和Aliase映射起来. 在Mybatis的文档明确写出,如果你 ...

  8. 解决IDEA打印到控制台的中文内容乱码

    File-->Settings-->Editor-->File Encodings->将图中内容均设置为UTF-8--->点击+号选中自己的项目->Apply--& ...

  9. js滚动监听

    下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 ? 1 2 3 4 5 6 7 8 window.onscroll = function () {  var t = docum ...

  10. 【tp5.1】通过PHPExcel实现导入excel表格

    1.上github下载PHPExcel,链接:https://github.com/PHPOffice/PHPExcel 2.下载解压后,将Classes改名为PHPExcel如图 3.将文件夹复制到 ...