Qt筆記-qml-radionButton

• qml自定義RadioButton (暫時只做了雙態)

 import QtQuick 2.0

import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Item {
    id: item

    property string text: ""
    property bool   checked: true

    // 單選框框風格組件
    Component{
        id: radioStyle;
        RadioButtonStyle{
            indicator: Rectangle{
                implicitHeight: radioButtonImage.height;
                implicitWidth: radioButtonImage.width;
                color: "#00000000"

                Rectangle{
                    id: myCheck
                    anchors.fill: parent;
                    state:
                    {

                        if ( control.checked )
                            state: "radioCheck";
                        else
                            state:"radioNoCheck";
                    }
                    color: "#00000000"

                    property string imageSource: ""
                    property string imageChecked: "qrc:/image/RadioButtonChecked.png"
                    property string imageNoChecked: "qrc:/image/RadioButtonNoChecked.png"


                    Image {
                        id: radioButtonImage
                        source: myCheck.imageSource
                    }

                    states: [
                        State {
                            name: "radioCheck"
                            PropertyChanges {
                                target: myCheck
                                imageSource:imageChecked;
                            }
                        }
                        ,State {
                            name: "radioNoCheck"
                            PropertyChanges {
                                target: myCheck
                                imageSource:imageNoChecked;
                            }
                        }
                    ]

                }
            }

            label:Text{
                //color: control.activeFocus?"blue":"black";
                color: "#444444"
                font.pointSize: 14
                text:control.text;
            }
        }

    }

    //具體單選框
    RadioButton{
        text:     item.text;
        checked:  item.checked;
        focus: true;
        activeFocusOnPress:  true;
        style:radioStyle;
    }
}

使用：

CRadionButton{
    anchors.top: rect.bottom;
    anchors.topMargin: 4;
    anchors.left: rect.left;
    anchors.leftMargin: 10;

    text: "是否可用"
    checked: false
}