QML 指定Button哪個角可以是圓角

原創

2020-02-22 11:15

最近做項目時需，有一個左邊是圓角右邊是直角的按鈕。於是開始查找qml中的Button是否可以這樣設置。經過檢索，未發現有可用價值的代碼，於是自己就簡單的實現了一個。思路比較笨。代碼如下：（不喜勿噴）

    ButtonGroup {
                buttons: rows.children
            }
            RowLayout {
                id:rows
                anchors.fill: parent;
                spacing: 0;

                Button {
                    id:enBtn;
                    checkable: true;
                    Layout.preferredWidth: 100;
                    Layout.fillHeight: true;
                    font.pointSize: 26;
                    font.bold: true;
                    text: "EN"

                    checked: true;
                    background: Rectangle{
                        radius: 6;
                        Rectangle {
                            id:rightRect;
                            anchors.right: parent.right;
                            width: 10;
                            height: parent.height;
                            color: enBtn.checked ? "#32AAE6" : "#205068";
                        }

                        color: enBtn.checked ? "#32AAE6" : "#205068";
                    }
                }

                Button {
                    id:chBtn;
                    checkable: true;
                    Layout.preferredWidth: 100;
                    Layout.fillHeight: true;
                    font.pointSize: 26;
                    font.bold: true;
                    text: "CH"

                    background: Rectangle{
                        radius: 6;
                        Rectangle {
                            id:leftRect;
                            anchors.left: parent.left;
                            width: 10;
                            height: parent.height;
                            color: enBtn.checked ? "#32AAE6" : "#205068";
                        }
                        color: chBtn.checked ? "#32AAE6" : "#205068";
                    }
                }

            }

最終效果：