QML(三):view-model下颜色进度条调整皮肤色调

前言

在qml，我们使用model和view的绑定来快速达到一些简单的效果，本文主要是一个皮肤色条的调整
1.设置颜色调整进度
我们用model定义一个进度条的属性主要是rgb_typeid和进度条的值value_color以及标签类型
组件我们采用qtqucik.control中的slider，增加简单的自定义样式，进行拖动。
每次拖动任意滑动条的更改rgb值
Qtoner.qml

import QtQuick 2.0
import QtQuick.Controls 2.2
Rectangle {
    anchors.centerIn: parent
    ListModel{
        id:lstmodel
        property int value_color:0
        property int rgb_typeid
        property var rgb_typetext
    }
    Component{
        id:slider_signal

        Slider{
        id:rgb_type

        property int numid
        value:value_color/255
        numid:rgb_typeid
        Rectangle{
            id:label_type
            color: "#2DE09E"
            x:rgb_type.leftPadding-50
            y:rgb_type.topPadding + rgb_type.availableHeight / 2 - height / 2
            width: 50
            height: 20
            Text {
                anchors.centerIn: label_type
                id: name
                text:rgb_typetext
            }
        }
        //滑动区域设定
        background: Rectangle {
            x: rgb_type.leftPadding
            y: rgb_type.topPadding + rgb_type.availableHeight / 2 - height / 2
            implicitWidth: 200
            implicitHeight: 4
            width: rgb_type.availableWidth
            height: implicitHeight
            radius: 2
            color: "#FFD121"
            Rectangle {
                width: rgb_type.visualPosition * parent.width
                height: parent.height
                color: "#000CB0"
                radius: 2
            }
        }
        //滑块区域设定
        handle: Rectangle {
            x: rgb_type.leftPadding + rgb_type.visualPosition * (rgb_type.availableWidth - width)
            y: rgb_type.topPadding + rgb_type.availableHeight / 2 - height / 2
            implicitWidth: 20
            implicitHeight: 20
            radius: 15
            color: rgb_type.pressed ? "#988FF5" : "#F8E69B"
            border.color: "#bdbebf"
        }
        onMoved: {
            lstmodel.setProperty( rgb_typeid,"value_color",rgb_type.value*255)//改变rgb颜色状态
            //改变主窗体背景
            main_window.color= Qt.rgba(lstmodel.get(0).value_color/255,
                                lstmodel.get(1).value_color/255,
                                lstmodel.get(2).value_color/255,
                                1)
        }
        }

    }
    Column{
        Repeater{
            id:slide_value
            model:lstmodel
            delegate: slider_signal
        }
    }
    Component.onCompleted: {
        lstmodel.append({rgb_typeid:0,value_color:0,rgb_typetext:"red"});
        lstmodel.append({rgb_typeid:1,value_color:20,rgb_typetext:"green"});
        lstmodel.append({rgb_typeid:2,value_color:255,rgb_typetext:"blue"});
        main_window.color= Qt.rgba(lstmodel.get(0).value_color/255,
                            lstmodel.get(1).value_color/255,
                            lstmodel.get(2).value_color/255,
                            1)
    }
}

效果
至此一个简单view和model的交互完成，相比widget之下，可以减少很多一部分更改视图的代码而且改变样式更加方便，更多功能，可自行摸索。