gpt4 book ai didi

鸿蒙HarmonyOS实战-ArkUI组件(Button)

转载 作者:撒哈拉 更新时间:2024-04-01 16:52:21 56 4
gpt4 key购买 nike

🚀一、Button

Button(按钮)是一种常见的用户界面控件,通常用于触发操作或提交数据。Button 拥有文本标签和一个可点击的区域,用户点击该区域即可触发相应的操作或事件.

Button 的主要功能有:

  • 触发操作:用户点击 Button 可以触发相应的操作,例如提交表单、搜索、切换页面等.

  • 提交数据:Button 可以用于提交表单数据,将用户输入的数据提交到服务器进行处理.

  • 执行命令:Button 可以执行系统或应用程序的命令,例如打印、保存、退出等.

  • 触发事件:Button 可以触发自定义事件,通过与其他组件配合使用,可以实现复杂的交互效果.

🔎1.创建按钮

语法说明:

Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
Button(options?: {type?: ButtonType, stateEffect?: boolean})

使用:

@Entry
@Component
struct Index {
  build() {
    Column(){
      Button('Ok', { type: ButtonType.Normal, stateEffect: true })
        .borderRadius(8)
        .backgroundColor(0x317aff)
        .width(90)
        .height(40)
      Button({ type: ButtonType.Normal, stateEffect: true }) {
        Row() {
          Image($r('app.media.app_icon')).width(20).height(40).margin({ left: 12 })
          Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
        }.alignItems(VerticalAlign.Center)
      }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)
    }
  }
}

image

🔎2.设置按钮类型

@Entry
@Component
struct Index {
  build() {
    Column(){
      Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
        .backgroundColor(0x317aff)
        .width(90)
        .height(40)
      Button('Circle', { type: ButtonType.Circle, stateEffect: false })
        .backgroundColor(0x317aff)
        .width(90)
        .height(90)
      Button('Circle', { type: ButtonType.Normal, stateEffect: false })
        .backgroundColor(0x317aff)
        .width(90)
        .height(90)
    }
  }
}

image

注意:不支持通过borderRadius属性重新设置 。

🔎3.自定义样式

@Entry
@Component
struct Index {
  build() {
    Column(){
      Button('circle border', { type: ButtonType.Normal })
        .borderRadius(20)
        .height(40)
      Button('font style', { type: ButtonType.Normal })
        .fontSize(20)
        .fontColor(Color.Pink)
        .fontWeight(800)
      Button('background color').backgroundColor(0xF55A42)
      Button({ type: ButtonType.Circle, stateEffect: true }) {
        Image($r('app.media.ic_public_refresh')).width(30).height(30)
      }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
    }
  }
}