qml实现鸿蒙系统设置菜单的RadioButton效果

最近玩手机看到了鸿蒙的RadioButton，感觉效果还不错，便想着手动去用代码去实现一下。

首先看手机上的效果图如下：

 话不多说上代码：

/*  file: MyRadioButton.qml  */

import QtQuick 2.6

/* 绘制一个圆环状的选择按钮 */
Item {
    id: root

    property int diameter: 20               // RadioButton直径

    property bool isSeleted: false          // 是否被选中

    property bool isAnimationEnable: true   //是否使能动效

    onIsSeletedChanged: {
        if(isAnimationEnable === true)
        {
            if(isSeleted === false)
            {
                unselectAnimation.start()
            }
            else
            {
                selectAnimation.start()
            }
        }
        else
        {
            updateState()
        }
    }

    function updateState(){
        outerRing.color = isSeleted === true ? "#8A73D3" : "white"
        innerRing.width = isSeleted === true ? outerRing.width * 0.7 : (outerRing.width - 2)
    }

    Component.onCompleted: {
        updateState()
    }

    SequentialAnimation {
        id: unselectAnimation

        ScriptAction {
            script: {
                outerRing.opacity = 0.5
                outerRing.color = "#8A73D3"
            }
        }

        NumberAnimation {
            target: innerRing;
            properties: "width"
            to: 0
            duration: 50
            easing.type: Easing.OutInQuad
        }

        NumberAnimation {
            target: innerRing
            properties: "width"
            to: outerRing.width - 2
            duration: 50
            easing.type: Easing.OutInQuad
        }

        ScriptAction {
            script: {
                outerRing.opacity = 1
                outerRing.color = "white"
            }
        }
    }

    SequentialAnimation {
        id: selectAnimation

        ScriptAction {
            script: {
                outerRing.color = "#8A73D3"
                innerRing.width = outerRing.width - 2
            }
        }

        NumberAnimation {
            target: innerRing;
            properties: "width"
            to: 0
            duration: 110
            easing.type: Easing.OutInQuad
        }

        NumberAnimation {
            target: innerRing
            properties: "width"
            to: outerRing.width * 0.6
            duration: 110
            easing.type: Easing.OutInQuad
        }
    }

    width: diameter
    height: width
    Rectangle {
        id: outerRing
        anchors.centerIn: parent
        width: parent.width
        height: width
        radius: 100     // 圆角，通过圆角来画出一个圆形窗体出来
        border.width: 1
        border.color: "#8A73D3"

        Rectangle {
            id: innerRing
            anchors.centerIn: parent
            height: width
            color: "white"
            radius: 100
        }
    }
}

/*  file: main.qml  */

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MyRadioButton {
        id: button1
        x: 100
        y: 100
    }

    MyRadioButton {
        id: button2
        x: 200
        y: 100
        isSeleted: !button1.isSeleted
    }

    Timer {
        running: true
        interval: 2000
        repeat: true
        onTriggered: {
            button1.isSeleted = !button1.isSeleted
        }
    }
}

大功告成！最终实现效果如下：