在qml中，複選框跟單選框的用法差不多，只是多了幾個屬性。CheckBoxStyle用法也跟RadioBoxStyle一樣，下面還是來看看學習的程式碼把：

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.3


Rectangle{

    width: 320;
    height: 300;
    color: "#d0d0d0";


    Rectangle{

        id:resultHolder;
        color: "#a0a0a0";
        width: 220
 
;
        height: 80;
        anchors.centerIn: parent;
        visible: false;
        z: 2;
        opacity: 0.8;
        border.width: 2;
        border.color: "#808080";
        radius: 8;

        Text{
            id:result;
            anchors.fill: parent;
            anchors.margins: 5;
            font.pointSize
 
: 16;
            color: "blue";
            font.bold: true;
            wrapMode: Text.Wrap;

        }

    }


    Component{


        id: checkStyle;
        CheckBoxStyle{
            indicator: Rectangle{
                implicitWidth: 14;
                implicitHeight: 14;
                border.color
 
: control.hovered? "darkblue":"gray";
                border.width: 1;
                Canvas{
                    anchors.fill: parent;
                    anchors.margins: 3;
                    visible: control.checked;
                    onPaint: {

                        var ctx = getContext("2d");
                        ctx.save();
                        ctx.strokeStyle = "#c00020";
                        ctx.lineWidth = 2;
                        ctx.beginPath();
                        ctx.moveTo(0,0);
                        ctx.lineTo(width , height);
                        ctx.moveTo(0 , height);
                        ctx.lineTo(width , 0);
                        ctx.stroke();
                        ctx.restore();
                    }
                }
            }


            label: Text{
                color: control.checked ?"blue":"black";
                text: control.text;

            }

        }

    }




    Text{

        id: notation;
        text:"Please select the best love movies:";
        anchors.top: parent.top;
        anchors.topMargin: 20;
        anchors.left: parent.left;
        anchors.leftMargin: 8;

    }


    Column{

        id: movies;
        anchors.top: notation.bottom;
        anchors.topMargin: 8;
        anchors.left: notation.left;
        //anchors.leftMargin: 8;
        anchors.leftMargin: 20;
        spacing: 8;



        CheckBox{
            text:"夢迴縈繞";
            style: checkStyle;
            onClicked: resultHolder.visible = false;
        }

        CheckBox{
            text:"夢迴縈繞1";
            style: checkStyle;
            onClicked: resultHolder.visible = false;
        }
        CheckBox{
            text:"夢迴縈繞2";
            style: checkStyle;
            onClicked: resultHolder.visible = false;
        }
        CheckBox{
            text:"夢迴縈繞3";
            style: checkStyle;
            onClicked: resultHolder.visible = false;
        }



    }


    Button{

        id: confirm;
        text:"Confirm";
        anchors.top: movies.bottom;
        anchors.topMargin: 8;
        anchors.left: notation.left;
        onClicked: {

                var str = new Array;
                var index = 0;
                var count = movies.children.length;
                for( var i = 0 ; i < count ; i++){
                     if(movies.children[i].checked){
                         str[index] = movies.children[i].text;
                         index++;
                     }
                }

                if(index > 0){
                    result.text = str.join();
                    resultHolder.visible = true;
                }

        }
    }


}