【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