OpenHarmony应用开发-AlphabetIndexer/Blank/Button/Checkbox

素年锦时静待君丶
发布于 2023-4-14 15:34
浏览
0收藏

版本:v3.2 Release

AlphabetIndexer

可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。

说明:

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

子组件

接口

AlphabetIndexer(value: {arrayValue: Array<string>, selected: number})

参数:

参数名

参数类型

必填

参数描述

arrayValue

Array<string>

字母索引字符串数组,不可设置为空。

selected

number

初始选中项索引值,若超出索引值范围,则取默认值0。

属性

除支持​​通用属性​​外,还支持以下属性:

名称

参数类型

描述

color

​ResourceColor​

设置文字颜色。

默认值:0x99000000。

selectedColor

​ResourceColor​

设置选中项文字颜色。

默认值:0xFF254FF7。

popupColor

​ResourceColor​

设置提示弹窗文字颜色。

默认值:0xFF254FF7。

selectedBackgroundColor

​ResourceColor​

设置选中项背景颜色。

默认值:0x1F0A59F7。

popupBackground

​ResourceColor​

设置提示弹窗背景色。

默认值:0xFFF1F3F5。

usingPopup

boolean

设置是否使用提示弹窗。

默认值:false。

selectedFont

​Font​

设置选中项文字样式。

默认值:

{

size:10,

style:FontStyle.Normal,

weight:FontWeight.Normal,

family:‘HarmonyOS Sans’

}

popupFont

​Font​

设置提示弹窗字体样式。

默认值:

{

size:10,

style:FontStyle.Normal,

weight:FontWeight.Normal,

family:‘HarmonyOS Sans’

}

font

​Font​

设置字母索引条默认字体样式。

默认值:

{

size:10,

style:FontStyle.Normal,

weight:FontWeight.Normal,

family:‘HarmonyOS Sans’

}

itemSize

string | number

设置字母索引条字母区域大小,字母区域为正方形,即正方形边长。不支持设置为百分比。

默认值:24.0

单位:vp

alignStyle

IndexerAlign

设置字母索引条弹框的对齐样式,支持弹窗显示在索引条右侧和左侧。

默认值:IndexerAlign.Right。

selected

number

设置选中项索引值。

默认值:0。

popupPosition

​Position​

设置弹出窗口相对于索引器条上边框中点的位置。

默认值:{x:96.0, y:48.0}。

IndexerAlign枚举说明

名称

描述

Left

弹框显示在索引条右侧。

Right

弹框显示在索引条左侧。

事件

除支持​​通用事件​​外,还支持以下事件:

名称

功能描述

onSelected(callback: (index: number) => void)(deprecated)

索引条选中回调,返回值为当前选中索引。 从API Version 8开始废弃,建议使用onSelect代替。

onSelect(callback: (index: number) => void)8+

索引条选中回调,返回值为当前选中索引。

onRequestPopupData(callback: (index: number) => Array<string>)8+

选中字母索引后,请求索引提示弹窗显示内容回调。

返回值:索引对应的字符串数组,此字符串数组在弹窗中竖排显示,字符串列表最多显示5个,超出部分可以滑动显示。

onPopupSelect(callback: (index: number) => void)8+

字母索引提示弹窗字符串列表选中回调。

示例

// xxx.ets
@Entry
@Component
struct AlphabetIndexerSample {
  private arrayA: string[] = ['安']
  private arrayB: string[] = ['卜', '白', '包', '毕', '丙']
  private arrayC: string[] = ['曹', '成', '陈', '催']
  private arrayL: string[] = ['刘', '李', '楼', '梁', '雷', '吕', '柳', '卢']
  private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
  'H', 'I', 'J', 'K', 'L', 'M', 'N',
  'O', 'P', 'Q', 'R', 'S', 'T', 'U',
  'V', 'W', 'X', 'Y', 'Z']

  build() {
    Stack({ alignContent: Alignment.Start }) {
      Row() {
        List({ space: 20, initialIndex: 0 }) {
          ForEach(this.arrayA, (item) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, item => item)

          ForEach(this.arrayB, (item) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, item => item)

          ForEach(this.arrayC, (item) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, item => item)

          ForEach(this.arrayL, (item) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, item => item)
        }
        .width('50%')
        .height('100%')

        AlphabetIndexer({ arrayValue: this.value, selected: 0 })
          .selectedColor(0xFFFFFF) // 选中项文本颜色
          .popupColor(0xFFFAF0) // 弹出框文本颜色
          .selectedBackgroundColor(0xCCCCCC) // 选中项背景颜色
          .popupBackground(0xD2B48C) // 弹出框背景颜色
          .usingPopup(true) // 是否显示弹出框
          .selectedFont({ size: 16, weight: FontWeight.Bolder }) // 选中项字体样式
          .popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框内容的字体样式
          .itemSize(28) // 每一项的尺寸大小
          .alignStyle(IndexerAlign.Left) // 弹出框在索引条右侧弹出
          .onSelect((index: number) => {
            console.info(this.value[index] + ' Selected!')
          })
          .onRequestPopupData((index: number) => {
            if (this.value[index] == 'A') {
              return this.arrayA // 当选中A时,弹出框里面的提示文本列表显示A对应的列表arrayA,选中B、C、L时也同样
            } else if (this.value[index] == 'B') {
              return this.arrayB
            } else if (this.value[index] == 'C') {
              return this.arrayC
            } else if (this.value[index] == 'L') {
              return this.arrayL
            } else {
              return [] // 选中其余子母项时,提示文本列表为空
            }
          })
          .onPopupSelect((index: number) => {
            console.info('onPopupSelected:' + index)
          })
      }
      .width('100%')
      .height('100%')
    }
  }
}

