harmony开发之button组件的使用

从API version 9开始，该接口支持在ArkTS卡片中使用。

• 按钮圆角通过通用属性borderRadius设置（不支持通过border接口设置圆角），且只支持设置一个相同的圆角。
• 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为宽、高中较小值的一半。
• 当按钮类型为Circle时，borderRadius即为按钮半径，若未设置borderRadius按钮半径则为宽、高中较小值的一半。
• 按钮文本通过通用文本样式进行设置。
• 设置颜色渐变需先设置backgroundColor为透明色。

示例代码：

@Entry
@Component
struct ButtonExample {
  build() {
    Column(){
      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row() {
          LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
          Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 12, right: 12 })
        }.alignItems(VerticalAlign.Center).width(90).height(40)
      }.backgroundColor(0x317aff)
      .width(200)
    }.alignItems(HorizontalAlign.Center).width('90%')//调整容器的水平
    .height(500).justifyContent(FlexAlign.Center)//调整容器的高度

  }
}

使用圆形按钮：

@Entry
@Component
struct ButtonExample {
  build() {
    Column(){
      Text('Circle button').fontSize(15).fontColor(0xCCCCCC)

      Button({ type: ButtonType.Circle, stateEffect: true }) {
                  LoadingProgress().width(20).height(20).color(0xFFFFFF)
      }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)

    }.alignItems(HorizontalAlign.Center).width('90%')//调整容器的水平
    .height("80%").justifyContent(FlexAlign.Center)//调整容器的高度

  }
}

示例2：

使用button的点击事件，来计数：

// xxx.ets
@Entry
@Component
struct SwipeGestureExample {
  @State count: number = 0//定义用来计数的变量

  build() {
    Column() {
      Text(`${this.count}`)
        .fontSize(30)
        .onClick(() => {
          this.count++
        })
      if (this.count <= 0) {//判断奇偶数
        Button('count is negative').fontSize(30).height(50)
      } else if (this.count % 2 === 0) {
        Button('count is even').fontSize(30).height(50)
      } else {
        Button('count is odd').fontSize(30).height(50)
      }
    }.height('100%').width('100%').justifyContent(FlexAlign.Center)//设置容器的高度
  }
}

这里顺带说一哈，空白填充组件（blank），在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。(该组件从API Version 7开始支持。)

Blank(min?: number | string)

空白填充组件在容器主轴上的最小大小。默认值：0

说明：不支持设置百分比。负值使用默认值。当最小值大于容器可用空间时，使用最小值作为自身大小并超出容器。

可以使用color设置空白填充的填充颜色。默认值：Color.Transparent? ? 从API version 9开始，该接口支持在ArkTS卡片中使用。

其中颜色支持类型为：ResourceColor

Color	颜色枚举值。
number	HEX格式颜色，支持rgb。示例：0xffffff。
string	rgb或者rgba格式颜色。示例：'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'。
Resource	使用引入资源的方式，引入系统资源或者应用资源中的颜色。

Font

设置文本样式。

名称	类型	必填	说明
size	Length	否	设置文本尺寸，Length为number类型时，使用fp单位。不支持设置百分比字符串。
weight	FontWeight?| number | string	否	设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
family	string |?Resource	否	设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, HarmonyOS Sans'。当前支持'HarmonyOS Sans'字体和注册自定义字体。
style	FontStyle	否	设置文本的字体样式。

代码部分如下：

// xxx.ets
@Entry
@Component
struct BlankExample {
  build() {
    Column() {
      Row() {
        Text('Bluetooth').fontSize(18)
        Blank()
        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
      }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
    }.backgroundColor(0xEFEFEF).padding(20)
  }
}

以上内容，参考官方代码