QtQuick control2.0 样式定制

ApplicationWindow {
    id:root
    visible: true;
    height: 480;
    width: 320;

    property color  accentcol:"red"
    property color  backgroundcol:"white"
    property color  foregroundcol:"white"
    property color  primarycol:"red"
    Material.accent:accentcol
    Material.background:backgroundcol
    Material.foreground:foregroundcol
      Material.primary: primarycol

    ColorDialog{

        title: "sel"
        property string colortype: "accent"
        id:col;
       showAlphaChannel:true;
        onAccepted: {
             console.log(color);
              if(colortype=="accent")
              {
                    accentcol=color;
              }else if(colortype=="background")
              {
                    backgroundcol=color;
              }else if(colortype=="foreground")
              {
                    foregroundcol=color;
              }else if(colortype=="primary")
              {
                  primarycol=color;

              }

        }

    }

    SwipeView{

        id:sv;
        anchors.fill: parent;
        currentIndex: footertabBar.currentIndex
        Page{
// wheelEnabled: true
            Flickable{
                width: parent.width
                height: parent.height
                contentHeight:cols.height+20;



            Column{

                id:cols;
                spacing: 1;
                Label{
                    text:"第一页"
                }
                CheckBox{
                    id:check;
                    text:"全局";
                     onClicked: {

                     }

                }

                Button{
                    text:"accent";
                    highlighted: true
                    onClicked: {
                        col.colortype=text;
                        col.open();
                    }
                }
                Rectangle{
                    border.width: 2;
                    border.color: "#ffffff"
                    width: 20;
                    height: 20;
                    color: accentcol
                }

                Button{
                    text:"background";
                    onClicked: {
                        col.colortype=text;
                        col.open();
                    }
                }
                Rectangle{
                    border.width: 2;
                    border.color: "#ffffff"
                    width: 20;
                    height: 20;
                    color: backgroundcol
                }
                Button{
                    text:"foreground";
                    onClicked: {
                        col.colortype=text;
                        col.open();
                    }
                }
                Rectangle{
                    border.width: 2;
                    border.color: "#ffffff"
                    width: 20;
                    height: 20;
                    color: foregroundcol
                }
                Button{
                    text:"primary";
                    onClicked: {
                        col.colortype=text;
                        col.open();
                    }
                }
                Rectangle{
                    border.width: 2;
                    border.color: "#ffffff"
                    width: 20;
                    height: 20;
                    color: primarycol
                }
                Slider{
                    width: parent.width
                    from:0;
                    to:100


                }
                CheckBox{

                    text:"CheckBox"
                }
                Text{
                    text:"Text"
                }
                TextArea{
                     text:"Text"
                }
                ProgressBar{
                    from:0;
                    to:100
                }

            }
        }

        }

        Page{
            id:page2
            Label {

                text:"第二页"
            }
            Slider{
                from:0;
                to:100
                anchors.centerIn: parent
            }
        }
    }

    footer: TabBar {
        id: footertabBar
        currentIndex: sv.currentIndex
        TabButton {

            text: qsTr("footer Tab1");
        }
        TabButton {
            text: qsTr("footer Tab2")
        }
        TabButton {
            text: qsTr("footer Tab3")
        }
    }
}