qml 实现胶囊按钮（半边圆角按钮）

项目场景：

项目中，UI上要实现类似胶囊切换按钮，站在巨人的肩膀上实现了，效果如下:

---

实现细节：

宽度、高度、圆角均可自定义 其实实现是两个按钮放在了一起，只不过按钮的圆角可以自定义设置 先看按钮的实现：

import QtQuick 2.0

Rectangle {
    id: root
    height:100
    width:200
    property string title : ""
    property int textSize : 20
    property color bgColor : checked?"yellow":"gray"
    property color textColor : checked?"black":"#FFFFFF"
    color: bgColor
    property bool checked: false
    property int radiusCorners: Qt.AlignLeft | Qt.AlignRight | Qt.AlignTop | Qt.AlignBottom /* Default: */
    /*
                            Qt.AlignLeft |      Qt.AlignLeft |      Qt.AlignRight |     Qt.AlignLeft |      Qt.AlignLeft |
                            Qt.AlignRight |     Qt.AlignTop |       Qt.AlignTop |       Qt.AlignRight |     Qt.AlignRight |
              None:0        Qt.AlignTop |       Qt.AlignBottom      Qt.AlignBottom      Qt.AlignTop         Qt.AlignBottom
                            Qt.AlignBottom
        *****************     *************       ***************   ***************       *************     *****************
        *               *    *             *     *              *   *              *     *             *    *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *    *             *     *              *   *              *    *               *    *             *
        *****************     *************       ***************   ***************     *****************     *************
    */

    Repeater {
        model: [ {
                x: 0,
                y: 0,
                visible: internal.aligns(Qt.AlignLeft | Qt.AlignTop),
                radius: root.radius
            },
            {
                x: root.width - root.radius,
                y: 0,
                visible: internal.aligns(Qt.AlignRight | Qt.AlignTop),
                radius: root.radius
            },
            {
                x: 0,
                y: root.height - root.radius,
                visible: internal.aligns(Qt.AlignLeft | Qt.AlignBottom),
                radius: root.radius
            },
            {
                x: root.width - root.radius,
                y: root.height - root.radius,
                visible: internal.aligns(Qt.AlignRight | Qt.AlignBottom),
                radius: root.radius
            } ]

        Rectangle {
            x: modelData.x; y: modelData.y
            width: modelData.radius; height: width
            visible: !modelData.visible
            color: parent.color
        }
    }
    QtObject {
        id: internal

        function aligns(direction) {
            return (root.radiusCorners & direction) === direction
        }
    }

    Text
        {
            id:content
            text: title
            font.pixelSize: textSize
            color: textColor
            anchors.centerIn: parent
        }
}

实现其实是矩形的四个角加上四个小矩形来实现各种类型圆角配置。

---

本文章代码如下：

import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    visible: true
    width: 640
    height: 480
    
    ButtonA
    {
        id:my
        width :100
        height:80
        anchors.centerIn: parent
        //color: "red"
        radius: height/2
        radiusCorners:  Qt.AlignLeft | Qt.AlignBottom | Qt.AlignTop
        title:"btn1"
        MouseArea{
            anchors.fill: parent
            
            //            onPressed: {
            //                my.color = "gray"
            //            }
            
            //            onReleased: {
            //                my.color = "yellow"
            //            }
            
            onClicked: {
                console.debug("左边点击")
                my.checked = true;
                my2.checked = false
            }
        }
    }
    
    
    ButtonA
    {
        id:my2
        width :100
        height:80
        anchors.left: my.right
        y:my.y
        //color: "red"
        radius: height/2
        radiusCorners:  Qt.AlignRight | Qt.AlignBottom | Qt.AlignTop
        title:"btn2"
        MouseArea{
            anchors.fill: parent
       
            onClicked: {
                console.debug("右边点击")
                my.checked = false;
                my2.checked = true
            }
        }
    }
    
    Component.onCompleted:
    {
        my2.checked = true
    }
}

扩展：

实现不规则按钮也可以用qml Shape来实现。具体问题具体研究

---