设置圆角

  1. UIButton *btn;  
  2.     [btn.layer setMasksToBounds:YES];  
  3.     [btn.layer setCornerRadius:10.0];//设置矩形四个圆角半径  
  4.       
  5.     /* 
  6.         [btn.layer setBorderWidth:1.0];//边框宽度 
  7.      */  
在 QML 中设置元素的圆角效果,可以通过多种方式实现,具体取决于所使用的组件类型和 QML 版本。以下是一些常见的实现方法及其适用场景: ### 使用 `Rectangle` 的 `radius` 属性 `Rectangle` 是 QML 中最常用的矩形绘制组件,它原生支持 `radius` 属性来设置圆角。该属性可以统一设置四个角的圆角半径,适用于所有 Qt Quick 版本。 ```qml Rectangle { width: 200 height: 150 color: "lightblue" radius: 20 border.width: 2 border.color: "blue" } ``` 此方法适用于标准矩形元素,但不能为每个角单独设置不同的圆角半径。 ### 为每个角设置不同半径 对于需要对每个角分别设置不同圆角半径的需求,可以使用自定义组件如 `RadiusRectangle` 或 `DelRectangle`,它们支持通过数组或属性分别指定四个角的圆角半径[^3]。 ```qml RadiusRectangle { width: 180 height: 180 color: "red" cornersRadius: [20, 0, 20, 0] // top-left, top-right, bottom-right, bottom-left borderWidth: 1 borderColor: "yellow" } ``` 这种实现方式通常基于 `Canvas` 或多个 `Rectangle` 组合绘制而成,适用于复杂 UI 场景下的圆角矩形定制。 ### 图像组件的圆角处理 对于 `Image` 类型的组件,QML 原生不支持 `radius` 属性,因此需要借助遮罩(mask)或着色器(Shader)技术实现圆角效果。可以通过 `OpacityMask` 或 `MultiEffect` 结合 `Rectangle` 遮罩实现圆角裁剪[^2]。 使用 `OpacityMask` 的示例: ```qml Rectangle { id: mask_rect visible: false width: parent.width height: parent.height radius: 50 } OpacityMask { anchors.fill: image source: image maskSource: mask_rect antialiasing: true } ``` 使用 `ShaderEffectSource` 和 `MultiEffect` 的示例: ```qml Rectangle { id: roundMask width: parent.width height: parent.height radius: 16 color: "white" visible: false } ShaderEffectSource { id: roundMaskSource sourceItem: roundMask hideSource: true live: true } Image { source: "qrc:/image/image/player.jpg" anchors.fill: parent layer.enabled: true layer.effect: MultiEffect { maskEnabled: true maskSource: roundMaskSource } } ``` 这些方法可以确保图像在裁剪后仍保持圆角外观,适用于头像、卡片等需要圆角图像的 UI 元素。 ### 自定义组件实现圆角 对于需要频繁使用不同圆角配置的场景,可以封装自定义组件,如 `MyQml` 或 `DelRectangle`,以简化调用和维护。此类组件通常封装了图像处理逻辑或复杂的圆角绘制逻辑,用户只需传入参数即可[^4]。 示例: ```qml MyQml { width: 100 height: 100 borderRadius: 50 imgSrc: "qrc:/image/image/player.jpg" } ``` 这种方法提高了代码复用性,降低了重复代码的维护成本。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值