harmony学习Button组件

2024-03-14 16:56 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()
  })

当前文章价值7.23元,扫一扫支付后添加微信提供帮助!(如不能解决您的问题,可以申请退款)

你可能感兴趣的文章

来源:每日教程每日一例,深入学习实用技术教程,关注公众号TeachCourse
转载请注明出处: https://www.teachcourse.cn/3140.html ,谢谢支持!

资源分享

分类:harmony 标签:
Android事件分发流程分析测试(2) Android事件分发流程分析测试(
Android开发之WebView控件使用说明 Android开发之WebView控件使用
Eclipse卸载已安装的Genymotion插件 Eclipse卸载已安装的Genymotio
选择排序算法 选择排序算法

评论已关闭!