QML 自定义CheckBox

实现QML如下

 //[1]
    Rectangle{
        id: checkbox1;
        property bool buttonEnabled: true
        property var selectedcolor: "#999999"

        //修改样式
        function setStyle(style)
        {
            if (style == "1") //
            {
                checkbox1.radius = 20;
            }
            else
            {
                checkbox1.radius = 5;
            }
        }


        x : 20; y : 200
        width: 30; height: 30;
        border.color: "#999999"; border.width: 1;
        radius: 5;
        antialiasing: true
        color: "transparent"
        Rectangle {
                     anchors.fill: parent
                     anchors.margins: 5
                     antialiasing: true
                     radius: checkbox1.radius
                     color: mouse.pressed || checkbox1.buttonEnabled ? checkbox1.selectedcolor : "transparent"
                 }

        MouseArea {
                  id: mouse
                  anchors.fill: parent
                  onClicked: {
                      if (checkbox1.buttonEnabled)
                          checkbox1.buttonEnabled = false;
                      else
                          checkbox1.buttonEnabled = true;
                  }
              }
    }
    //[!1]