【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%')
  }
}

cke_3408.png

 

欲瞭解更多更全技術文章,歡迎訪問https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章