RadioButton 自绘控件

一种：

import QtQuick 2.5

import QtQuick.Controls 1.2

import QtQuick.Controls.Styles 1.2

RadioButton

{

    id: groupRadio;

    style: RadioButtonStyle{

        indicator: Image{

            source: control.checked ? "qrc:/radioTrue.png" : "qrc:/radioFalse.png";

            sourceSize: Qt.size(15 * pixelRate , 15 * pixelRate);

        }

    }

}

另一种：

RadioComponent.qml页面

import QtQuick 2.5

import QtQuick.Controls 1.4

import QtQuick.Layouts 1.3

import QtQuick.Controls.Styles 1.4

RadioComponent

Rectangle

{

    id: taskRec;

    clip: true;

    property int idx: 0;

    property string grouptitle: "";

    property string firstRadio: "";

    property string secondRadio: "";

    property bool radioVisible: true;//gropBox.visible;

    property bool isMageShow: true;

    property bool online: false; //控制条件

    property string selectData: "";//选择的内容

    signal selectClicked();

    signal histroyClicked();

    property string radioxsInfos: "";

    property var radioArray: [];

    property bool radioEdit: true;

    property int sModel: 0;

    height: rec.height + 10 * pixelRate;

        onRadioxsInfosChanged:

        {

            radioArray = radioxsInfos.split(";");

            if(radioArray.length == 1)

            {

                radioArray = radioxsInfos.split(",");

            }

            if(radioArray.length == 1)

            {

                radioArray = radioxsInfos.split("、");

            }

            if(radioArray.length == 1)

            {

                radioArray = radioxsInfos.split("|");

            }

            sModel = radioArray.length;

        }

    Rectangle

    {

        id: rec;

        width: parent.width;

        anchors.top: parent.top;

//        anchors.verticalCenter: parent.verticalCenter;

        //opacity: taskMouse.pressed ? 0.5 : 1.0;

        height: rows.height + titless.height;//(grouptitle.trim().length === 0 ?  0 : titless.height)

        Rectangle

        {

            id:titless;

            width: parent.width;

            height: txt.height+15*pixelRate;

            color: "#EBEBEB";

            NSText

            {

                id: txt;

                text: grouptitle;

                visible:  grouptitle.trim().length > 0;

                anchors.verticalCenter: parent.verticalCenter;

                anchors.left: parent.left;

                anchors.leftMargin: 20*pixelRate;

            }

            NSText

            {

                id: historyTxxt;

                text: "历史记录";

                opacity: hMos.pressed ? 0.5 : 1.0;

                anchors.right: parent.right;

                anchors.rightMargin: 10*pixelRate;

                anchors.verticalCenter: parent.verticalCenter;

                MouseArea

                {

                    id: hMos;

                    anchors.fill: parent;

                    onClicked:

                    {

                        taskRec.histroyClicked();

                    }

                }

            }

        }

        Row {

            id: rows;

            anchors.top: titless.bottom;

            anchors.topMargin: 5*pixelRate;

            anchors.left: parent.left;

            anchors.leftMargin: 20*pixelRate;

            spacing: 40*pixelRate;

             Repeater {

                 model: sModel;

                 delegate: dlg;

                 }

             }

//        Rectangle

//        {

//            height: 1;

//            width: parent.width;

//            color: "#F4F4F4";

//            anchors.top: rows.bottom;

//        }

//        Rectangle

//        {

//            id: imgRec;

//            anchors.right: parent.right;

//            anchors.rightMargin: 15*pixelRate;

//            width: imgs.width+20*pixelRate;

//            height: width;

//            anchors.top: parent.top;

//            anchors.topMargin: 5*pixelRate;

//            //color: "red";

//            Image {

//                id: imgs;

//                anchors.right: parent.right;

//                source: "qrc:/img/resource/img/arrow/greenRight_3.png";

//                sourceSize: Qt.size(15*pixelRate,15*pixelRate);

//                visible: taskRec.isMageShow;

//            }

//        }

    }

    Component

    {

        id: dlg;

        Rectangle

        {

            id:dlgRec;

            property int idx: index;

            width: img.width+ xTxt.width+5*pixelRate+1;

            height: Math.max(img.height,xTxt.height);

            enabled: radioEdit;

            //border.width: 1;

            //border.color: "#F4F4F4";

            property bool isSelect: false;

            MouseArea

            {

                anchors.fill: parent;

                onClicked:

                {

                    taskRec.selectData = taskRec.radioArray[dlgRec.idx];

                    taskRec.selectClicked();

                }

            }

            Image {

                id: img;

                source: selectData === taskRec.radioArray[dlgRec.idx] ? "qrc:/img/resource/img/check/radioCheck.png": "qrc:/img/resource/img/check/radioUncheck.png";

                sourceSize: Qt.size(20*pixelRate, 20*pixelRate);

                anchors.verticalCenter: parent.verticalCenter;

            }

            Text

            {

                id: xTxt;

                anchors.left: img.right;

                anchors.leftMargin: 5*pixelRate;

                text: taskRec.radioArray[index] === undefined ? "" : taskRec.radioArray[index];

                anchors.verticalCenter: parent.verticalCenter;

            }

        }

    }

}

用法 ：

   RadioComponent

        {

            id: radioBtn;

            width: parent.width;

            grouptitle:"";

            radioxsInfos:radioxxInfo;

        }