harmony学习Button组件

需求

熟悉Button组件默认提供的三种按钮样式，根据业务需要定义更丰富的样式。

Button样式

harmony组件Button提供三种按钮样式：

• ButtonType.Normal，矩形的按钮样式

//code by每日教程teachcourse.cn
Button('立即登录')
  .fontSize($r('app.float.px28'))
  .fontColor($r('app.color.white'))
  .width('95%')
  .type(ButtonType.Normal)
  .height($r('app.float.px66'))
  .onClick(() => {
    this.login()
  })

• ButtonType.Capsule，胶囊的按钮样式（默认样式）

//code by每日教程teachcourse.cn
Button('立即登录')
  .fontSize($r('app.float.px28'))
  .fontColor($r('app.color.white'))
  .width('95%')
  .type(ButtonType.Capsule)
  .height($r('app.float.px66'))
  .onClick(() => {
    this.login()
  })

• ButtonType.Circle，圆形的按钮样式

//code by每日教程teachcourse.cn
Button('立即登录')
  .fontSize($r('app.float.px28'))
  .fontColor($r('app.color.white'))
  .width('95%')
  .type(ButtonType.Circle)
  .height($r('app.float.px66'))
  .onClick(() => {
    this.login()
  })

自定义样式

使用.borderRadius()自定义圆角的大小

//code by每日教程teachcourse.cn
Button('立即登录')
  .fontSize($r('app.float.px28'))
  .fontColor($r('app.color.white'))
  .width('95%')
  .type(ButtonType.Circle)
  .height($r('app.float.px66'))
  .borderRadius(5)//定义圆角的大小
  .onClick(() => {
    this.login()
  })