Qt-QML-Slider-滑块-Style

感觉滑块这个东西，可以算是一个基本模块了，在我的项目中也有这个模块，今天我将学一下一下滑块的使用以及美化工作。

想学习滑块，那就要先建立一个滑块，新建工程什么的这里就省略了，不会的可以看我前面的几篇文章中的内容。

我想要的美化效果

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的内容今天先写到这里，明天在研究