harmony开发之button组件的使用

2023-12-13 08:13:16

从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)
  }
}

以上内容,参考官方代码

文章来源:https://blog.csdn.net/Helloorld_1/article/details/134951233
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。