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

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

            }
       

最终效果:

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
QML中实现圆角按钮的方法可以通过自定义按钮样式来实现。可以使用Rectangle元素作为按钮的背景,并设置它的radius属性来实现圆角效果。以下是一个示例代码: Button { id: myButton text: "圆角按钮" background: Rectangle { radius: 10 color: "blue" } } 在这个示例中,我们使用Rectangle元素作为按钮的背景,并设置radius属性为10来实现圆角效果。你可以根据需要调整radius的值来改变圆角的大小。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [QML 控件—按钮控件—圆角按钮(RoundButton)](https://blog.csdn.net/weixin_42948436/article/details/117300470)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [QML 指定Button哪个可以是圆角](https://blog.csdn.net/lsyrhz/article/details/102816980)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [QML(一):自定义圆角按钮的处理](https://blog.csdn.net/qq_38491692/article/details/126014233)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Liu-Eleven

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值