【問題描述】
如何給Text組件設置左上 右上 爲圓角,現在的boder方法 只能一起設置4個角
【解決方案】
我們可以使用boder設置圓角,或者在text組件添加一個矩形的遮罩層
1、參考資料
2、代碼運行
代碼如下
欲瞭解更多更全技術文章,歡迎訪問https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
如何給Text組件設置左上 右上 爲圓角,現在的boder方法 只能一起設置4個角
我們可以使用boder設置圓角,或者在text組件添加一個矩形的遮罩層
代碼如下
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