OpenHarmony应用开发-AlphabetIndexer/Blank/Button/Checkbox-鸿蒙开发者社区

Blank

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

说明:

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

子组件

接口

Blank(min?: number | string)

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

参数:

参数名

参数类型

必填

参数描述

min

number | string

空白填充组件在容器主轴上的最小大小。

默认值:0

说明:

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

属性

除支持​​通用属性​​外,还支持以下属性:

名称

参数类型

描述

color

​ResourceColor​

设置空白填充的填充颜色。


默认值:Color.Transparent

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

事件

支持​​通用事件​​。

示例

示例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)
  }
}
    ts

竖屏状态

OpenHarmony应用开发-AlphabetIndexer/Blank/Button/Checkbox-鸿蒙开发者社区

横屏状态

OpenHarmony应用开发-AlphabetIndexer/Blank/Button/Checkbox-鸿蒙开发者社区

示例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%')
  }
}
    ts

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

OpenHarmony应用开发-AlphabetIndexer/Blank/Button/Checkbox-鸿蒙开发者社区

Button

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

说明:

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

子组件

可以包含单个子组件。

接口

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

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

参数:

参数名

参数类型

必填

参数描述

type

ButtonType

描述按钮显示样式。

默认值:ButtonType.Capsule

stateEffect

boolean

按钮按下时是否开启按压态显示效果,当设置为false时,按压效果关闭。

默认值:true

说明:

当开启按压态显示效果,开发者设置状态样式时,会基于状态样式设置完成后的背景色再进行颜色叠加。

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

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

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

参数:

参数名

参数类型

必填

参数描述

label

​ResourceStr​

按钮文本内容。

options

{ type?: ButtonType, stateEffect?: boolean }

见方法1参数说明。

属性

除支持​​通用属性​​外,还支持以下属性:

名称

参数类型

描述

type

ButtonType

设置Button样式。

默认值:ButtonType.Capsule

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

stateEffect

boolean

按钮按下时是否开启按压态显示效果,当设置为false时,按压效果关闭。

默认值:true

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

ButtonType枚举说明

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

名称

描述

Capsule

胶囊型按钮(圆角默认为高度的一半)。

Circle

圆形按钮。

Normal

普通按钮(默认不带圆角)。

说明:

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

支持​​通用事件​​。

示例

// 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)
          .onClick(() => {
            console.log('ButtonType.Normal')
          })
        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 })
  }
}

OpenHarmony应用开发-AlphabetIndexer/Blank/Button/Checkbox-鸿蒙开发者社区

Checkbox

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

说明:

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

子组件

接口

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

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

参数:

参数名

参数类型

必填

参数描述

name

string

多选框名称。

group

string

多选框的群组名称。

说明:

未配合使用CheckboxGroup组件时,此值无用。

属性

除支持​​通用属性​​外,还支持以下属性:

名称

参数类型

描述

select

boolean

设置多选框是否选中。

默认值:false

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

selectedColor

​ResourceColor​

设置多选框选中状态颜色。

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

事件

支持​​通用事件​​外,还支持以下事件:

名称

功能描述

onChange(callback: (value: boolean) => void)

当选中状态发生变化时,触发该回调。(只有手动触发且Checkbox状态改变时才会触发onChange回调)

- value为true时,表示已选中。

- value为false时,表示未选中。

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

示例

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

OpenHarmony应用开发-AlphabetIndexer/Blank/Button/Checkbox-鸿蒙开发者社区



文章转载自:​​https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md/​

已于2023-4-14 15:34:23修改
收藏
回复
举报
回复
    相关推荐