HarmonyOS API：基础组件

joytrian

发布于 2023-3-24 11:45

浏览

0收藏

版本：v3.1 Beta

Blank

更新时间: 2023-02-17 09:19

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。

说明

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

Blank(min?: number | string)

参数：

参数名	参数类型	必填	参数描述
min	number \| string	否	空白填充组件在容器主轴上的最小大小。默认值：0

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
color	ResourceColor	设置空白填充的填充颜色。

示例

示例1

Blank组件在横竖屏占满空余空间效果。

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

竖屏状态

HarmonyOS API：基础组件-鸿蒙开发者社区

横屏状态

HarmonyOS API：基础组件-鸿蒙开发者社区

示例2

Blank组件的父组件未设置宽度时，min参数的使用效果。

// xxx.ets
@Entry
@Component
struct BlankExample {
  build() {
    Column({ space: 20 }) {
      // blank父组件不设置宽度时，Blank失效，可以通过设置min最小宽度填充固定宽度
      Row() {
        Text('Bluetooth').fontSize(18)
        Blank().color(Color.Yellow)
        Toggle({ type: ToggleType.Switch })
      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })

      Row() {
        Text('Bluetooth').fontSize(18)
        // 设置最小宽度为160
        Blank('160').color(Color.Yellow)
        Toggle({ type: ToggleType.Switch })
      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
      
    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
  }
}

Blank父组件未设置宽度时，子组件间无空白填充，使用min参数设置填充尺寸

HarmonyOS API：基础组件-鸿蒙开发者社区

Button

更新时间: 2023-02-17 09:19

按钮组件，可快速创建不同样式的按钮。

说明

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

可以包含单个子组件。

接口

方法1： Button(options?: {type?: ButtonType, stateEffect?: boolean})

参数：

参数名	参数类型	必填	参数描述
type	ButtonType	否	描述按钮显示样式。默认值：ButtonType.Capsule
stateEffect	boolean	否	按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。默认值：true

方法2： Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

使用文本内容创建相应的按钮组件，此时Button无法包含子组件。

参数：

参数名	参数类型	必填	参数描述
label	ResourceStr	否	按钮文本内容。
options	{ type?: ButtonType, stateEffect?: boolean }	否	见方法1参数说明。

属性

名称	参数类型	描述
type	ButtonType	设置Button样式。默认值：ButtonType.Capsule
stateEffect	boolean	按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。默认值：true

ButtonType枚举说明

名称	描述
Capsule	胶囊型按钮（圆角默认为高度的一半）。
Circle	圆形按钮。
Normal	普通按钮（默认不带圆角）。

说明

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

示例

// xxx.ets
@Entry
@Component
struct ButtonExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Text('Normal button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('OK', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90)
        Button({ type: ButtonType.Normal, stateEffect: true }) {
          Row() {
            LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
            Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
          }.alignItems(VerticalAlign.Center)
        }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)

        Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4)
          .borderRadius(8).backgroundColor(0x317aff).width(90)
      }

      Text('Capsule button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90)
        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: 5, right: 12 })
          }.alignItems(VerticalAlign.Center).width(90).height(40)
        }.backgroundColor(0x317aff)

        Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4)
          .backgroundColor(0x317aff).width(90)
      }

      Text('Circle button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
        Button({ type: ButtonType.Circle, stateEffect: true }) {
          LoadingProgress().width(20).height(20).color(0xFFFFFF)
        }.width(55).height(55).backgroundColor(0x317aff)

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

HarmonyOS API：基础组件-鸿蒙开发者社区

Checkbox

更新时间: 2023-02-17 09:19

提供多选框组件，通常用于某选项的打开或关闭。

说明

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

Checkbox(options?: {name?: string, group?: string })

参数:

参数名	参数类型	必填	参数描述
name	string	否	多选框名称。
group	string	否	多选框的群组名称。

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
select	boolean	设置多选框是否选中。默认值：false
selectedColor	ResourceColor	设置多选框选中状态颜色。

事件

支持通用事件外，还支持以下事件：

名称	功能描述
onChange(callback: (value: boolean) => void)	当选中状态发生变化时，触发该回调。（只有手动触发且Checkbox状态改变时才会触发onChange回调） - value为true时，表示已选中。 - value为false时，表示未选中。

示例

// xxx.ets
@Entry
@Component
struct CheckboxExample {

  build() {
    Row() {
      Checkbox({name: 'checkbox1',  group: 'checkboxGroup'})
        .select(true)
        .selectedColor(0xed6f21)
        .onChange((value: boolean) => {
          console.info('Checkbox1 change is'+ value)
        })
      Checkbox({name: 'checkbox2',  group: 'checkboxGroup'})
        .select(false)
        .selectedColor(0x39a2db)
        .onChange((value: boolean) => {
          console.info('Checkbox2 change is'+ value)
        })
    }
  }
}

HarmonyOS API：基础组件-鸿蒙开发者社区

CheckboxGroup

更新时间: 2023-02-17 09:19

多选框群组，用于控制多选框全选或者不全选状态。

说明

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

CheckboxGroup(options?: { group?: string })

创建多选框群组，可以控制群组内的Checkbox全选或者不全选，group值相同的Checkbox和CheckboxGroup为同一群组。

参数:

参数名	参数类型	必填	参数描述
group	string	否	群组名称。

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
selectAll	boolean	设置是否全选。默认值：false，若同组的Checkbox显式设置select，则Checkbox的优先级高。
selectedColor	ResourceColor	设置被选中或部分选中状态的颜色。

事件

除支持通用事件外，还支持以下事件：

名称	功能描述
onChange (callback: (event: CheckboxGroupResult) => void )	CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。（只有手动触发且Checkbox或CheckboxGroup状态改变时才会触发onChange回调）

CheckboxGroupResult对象说明

名称	类型	描述
name	Array<string>	群组内所有被选中的多选框名称。
status	SelectStatus	选中状态。

SelectStatus枚举说明

名称	描述
All	群组多选择框全部选择。
Part	群组多选择框部分选择。
None	群组多选择框全部没有选择。

示例

// xxx.ets
@Entry
@Component
struct CheckboxExample {
  build() {
    Scroll() {
      Column() {
        // 全选按钮
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          CheckboxGroup({ group: 'checkboxGroup' })
            .selectedColor('#007DFF')
            .onChange((itemName: CheckboxGroupResult) => {
              console.info("checkbox group content" + JSON.stringify(itemName))
            })
          Text('Select All').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }

        // 选项1
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
            .selectedColor('#007DFF')
            .onChange((value: boolean) => {
              console.info('Checkbox1 change is' + value)
            })
          Text('Checkbox1').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }.margin({ left: 36 })

        // 选项2
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
            .selectedColor('#007DFF')
            .onChange((value: boolean) => {
              console.info('Checkbox2 change is' + value)
            })
          Text('Checkbox2').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }.margin({ left: 36 })

        // 选项3
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
            .selectedColor('#007DFF')
            .onChange((value: boolean) => {
              console.info('Checkbox3 change is' + value)
            })
          Text('Checkbox3').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }.margin({ left: 36 })
      }
    }
  }
}

HarmonyOS API：基础组件-鸿蒙开发者社区

文章转载自：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-checkboxgroup-0000001478181397-V3?catalogVersion=V3

分类

卡片开发

标签

HarmonyOS API

已于2023-3-24 11:45:40修改

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：基础组件

Blank

子组件

接口

属性

示例

示例1

示例2

Button

子组件

接口

属性

ButtonType枚举说明

示例

Checkbox

子组件

接口

属性

事件

示例

CheckboxGroup

子组件

接口

属性

事件

CheckboxGroupResult对象说明

SelectStatus枚举说明

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看