QML 指定Button哪个角可以是圆角

最新推荐文章于 2024-07-23 16:33:57 发布

Liu-Eleven

最新推荐文章于 2024-07-23 16:33:57 发布

阅读量5.2k

点赞数 3

分类专栏： qml 文章标签： QML指定圆角

本文链接：https://blog.csdn.net/lsylovezsl/article/details/102816980

版权

qml 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

最近做项目时需，有一个左边是圆角右边是直角的按钮。于是开始查找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";
                    }
                }

            }

最终效果：