【FAQ】HarmonyOS ETS如何给组件设置边框

【问题描述】

如何给Text组件设置左上 右上 为圆角，现在的boder方法 只能一起设置4个角

 

【解决方案】

我们可以使用boder设置圆角，或者在text组件添加一个矩形的遮罩层

1、参考资料

边框设置

形状裁剪

2、代码运行

代码如下

import featureAbility from '@ohos.ability.featureAbility';
@Entry
@Component
struct Index {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
     Text("border").width("100%").height(100).fontSize(50).textAlign(TextAlign.Center)
     Text("Z").width(100).height(100)
       .border({color:Color.Blue,radius:10})//todo 设置边框
       .fontSize(50)
       .textAlign(TextAlign.Center)
       .backgroundColor(Color.Red)
     Text("设置两边圆角")
       .width("100%")
       .height(100)
       .fontSize(50)
       .textAlign(TextAlign.Center)
      Text('Z')
        .width(100)
        .height(100)
        .textAlign(TextAlign.Center)
        .fontSize(50)
        .backgroundColor(Color.Red)
        //todo 从Text组件左上角开始
     // todo 当Rect的width和height和Text组件的width和height大小相等时候 刚好覆盖text组件
        .mask(new Rect({width: 100, height: 150}).fill(Color.White).radius(20))
    }
    .width('100%')
    .height('100%')
  }
}

​

 

欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh