鸿蒙开发之ArkUI 界面篇十边框border

最新推荐文章于 2024-12-30 17:06:04 发布

原创

最新推荐文章于 2024-12-30 17:06:04 发布 · 839 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙border #鸿蒙border语法 #鸿蒙自定义边框 #ArkTS 边框 #鸿蒙边框语法 #鸿蒙样式 #鸿蒙Text边框

border语法格式如下：

要实现如下效果：

代码如下：

@Entry
@Component
struct IndexTest {

  @State message: string = 'IndexTest';
  build() {
    Column(){

      Text('border实现')
        .fontSize(30) 
        .border({
          width:4,
          color:Color.Red,
          style:BorderStyle.Solid,
          radius:10

        })
        .padding(15)
    }.width('100%')
  }
}

鸿蒙的强大远不止于此处，还可以实现单边框,就是说变宽的四个角、四个边都可以随意改成想要的颜色样式，改四个变宽语法width:{ left:6,right:8,top:8,bottom:8},同理改颜色color:{ left:Color.Black,right:Color.Red,top:Color.Pink,bottom:Color.Green}，如图效果：