想学习滑块，那就要先建立一个滑块，新建工程什么的这里就省略了，不会的可以看我前面的几篇文章中的内容。
我想要的美化效果
http://blog.csdn.net/z609932088/article/details/71247336
先上建立滑块的代码
Slider
{
x: (parent.width - width)/2
y: (parent.height - height)/2
width: 600
height: 20
stepSize: 0.01
onValueChanged:
{
console.log(value)
}
}
这几行代码就是简单的显示一个滑块，前两行就是这个滑块的XY坐标了。在程序界面中心显示
下面是规定了这个滑块的宽和高。
下面的一行我理解为精度
这是有道词典的解释
剩下下面的这个就是当这个滑块的值改变的时候，所做的事情，目前是把他打印出来。
下面是美化部分
Slider
{
x: (parent.width - width)/2
y: (parent.height - height)/2
width: 600
height: 20
stepSize: 0.01
onValueChanged:
{
console.log(value)
}
style: SliderStyle
{
groove: m_Slider
}
}
Component
{
id: m_Slider
Rectangle
{
implicitHeight:8
color:"gray"
radius:8
}
}
在上面代码的基础上面，我们增加了
style: SliderStyle
{
groove: m_Slider
}
这里的style的写法和前面的可能不一样，前面的style写法是将我们的方法直接写进这个style 的大括号内，这样虽然直接，但是这样的写法感觉更像是用了C的面向过程的思想，所以，这里我们用了新的方法，组件，组件这在QML中感觉就是一个非常好的发明。到我们吧这个内容写成一个组件以后，在其他地方就可以直接使用了，而不用每次都来复制相同的代码了。
组件中的内容也是很好理解的，就是吧我们滑块槽的高度设置为8，把颜色设置为灰色。圆角设置为8，这里有个小小的疑问就是，我不知道是那句话吧滑块的样式也改成了原型了，这里如果有牛逼的大神，还望赐教
上对比截图
这就是下面这个美化组件的作用
下面的滑块的美化，
Slider
{
x: (parent.width - width)/2
y: (parent.height - height)/2
width: 600
height: 20
stepSize: 0.01
onValueChanged:
{
console.log(value)
}
style: SliderStyle
{
groove: m_Slider
handle: m_Handle
}
}
Component
{
id: m_Slider
Rectangle
{
implicitHeight:8
color:"gray"
radius:8
}
}
Component
{
id: m_Handle
Rectangle{
anchors.centerIn: parent;
color:control.pressed ? "white":"lightgray";
border.color: "gray";
border.width: 2;
width: 34;
height: 34;
radius: 12;
}
}
在前面的基础上面增加的滑块的美化，同样是采用模块的形式来写。
Rectangle{
anchors.centerIn: parent;
color:control.pressed ? "white":"lightgray";
border.color: "gray";
border.width: 2;
width: 34;
height: 34;
radius: 12;
}
这部分代码就是吧滑块的剧中显示，完了设置了按下的颜色，这里我使用没有效果。不知道哪里有问题哈
下面就是指定 了边框的颜色和宽度
剩下就是宽度和高度以及圆角弧度
运行截图自行对比
突然发现一个这样写的问题，这里代码中control是SliderStyle才有的东西，在组件中就不会承认了，这就导致了某些样式是显示不出来的，真么解决这个问题，我还得研究研究，关于slider的内容今天先写到这里，明天在研究
