鸿蒙开发基础4-界面组件圆角布局

今天继续来学习鸿蒙开发的基础

第一个案例主要是介绍了 可以单独设置每个边框 以及对应的属性

其余的案例是集中圆角的设置 包含了 整体设置每个角的圆角 和 分别对每个圆角设置值 同时通过设置圆角 我们还可以将他设置成正圆和胶囊型的 运行后的效果 我也在下面展示出来了

案例1：
Text('学做鸿蒙')
  .padding(12)
  .border({
    width: {
      left: 1, right: 2,
    },
    color: {
      left: Color.Red, right: Color.Green
    },
    style: {
      left: BorderStyle.Dashed,
      right: BorderStyle.Solid
    }
  })
  .margin({
    bottom: 16
  })

案例2：
Text('我设置了16的圆角')
  .backgroundColor(Color.Brown)
  .width(160)
  .height(60)
  .borderRadius(16)

案例3：
Text('我不是圆角啊')
  .backgroundColor(Color.Brown)
  .width(160)
  .height(60)
  .borderRadius({
    topLeft: 15,
    // topRight: 10,
    // bottomLeft: 8,
    bottomRight: 20
  })

案例4：
// 设置成圆形
Text('我是圆形')
  .backgroundColor(Color.Brown)
  .width(80)
  .height(80)
  .borderRadius(40)

案例5：
// 胶囊
Text('我是胶囊')
  .backgroundColor(Color.Brown)
  .width(160)
  .height(60)
  .borderRadius(30)