• 基础ArkTS组件：二维码，滚动条与滑动条，多选框与多选框群组（HarmonyOS学习第三课【3.4】）

    二维码组件

    QRCode

    子组件

    无

    接口

    QRCode(value: string)

    参数:

    参数名

    参数类型

    必填

    参数描述

    value

    string

    是

    二维码内容字符串。最大支持256个字符，若超出，则截取前256个字符。

    说明：

    该字符串内容确保有效，不支持null、undefined以及空内容。

    属性

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

    名称

    参数类型

    描述

    color

    ResourceColor

    设置二维码颜色。

    默认值：Color.Black

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

    backgroundColor

    ResourceColor

    设置二维码背景颜色。

    默认值：Color.White

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

    事件

    通用事件支持点击事件、触摸事件、挂载卸载事件。

    QRCode定义介绍

    1. interface QRCodeInterface {
    2.   (value: string): QRCodeAttribute;
    3. }
    • value：设置将要生成二维码的内容。

    简单样例如下所示：

    1. QRCode('Hello, OpenHarmony')
    2.   .width(70)
    3.   .height(70)

    运行结果如下图所示：

    官方简单案例：

    1. // xxx.ets
    2. @Entry
    3. @Component
    4. struct QRCodeExample {
    5.   private value: string = 'hello world'
    6.   build() {
    7.     Column({ space: 5 }) {
    8.       Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
    9.       QRCode(this.value).width(200).height(200)
    10.  
    11.       // 设置二维码颜色
    12.       Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
    13.       QRCode(this.value).color(0xF7CE00).width(200).height(200)
    14.  
    15.       // 设置二维码背景色
    16.       Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
    17.       QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange)
    18.     }.width('100%').margin({ top: 5 })
    19.   }
    20. }

    滚动条组件

    滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。

    子组件

    可以包含单个子组件。

    接口

    ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: BarState })

    参数：

    参数名

    参数类型

    必填

    参数描述

    scroller

    Scroller

    是

    可滚动组件的控制器。用于与可滚动组件进行绑定。

    direction

    ScrollBarDirection

    否

    滚动条的方向，控制可滚动组件对应方向的滚动。

    默认值：ScrollBarDirection.Vertical

    state

    BarState

    否

    滚动条状态。

    默认值：BarState.Auto

    说明

    ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。

    滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。

    ScrollBarDirection枚举说明

    名称

    描述

    Vertical

    纵向滚动条。

    Horizontal

    横向滚动条。

    Scroller简单介绍

    Scroller 作为滚动容器组件的控制器，它提供了滚动子组件的各种能力，比如设置子组件滚动指定位置、滚动到底部以及滚动到下一页上一页等能力。目前 Scrolller 只支持绑定到 Scroll 和 List 上。

    Scroller 定义如下：

    1. export declare class Scroller {
    2.   scrollTo(value: {
    3.     xOffset: number | string, yOffset: number | string, animation?: { duration: number, curve: Curve }
    4.   });
    5.   scrollEdge(value: Edge);
    6.   scrollPage(value: { next: boolean, direction?: Axis });
    7.   currentOffset();
    8.   scrollToIndex(value: number);
    9. }
    • scrollTo：设置子组件滚动到指定位置，在滚动的时候还可以根据 animation 参数设置动画。
    • scrollEdge：滚动到边界， Edge 提供了多种类型，读者可自行查阅。
    • scrollPage：滚动到上一页或者下一页。
    • currentOffset：获取当前滚动的偏移量。
    • scrollToIndex：滚动到指定下标，目前只支持 List
    1. // xxx.ets
    2. @Entry
    3. @Component
    4. struct ScrollBarExample {
    5.   private scroller: Scroller = new Scroller()
    6.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
    7.  
    8.   build() {
    9.     Column() {
    10.       Stack({ alignContent: Alignment.End }) {
    11.         Scroll(this.scroller) {
    12.           Flex({ direction: FlexDirection.Column }) {
    13.             ForEach(this.arr, (item) => {
    14.               Row() {
    15.                 Text(item.toString())
    16.                   .width('80%')
    17.                   .height(60)
    18.                   .backgroundColor('#3366CC')
    19.                   .borderRadius(15)
    20.                   .fontSize(16)
    21.                   .textAlign(TextAlign.Center)
    22.                   .margin({ top: 5 })
    23.               }
    24.             }, item => item)
    25.           }.margin({ right: 15 })
    26.         }
    27.         .width('90%')
    28.         .scrollBar(BarState.Off)
    29.         .scrollable(ScrollDirection.Vertical)
    30.         ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
    31.           Text()
    32.             .width(20)
    33.             .height(100)
    34.             .borderRadius(10)
    35.             .backgroundColor('#C0C0C0')
    36.         }.width(20).backgroundColor('#ededed')
    37.       }
    38.     }
    39.   }
    40. }

    滑动条组件

    项目开发中可能会有设置设备音量大小，调节屏幕亮度等需求，实现类似需求一般都会使用到滑动条，ArkUI开发框架提供了滑动组件 Slider 

    滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

    说明

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

    子组件

    无

    接口

    Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})

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

    参数：

    参数名

    参数类型

    必填

    参数描述

    value

    number

    否

    当前进度值。

    默认值：参数min

    min

    number

    否

    设置最小值。

    默认值：0

    max

    number

    否

    设置最大值。

    默认值：100

    说明：

    min >= max异常情况，min取默认值0，max取默认值100。

    value不在[min, max]范围之内，取min/max，靠近min取min，靠近max取max。

    step

    number

    否

    设置Slider滑动步长。

    默认值：1

    取值范围：[0.01, max]

    说明：

    设置小于0或百分比的值时，按默认值显示。

    style

    SliderStyle

    否

    设置Slider的滑块与滑轨显示样式。

    默认值：SliderStyle.OutSet

    direction8+

    Axis

    否

    设置滑动条滑动方向为水平或竖直方向。

    默认值：Axis.Horizontal

    reverse8+

    boolean

    否

    设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。

    默认值：false

    SliderStyle枚举说明

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

    名称

    描述

    OutSet

    滑块在滑轨上。

    InSet

    滑块在滑轨内。

    属性

    支持除触摸热区以外的通用属性设置。

    名称

    参数类型

    描述

    blockColor

    ResourceColor

    设置滑块的颜色。

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

    trackColor

    ResourceColor

    设置滑轨的背景颜色。

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

    selectedColor

    ResourceColor

    设置滑轨的已滑动部分颜色。

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

    showSteps

    boolean

    设置当前是否显示步长刻度值。

    默认值：false

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

    showTips

    boolean

    设置滑动时是否显示百分比气泡提示。

    默认值：false

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

    说明：

    当direction的属性值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。

    tip的绘制区域为Slider自身节点的overlay。

    Slider不设置边距，或者边距比较小时，tip会被截断。

    trackThickness

    Length

    设置滑轨的粗细。

    默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp。

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

    说明：

    设置为小于0的值时，按默认值显示。

    事件

    通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。

    名称

    功能描述

    onChange(callback: (value: number, mode: SliderChangeMode) => void)

    Slider滑动时触发事件回调。

    value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。

    mode：拖动状态。

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

    说明：Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变换时触发。

    当连贯动作为拖动动作时，不触发Click状态。

    value值的变化范围为对应步长steps数组。

    SliderChangeMode枚举说明

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

    名称

    值

    描述

    Begin

    0

    手势/鼠标接触或者按下滑块。

    Moving

    1

    正在拖动滑块过程中。

    End

    2

    手势/鼠标离开滑块。

    Click

    3

    点击滑动条使滑块位置移动。

    Slider定义介绍

    1. interface SliderInterface {
    2.   (options?: SliderOptions): SliderAttribute;
    3. }
    4.  
    5. // 配置参数
    6. declare interface SliderOptions {
    7.   value?: number;
    8.   min?: number;
    9.   max?: number;
    10.   step?: number;
    11.   style?: SliderStyle;
    12.   direction?: Axis;
    13.   reverse?: boolean;
    14. }
    • options：Slider 接收一个 SliderOptions 类型的可选参数 options ，SliderOptions 参数说明如下：
      • value：滑动条当前进度值。
      • min：设置滑动条设置最小值。
      • max：设置滑动条设置最大值，默认为 100 。
      • step：设置滑动条滑动跳动值，当设置相应的 step 时，Slider为间歇滑动。
      • style：设置滑动条的滑块样式。
      • direction：设置滑动条滑动方向为水平或竖直方向。
      • reverse：设置滑动条取值范围是否反向。

    简单样例如下所示：

    1. @Entry @Component struct Index {
    2.  
    3.   build() {
    4.     Column({space: 10}) {
    5.       Slider({
    6.         value: 20,
    7.         min: 0,
    8.         max: 100,
    9.         step: 1,
    10.         style: SliderStyle.InSet,
    11.         direction: Axis.Horizontal,
    12.         reverse: false
    13.       })
    14.       .width(260)
    15.       .height(60)
    16.       .backgroundColor(Color.Green)
    17.  
    18.       Slider({
    19.         value: 20,
    20.         min: 0,
    21.         max: 100,
    22.         step: 10,
    23.         style: SliderStyle.OutSet,
    24.         direction: Axis.Horizontal,
    25.         reverse: false
    26.       })
    27.       .width(260)
    28.       .height(60)
    29.       .backgroundColor(Color.Green)
    30.     }
    31.     .padding(10)
    32.     .size({ width: "100%", height: '100%' })
    33.   }
    34. }

     

    Slider属性介绍

    1. declare class SliderAttribute extends CommonMethod<SliderAttribute> {
    2.   blockColor(value: ResourceColor): SliderAttribute;
    3.   trackColor(value: ResourceColor): SliderAttribute;
    4.   selectedColor(value: ResourceColor): SliderAttribute;
    5.   minLabel(value: string): SliderAttribute;
    6.   maxLabel(value: string): SliderAttribute;
    7.   showSteps(value: boolean): SliderAttribute;
    8.   showTips(value: boolean): SliderAttribute;
    9.   trackThickness(value: Length): SliderAttribute;
    10. }

    • blockColor：设置滑块的颜色。

    • trackColor：设置滑轨的背景颜色。

    • selectedColor：设置滑轨的已滑动颜色。

      简单样例代码如下所示：

      1. Slider({
      2.   value: 20,
      3.   min: 0,
      4.   max: 100,
      5.   step: 1,
      6.   style: SliderStyle.OutSet,
      7.   direction: Axis.Horizontal,
      8.   reverse: false
      9. })
      10. .width(260)
      11. .height(40)
      12. .backgroundColor("#ccc")
      13.  
      14. Slider({
      15.   value: 20,
      16.   min: 0,
      17.   max: 100,
      18.   step: 10,
      19.   style: SliderStyle.OutSet,
      20.   direction: Axis.Horizontal,
      21.   reverse: false
      22. })
      23. .width(260)
      24. .height(40)
      25. .backgroundColor("#aabbcc")
      26. .blockColor(Color.Green)    // 设置滑块颜色
      27. .trackColor(Color.Blue)   // 设置滑轨颜色
      28. .selectedColor(Color.Yellow) // 设置滑轨的已滑动颜色

      样例运行结果如下图所示：

    • minLabel：设置滑动条最小值处的标签。

    • maxLabel：设置滑动条最大值处的标签。

    简单样例如下所示：

    1. Slider({
    2.   value: 20,
    3.   min: 0,
    4.   max: 100,
    5.   step: 1,
    6.   style: SliderStyle.OutSet,
    7.   direction: Axis.Horizontal,
    8.   reverse: false
    9. })
    10. .width(260)
    11. .height(40)
    12. .backgroundColor("#ccc")
    13.  
    14. Slider({
    15.   value: 20,
    16.   min: 0,
    17.   max: 100,
    18.   step: 10,
    19.   style: SliderStyle.OutSet,
    20.   direction: Axis.Horizontal,
    21.   reverse: false
    22. })
    23. .width(260)
    24. .height(40)
    25. .backgroundColor("#aabbcc")
    26. .blockColor(Color.Yellow)    // 设置滑块颜色
    27. .trackColor(Color.Pink)   // 设置滑轨颜色
    28. .selectedColor(Color.Green) // 设置滑轨的已滑动颜色
    29. //.minLabel("最小值")        // 设置最小值标签
    30. //.maxLabel("最大值")        // 设置最大值标签

    样例运行结果如下图所示：

    • showSteps：设置当前是否显示步长刻度值。

    • showTips：设置滑动时是否显示气泡提示百分比。

    • trackThickness：设置滑动条粗细

    1. @Entry @Component struct Index {
    2.  
    3.   build() {
    4.     Column({ space: 10 }) {
    5.       Slider({
    6.         value: 20,
    7.         min: 0,
    8.         max: 100,
    9.         step: 1,
    10.         style: SliderStyle.OutSet,
    11.         direction: Axis.Horizontal,
    12.         reverse: false
    13.       })
    14.         .width(260)
    15.         .height(40)
    16.         .backgroundColor("#ccc")
    17.  
    18.       Slider({
    19.         value: 20,
    20.         min: 0,
    21.         max: 0,
    22.         step: 10,
    23.         style: SliderStyle.OutSet,
    24.         direction: Axis.Horizontal,
    25.         reverse: false
    26.       })
    27.         .width(260)
    28.         .height(40)
    29.         .backgroundColor("#aabbcc")
    30.         .blockColor(Color.Yellow)    // 设置滑块颜色
    31.         .trackColor(Color.Pink)   // 设置滑轨颜色
    32.         .selectedColor(Color.Green) // 设置滑轨的已滑动颜色
    33.         // .minLabel("最小值")        // 设置最小值标签
    34.         // .maxLabel("最大值")        // 设置最大值标签
    35.         .showSteps(true)          // 设置显示步长
    36.         .showTips(true)           // 设置显示进度
    37.         .trackThickness(5)        // 设置滚动条宽度
    38.     }
    39.   }
    40.   }

    简单样例如下所示：

    Slider事件介绍

    1. declare class SliderAttribute extends CommonMethod<SliderAttribute> {
    2.   onChange(callback: (value: number, mode: SliderChangeMode) => void): SliderAttribute;
    3. }
    • onChange：滑动条滑动时触发事件回调，value 表示当前进度值；mode 表示滑动条的拖动状态，SliderChangeMode 定义了以下 3 种类型：
      • Begin：用户开始拖动滑块。
      • Moving：用户拖动滑块中。
      • End：用户结束拖动滑块。

    完整案例

    1. @Entry
    2. @Component
    3. struct SliderTest {
    4.   @State outSetValue: number = 40
    5.   @State inSetValue: number = 40
    6.   @State outVerticalSetValue: number = 40
    7.   @State inVerticalSetValue: number = 40
    8.  
    9.   build() {
    10.     Column({ space: 10 }) {
    11.       Row() {
    12.         Slider({
    13.           value: this.outSetValue,
    14.           min: 0,
    15.           max: 100,
    16.           step: 1,
    17.           style: SliderStyle.OutSet
    18.         })
    19.           .blockColor(Color.Green)
    20.           .selectedColor(Color.Gray)
    21.           .trackColor(Color.Brown)
    22.           .showSteps(true)
    23.           .showTips(true)
    24.           .trackThickness(4)
    25.           .onChange((value: number, mode: SliderChangeMode) => {
    26.             this.outSetValue = value
    27.           })
    28.         Text(this.outSetValue.toFixed(0))
    29.           .fontSize(16)
    30.       }
    31.       .padding({ top: 50 })
    32.       .width('80%')
    33.  
    34.       Row() {
    35.         Slider({
    36.           value: this.inSetValue,
    37.           min: 0,
    38.           max: 100,
    39.           step: 1,
    40.           style: SliderStyle.InSet
    41.         })
    42.           .blockColor(0xCCCCCC)
    43.           .trackColor(Color.Black)
    44.           .trackThickness(10)
    45.           .selectedColor(0xCCCCCC)
    46.           .showSteps(false)
    47.           .showTips(false)
    48.           .onChange((value: number, mode: SliderChangeMode) => {
    49.             this.inSetValue = value
    50.           })
    51.         Text(this.inSetValue.toFixed(0))
    52.           .fontSize(16)
    53.       }
    54.       .width('80%')
    55.  
    56.       Row() {
    57.         Column() {
    58.           Slider({
    59.             value: this.outVerticalSetValue,
    60.             min: 0,
    61.             max: 80,
    62.             step: 1,
    63.             style: SliderStyle.OutSet,
    64.             direction: Axis.Vertical
    65.           })
    66.             .blockColor(Color.Blue)
    67.             .trackColor(Color.Gray)
    68.             .selectedColor(Color.Blue)
    69.             .trackThickness(5)
    70.             .showSteps(true)
    71.             .showTips(true)
    72.             .onChange((value: number, mode: SliderChangeMode) => {
    73.               this.outVerticalSetValue = value
    74.             })
    75.           Text(this.outVerticalSetValue.toFixed(0))
    76.             .fontSize(16)
    77.         }.width('50%').height(300)
    78.  
    79.         Column() {
    80.           Slider({
    81.             value: this.inVerticalSetValue,
    82.             min: 0,
    83.             max: 90,
    84.             step: 1,
    85.             style: SliderStyle.InSet,
    86.             direction: Axis.Vertical
    87.           })
    88.             .blockColor(Color.Yellow)
    89.             .trackColor(Color.Red)
    90.             .selectedColor(Color.Green)
    91.             .showSteps(false)
    92.             .showTips(false)
    93.             .trackThickness(10)
    94.             .onChange((value: number, mode: SliderChangeMode) => {
    95.               this.inVerticalSetValue = value
    96.             })
    97.           Text(this.inVerticalSetValue.toFixed(0))
    98.             .fontSize(16)
    99.         }.width('50%').height(300)
    100.       }
    101.     }.width('100%').margin({ top: 5 })
    102.   }
    103. }

    官方案例：

    1. // xxx.ets
    2. @Entry
    3. @Component
    4. struct SliderExample {
    5.   @State outSetValueOne: number = 40
    6.   @State inSetValueOne: number = 40
    7.   @State outSetValueTwo: number = 40
    8.   @State inSetValueTwo: number = 40
    9.   @State vOutSetValueOne: number = 40
    10.   @State vInSetValueOne: number = 40
    11.   @State vOutSetValueTwo: number = 40
    12.   @State vInSetValueTwo: number = 40
    13.  
    14.   build() {
    15.     Column({ space: 8 }) {
    16.       Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
    17.       Row() {
    18.         Slider({
    19.           value: this.outSetValueOne,
    20.           min: 0,
    21.           max: 100,
    22.           style: SliderStyle.OutSet
    23.         })
    24.           .showTips(true)
    25.           .onChange((value: number, mode: SliderChangeMode) => {
    26.             this.outSetValueOne = value
    27.             console.info('value:' + value + 'mode:' + mode.toString())
    28.           })
    29.         // toFixed(0)将滑动条返回值处理为整数精度
    30.         Text(this.outSetValueOne.toFixed(0)).fontSize(12)
    31.       }
    32.       .width('80%')
    33.       Row() {
    34.         Slider({
    35.           value: this.outSetValueTwo,
    36.           step: 10,
    37.           style: SliderStyle.OutSet
    38.         })
    39.           .showSteps(true)
    40.           .onChange((value: number, mode: SliderChangeMode) => {
    41.             this.outSetValueTwo = value
    42.             console.info('value:' + value + 'mode:' + mode.toString())
    43.           })
    44.         Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
    45.       }
    46.       .width('80%')
    47.  
    48.       Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
    49.       Row() {
    50.         Slider({
    51.           value: this.inSetValueOne,
    52.           min: 0,
    53.           max: 100,
    54.           style: SliderStyle.InSet
    55.         })
    56.           .blockColor('#191970')
    57.           .trackColor('#ADD8E6')
    58.           .selectedColor('#4169E1')
    59.           .showTips(true)
    60.           .onChange((value: number, mode: SliderChangeMode) => {
    61.             this.inSetValueOne = value
    62.             console.info('value:' + value + 'mode:' + mode.toString())
    63.           })
    64.         Text(this.inSetValueOne.toFixed(0)).fontSize(12)
    65.       }
    66.       .width('80%')
    67.       Row() {
    68.         Slider({
    69.           value: this.inSetValueTwo,
    70.           step: 10,
    71.           style: SliderStyle.InSet
    72.         })
    73.           .blockColor('#191970')
    74.           .trackColor('#ADD8E6')
    75.           .selectedColor('#4169E1')
    76.           .showSteps(true)
    77.           .onChange((value: number, mode: SliderChangeMode) => {
    78.             this.inSetValueTwo = value
    79.             console.info('value:' + value + 'mode:' + mode.toString())
    80.           })
    81.         Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
    82.       }
    83.       .width('80%')
    84.  
    85.       Row() {
    86.         Column() {
    87.           Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
    88.           Row() {
    89.             Slider({
    90.               value: this.vOutSetValueOne,
    91.               style: SliderStyle.OutSet,
    92.               direction: Axis.Vertical
    93.             })
    94.               .blockColor('#191970')
    95.               .trackColor('#ADD8E6')
    96.               .selectedColor('#4169E1')
    97.               .showTips(true)
    98.               .onChange((value: number, mode: SliderChangeMode) => {
    99.                 this.vOutSetValueOne = value
    100.                 console.info('value:' + value + 'mode:' + mode.toString())
    101.               })
    102.             Slider({
    103.               value: this.vOutSetValueTwo,
    104.               step: 10,
    105.               style: SliderStyle.OutSet,
    106.               direction: Axis.Vertical
    107.             })
    108.               .blockColor('#191970')
    109.               .trackColor('#ADD8E6')
    110.               .selectedColor('#4169E1')
    111.               .showSteps(true)
    112.               .onChange((value: number, mode: SliderChangeMode) => {
    113.                 this.vOutSetValueTwo = value
    114.                 console.info('value:' + value + 'mode:' + mode.toString())
    115.               })
    116.           }
    117.         }.width('50%').height(300)
    118.  
    119.         Column() {
    120.           Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
    121.           Row() {
    122.             Slider({
    123.               value: this.vInSetValueOne,
    124.               style: SliderStyle.InSet,
    125.               direction: Axis.Vertical,
    126.               reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
    127.             })
    128.               .showTips(true)
    129.               .onChange((value: number, mode: SliderChangeMode) => {
    130.                 this.vInSetValueOne = value
    131.                 console.info('value:' + value + 'mode:' + mode.toString())
    132.               })
    133.             Slider({
    134.               value: this.vInSetValueTwo,
    135.               step: 10,
    136.               style: SliderStyle.InSet,
    137.               direction: Axis.Vertical,
    138.               reverse: true
    139.             })
    140.               .showSteps(true)
    141.               .onChange((value: number, mode: SliderChangeMode) => {
    142.                 this.vInSetValueTwo = value
    143.                 console.info('value:' + value + 'mode:' + mode.toString())
    144.               })
    145.           }
    146.         }.width('50%').height(300)
    147.       }
    148.     }.width('100%')
    149.   }
    150. }

    多选框组件

    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)

    当选中状态发生变化时，触发该回调。

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

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

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

    示例

    1. // xxx.ets
    2. @Entry
    3. @Component
    4. struct CheckboxExample {
    5.  
    6.   build() {
    7.     Row() {
    8.       Checkbox({name: 'checkbox1',  group: 'checkboxGroup'})
    9.         .select(true)
    10.         .selectedColor(0xed6f21)
    11.         .onChange((value: boolean) => {
    12.           console.info('Checkbox1 change is'+ value)
    13.         })
    14.       Checkbox({name: 'checkbox2',  group: 'checkboxGroup'})
    15.         .select(false)
    16.         .selectedColor(0x39a2db)
    17.         .onChange((value: boolean) => {
    18.           console.info('Checkbox2 change is'+ value)
    19.         })
    20.     }
    21.   }
    22. }

     多选框群组组件

    CheckboxGroup

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

    说明

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

    子组件

    无

    接口

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

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

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

    参数:

    参数名

    参数类型

    必填

    参数描述

    group

    string

    否

    群组名称。

    说明：

    多个相同群组名称的CheckboxGroup，仅第一个CheckboxGroup生效。

    属性

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

    名称

    参数类型

    描述

    selectAll

    boolean

    设置是否全选。

    默认值：false，若同组的Checkbox显式设置select，则Checkbox的优先级高。

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

    selectedColor

    ResourceColor

    设置被选中或部分选中状态的颜色。

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

    事件

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

    名称

    功能描述

    onChange (callback: (event: CheckboxGroupResult) => void )

    CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。

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

    CheckboxGroupResult对象说明

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

    名称

    类型

    描述

    name

    Array

    群组内所有被选中的多选框名称。

    status

    SelectStatus

    选中状态。

    SelectStatus枚举说明

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

    名称

    描述

    All

    群组多选择框全部选择。

    Part

    群组多选择框部分选择。

    None

    群组多选择框全部没有选择。

    示例

    1. // xxx.ets
    2. @Entry
    3. @Component
    4. struct CheckboxExample {
    5.   build() {
    6.     Scroll() {
    7.       Column() {
    8.         // 全选按钮
    9.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
    10.           CheckboxGroup({ group: 'checkboxGroup' })
    11.             .selectedColor('#007DFF')
    12.             .onChange((itemName: CheckboxGroupResult) => {
    13.               console.info("checkbox group content" + JSON.stringify(itemName))
    14.             })
    15.           Text('Select All').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
    16.         }
    17.  
    18.         // 选项1
    19.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
    20.           Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
    21.             .selectedColor('#007DFF')
    22.             .onChange((value: boolean) => {
    23.               console.info('Checkbox1 change is' + value)
    24.             })
    25.           Text('Checkbox1').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
    26.         }.margin({ left: 36 })
    27.  
    28.         // 选项2
    29.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
    30.           Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
    31.             .selectedColor('#007DFF')
    32.             .onChange((value: boolean) => {
    33.               console.info('Checkbox2 change is' + value)
    34.             })
    35.           Text('Checkbox2').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
    36.         }.margin({ left: 36 })
    37.  
    38.         // 选项3
    39.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
    40.           Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
    41.             .selectedColor('#007DFF')
    42.             .onChange((value: boolean) => {
    43.               console.info('Checkbox3 change is' + value)
    44.             })
    45.           Text('Checkbox3').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
    46.         }.margin({ left: 36 })
    47.       }
    48.     }
    49.   }
    50. }

  • 相关阅读:
    [漏洞分析] CVE-2023-38545 curl“史上最严重的漏洞“分析
    英雄联盟｜王者｜穿越火线 bgm AI配乐大赛分享
    CIPU落地专有云：是“小众需求”还是“机会之门”？
    臭名昭著的黑客组织REvil全员被捕，现场缴获现金物品超550万美元
    169. 多数元素 --力扣 --JAVA
    Java概述与基础
    RabbitMQ整理
    python作图
    【C语言】探索数据的存储(浮点型篇)
    JSP汽车维修服务管理系统myeclipse开发SqlServer数据库bs框架java编程web网页结构
  • 原文地址：https://blog.csdn.net/qq_58213084/article/details/138570614