【HarmonyOS4.0】第六篇-ArkUI系统组件(二)

六、选择器组件

ArkUI开发框架提供了一系列比较常用的选择器，比如文本选择器 TextPicker 、时间选择器 TimePicker 以及日期选择器 DatePicker

6.1.TimePicker

TimePicker 是选择时间的滑动选择器组件，默认以 00:00 至 23:59 的时间区创建滑动选择器。

6.1.1：TimePicker定义

接口：默认以24小时的时间区间创建滑动选择器

TimePicker(options?: {selected?: Date})

options：创建时间选择器的可选配置参数， TimePickerOptions 说明如下：

• selected：设置选择器的默认选中时间。

参数：

参数名	参数类型	必填	参数描述
selected	Date	否	设置选中项的时间。默认值：当前系统时间

案例如下所示：

@Entry
@Component
struct TimePickerPage{
  build() {
    Column(){
      TimePicker({selected: new Date()}) //设置默认当前事件
        .width(200)
        .height(150)
        .backgroundColor("#40E0D0")
    }
    .width("100%")
    .padding(20)
  }
}

预览结果如下：

6.1.2.TimePicker属性介绍

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

名称	参数类型	描述
useMilitaryTime	boolean	展示时间是否为24小时制，不支持动态修改。默认值：false

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

名称	功能描述
onChange(callback: (value: TimePickerResult ) => void)	选择时间时触发该事件。

案例如下：

@Entry
@Component
struct TimePickerPage{
  @State isMilitaryTime:boolean = true //默认状态为true
  @State selectedTime:Date = new Date('1998-07-27T08:00:00')

  build() {
    Column(){  // 创建一个垂直布局的列
      Button('切换：12小时制/24小时制')  // 创建一个按钮，显示文本为"切换：12小时制/24小时制"
        .margin({top:30,bottom:30})  // 设置按钮的上下外边距为30
        .onClick(()=>{  // 监听按钮的点击事件
          //点击一次就取反，以此来控制切换
          this.isMilitaryTime = !this.isMilitaryTime;  // 点击按钮时切换 isMilitaryTime 状态变量的值
        })

      TimePicker({selected:this.selectedTime})  // 创建一个时间选择器，设置默认选中时间为 this.selectedTime
        .useMilitaryTime(this.isMilitaryTime)  // 根据 isMilitaryTime 状态变量切换时间制（12小时制或24小时制）
        .onChange((value:TimePickerResult)=>{  // 监听时间选择器数值变化事件
          //设置小时，单位：分钟
          this.selectedTime.setHours(value.hour, value.minute);  // 根据选择的时间设置 this.selectedTime 的小时和分钟
          console.info('select current date is：'+JSON.stringify(value));  // 在控制台输出选择的时间信息
        })
    }
    .width("100%")
    .padding(20)
  }
}

预览效果如下：

6.2.DatePicker

DatePicker 是选择日期的滑动选择器组件，默认以 1970-1-1 至 2100-12-31 的日期区间创建滑动选择器。

6.2.1.DatePicker定义

接口：

DatePicker(options?: {start?: Date, end?: Date, selected?: Date})

上面的接口可以根据指定范围的Date创建可以选择日期的滑动选择器，参数:

参数名	参数类型	必填	参数描述
start	Date	否	指定选择器的起始日期。默认值：Date('1970-1-1')
end	Date	否	指定选择器的结束日期。默认值：Date('2100-12-31')
selected	Date	否	设置选中项的日期。默认值：当前系统日期

案例如下：

@Entry
@Component
struct DatePickPage{
  @State isMilitaryTime:boolean = true //默认状态为true
  @State selectedTime:Date = new Date('1998-07-27T08:00:00')

  build() {
    Column(){  // 创建一个垂直布局的列
      DatePicker({
        start:new Date("2012-1-1"), // 设置开始时间
        end:new Date("2032-1-1")    // 设置结束时间
      })
        .width(255)
        .height(120)
        .backgroundColor("#AFEEEE")
    }
    .width("100%")
    .padding(20)
  }
}

执行后效果如下：

6.2.2：DatePicker属性介绍

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

名称	参数类型	描述
lunar	boolean	日期是否显示农历。- true：展示农历。- false：不展示农历。默认值：false

案例如下所示：

@Entry
@Component
struct DatePickPage{
  build() {
    Column(){  // 创建一个垂直布局的列
      DatePicker({
        start:new Date("2012-1-1"), // 设置开始时间
        end:new Date("2032-1-1")    // 设置结束时间
      })
        .lunar(true)    //设置显示农历
        .width(255)
        .height(120)
        .backgroundColor("#AFEEEE")
    }
    .width("100%")
    .padding(20)
  }
}

预览效果如下：

6.2.3：DatePicker事件介绍

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

名称	功能描述
onChange(callback: (value: DatePickerResult) => void)	选择日期时触发该事件。

DatePickerResult对象说明：

名称	参数类型	描述
year	number	选中日期的年。
month	number	选中日期的月(0~11)，0表示1月，11表示12月。
day	number	选中日期的日

案例如下：点击按钮可以切换农历和公历

@Entry
@Component
struct DatePickPage02{
  @State isLunar:boolean = false //默认状态为true
  @State selectedDate:Date = new Date('1998-07-27T08:00:00')

  build() {
    Column(){  // 创建一个垂直布局的列
      Button("切换公历/农历")  // 创建一个按钮，显示文本为"切换公历/农历"
        .margin({top:30,bottom:30})  // 设置按钮的上下外边距为30
        .onClick(()=>{  // 监听按钮的点击事件
          this.isLunar = !this.isLunar;  // 点击按钮时切换 isLunar 状态变量的值
        })

      DatePicker({  // 创建一个日期选择器
        start: new Date('1970-1-1'),  // 设置起始日期为1970年1月1日
        end: new Date('2099-1-1'),  // 设置结束日期为2099年1月1日
        selected: this.selectedDate  // 设置默认选中日期为 this.selectedDate
      })
        .lunar(this.isLunar)  // 根据 isLunar 状态变量切换日期显示为公历或农历
        .onChange((value:DatePickerResult)=>{  // 监听日期选择器数值变化事件
          this.selectedDate.setFullYear(value.year, value.month, value.day);  // 根据选择的日期设置 this.selectedDate 的年、月、日，切换过去就是之前选择的时间
          console.info('select current date is: '+JSON.stringify(value));  // 在控制台输出选择的日期信息
        })
    }
    .width("100%")
    .padding(20)
  }
}

预览效果如下：

七、二维码组件

二维码的使用场景，比如扫码添加好友，扫码骑车，扫码支付等等，ArkUI开发框架提供了 RQCode 组件生成一个二维码。

接口：

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卡片中使用。

案例如下：

@Entry
@Component
struct QRCodePage {
  @State value: string = "念去去，千里烟波暮霭程程楚天阔";

  build() {
    Column({space:5}){
      Text("不带颜色")
        .fontSize(25)
        .width("90%")
        .fontColor("#696969")
        .fontWeight(FontWeight.Bold)
        .textAlign(TextAlign.Center)
      QRCode(this.value).width(200).height(200)

      Text("设置二维码颜色")
        .fontSize(25)
        .width("90%")
        .fontColor("#696969")
        .fontWeight(FontWeight.Bold)
        .textAlign(TextAlign.Center)
      QRCode(this.value).width(200).height(200).color("#F08080")

      Text("设置二维码颜色和背景颜色")
        .fontSize(25)
        .width("90%")
        .fontColor("#696969")
        .fontWeight(FontWeight.Bold)
        .textAlign(TextAlign.Center)
      QRCode(this.value).width(200).height(200).color("#F08080").backgroundColor("#D3D3D3")

    }.width("100%").margin({top:10})
  }
}

设置后如下：

八、开关组件

ArkUI开发框架 Toggle组件提供勾选框样式、状态按钮样式及开关样式。

子组件：仅当ToggleType为Button时可包含子组件。

8.1.Toggle定义

接口

Toggle(options: { type: ToggleType, isOn?: boolean })

参数:

参数名	参数类型	必填	参数描述
type	ToggleType	是	开关的样式。
isOn	boolean	否	开关是否打开，true：打开，false：关闭。默认值：false

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

名称	描述
Checkbox	提供单选框样式。说明：通用属性margin的默认值为：{top: 12 vp,right: 12 vp,bottom: 12 vp,left: 12 vp}
Button	提供状态按钮样式，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。
Switch	提供开关样式。说明：通用属性margin的默认值为：{top: 14 vp,right: 6 vp,bottom: 6 vp,left: 14 vp}

按钮样式案例如下：

@Entry
@Component
struct TogglePage {
  build() {
    Column({space:20}){
      Row(){
        Text("开关样式：").fontWeight(FontWeight.Bold).fontSize(25)
        Toggle({type:ToggleType.Switch}).width(30)
      }
      .width("100%")
      .justifyContent(FlexAlign.Center)

      Row(){
        Text("单选框样式：").fontWeight(FontWeight.Bold).fontSize(25)
        Toggle({type:ToggleType.Checkbox}).width(30)
      }
      .width("100%")
      .justifyContent(FlexAlign.Center)

      //按钮样式
      Row(){
        Toggle({type:ToggleType.Button}){
          Text("注册").fontSize(30)
        }.width("80%").height(50)
      }
      .width("100%")
      .justifyContent(FlexAlign.Center)
    }
    .width("100%")
    .padding({top:20})
  }
}

执行后如下：

8.2.Toggle属性介绍

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

名称	参数	参数描述
selectedColor	ResourceColor	设置组件打开状态的背景颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
switchPointColor	ResourceColor	设置Switch类型的圆形滑块颜色。说明：仅对type为ToggleType.Switch生效。从API version 9开始，该接口支持在ArkTS卡片中使用。

修改之前的代码，设置按钮的颜色如下：

@Entry
@Component
struct TogglePage {
  build() {
    Column({space:20}){
      Row(){
        Text("开关样式：").fontWeight(FontWeight.Bold).fontSize(25)
        Toggle({type:ToggleType.Switch})
          .selectedColor("#6495ED") //设置组件打开状态的背景颜色为蓝色
          .switchPointColor("#A9A9A9") //设置type是Switch的圆形滑块颜色为灰色
      }
      .width("100%")
      .justifyContent(FlexAlign.Center)

      Row(){
        Text("单选框样式：").fontWeight(FontWeight.Bold).fontSize(25)
        Toggle({type:ToggleType.Checkbox})
          .width(30)
          .selectedColor("#6495ED") //设置组件打开状态的背景颜色为蓝色
          .switchPointColor("#A9A9A9") //设置type是Switch的圆形滑块颜色为灰色
      }
      .width("100%")
      .justifyContent(FlexAlign.Center)

      //按钮样式
      Row(){
        Toggle({type:ToggleType.Button}){
          Text("注册").fontSize(30)
        }
        .width("80%")
        .height(50)
        .selectedColor("#6495ED") //设置组件打开状态的背景颜色为蓝色
        .switchPointColor("#A9A9A9") //设置type是Switch的圆形滑块颜色为灰色
      }
      .width("100%")
      .justifyContent(FlexAlign.Center)
    }
    .width("100%")
    .padding({top:20})
  }
}

执行后如下：

8.3.Toggle事件介绍

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

名称	功能描述
onChange(callback: (isOn: boolean) => void)	开关状态切换时触发该事件。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：isOn为true时，代表状态从关切换为开。isOn为false时，代表状态从开切换为关。

案例如下：

@Entry
@Component
struct TogglePage {
  build() {
    Column({space: 20}) {
      Row(){
        Toggle({type: ToggleType.Switch}).size({width: 40, height:40})

        Toggle({type:ToggleType.Switch})
          .selectedColor('#007DFF')
          .switchPointColor('#FFFFFF')
          .onChange((isOn:boolean)=>{
            //修改开关状态
            console.log(`开关状态为：${isOn}`)
          })
          .size({width: 40, height:40})
      }
      .width("100%")
      .padding({top:20})
      .justifyContent(FlexAlign.Center)

      Row(){
        Toggle({type: ToggleType.Checkbox}).size({width: 40, height:40})

        Toggle({type:ToggleType.Checkbox})
          .selectedColor('#007DFF')
          .switchPointColor('#FFFFFF')
          .onChange((isOn:boolean)=>{
            //修改开关状态
            console.log(`开关状态为：${isOn}`)
          })
          .size({width: 40, height:40})
      }
      .width("100%")
      .padding({top:20})
      .justifyContent(FlexAlign.Center)


      Row(){
        Toggle({type: ToggleType.Button}){
          Text("按钮样式").fontSize(20)
        }.size({width: 140, height: 40})

        Toggle({type: ToggleType.Button}){
          Text("按钮样式").fontSize(20)
        }
        .size({width: 140, height: 40})
        .selectedColor('#007DFF')
        .switchPointColor('#FFFFFF')
        .onChange((isOn:boolean)=>{
          //修改开关状态
          console.log(`开关状态为：${isOn}`)
        })

      }
      .width("100%")
      .padding(20)
      .justifyContent(FlexAlign.Center)
    }
    .width("100%")
    .padding({ top: 20 })
  }
}

预览后效果如下：

九、提示框组件

ArkUI开发框架提供了@ohos.promptAction (弹窗)，可以创建并显示文本提示框、对话框和操作菜单。

9.1.@ohos.promptAction (弹窗)定义

①.导入模块：

import promptAction from '@ohos.promptAction'

②.promptAction.showToast，接口说明：

showToast(options: ShowToastOptions): void

③.参数：

参数名	类型	必填	说明
options	ShowToastOptions	是	文本弹窗选项。

ShowToastOptions选项说明

名称	类型	必填	说明
message	string| Resource9+	是	显示的文本信息。默认字体为'Harmony Sans'，不支持设置其他字体。
duration	number	否	默认值1500ms，取值区间：1500ms-10000ms。若小于1500ms则取默认值，若大于10000ms则取上限值10000ms。
bottom	string| number	否	设置弹窗边框距离屏幕底部的位置。

④.错误码：以下错误码的详细介绍请参见ohos.promptAction(弹窗)错误码。

错误码ID	错误信息
100001	if UI execution context not found.

简答案例如下：

import promptAction from '@ohos.promptAction';
@Entry
@Component
struct PromptActionPage01 {
  build() {
    Column() {
      Button("点击出现弹窗")
        .size({width:150, height:50})
        .type(ButtonType.Normal)
        .borderRadius(12)
        .onClick(()=>{
          try {
            promptAction.showToast({
              message: '注册成功', //显示的文本信息。默认字体为'Harmony Sans'，不支持设置其他字体。
              duration: 2000,    //弹出显示时间，默认值1500ms。
            });
          } catch (error) {
            console.error(`showToast args error code is ${error.code}, message is ${error.message}`);
          };
        })
    }
    .width("100%")
    .margin({top:40})
  }
}

预览显示如下：

9.2.promptAction.showDialog

①.创建并显示对话框，对话框响应结果异步返回。接口如下：

showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSuccessResponse>):void

②.参数：

参数名	类型	必填	说明
options	ShowDialogOptions	是	页面显示对话框信息描述。
callback	AsyncCallback	是	对话框响应结果回调。

ShowDialogOptions对话框的选项说明

名称	类型	必填	说明
title	string| Resource9+	否	标题文本。
message	string| Resource9+	否	内容文本。
buttons	[Button,Button?,Button?]	否	对话框中按钮的数组，结构为：{text:'button', color: '#666666'}，支持1-3个按钮。其中第一个为positiveButton；第二个为negativeButton；第三个为neutralButton。

③.ShowDialogSuccessResponse对话框的响应结果。

名称	类型	必填	说明
index	number	否	选中按钮在buttons数组中的索引。

案例如下：

import promptAction from '@ohos.promptAction'; // 导入弹窗组件

@Entry // 入口标记
@Component // 组件标记
struct ShowDialogPage { // 定义名为 ShowDialogPage 的组件
  build() { // 构建方法
    Column() { // 列布局
      Button("点击出现弹窗") // 按钮文本
        .size({width:150, height:50}) // 按钮尺寸
        .type(ButtonType.Normal) // 按钮类型为普通
        .borderRadius(12) // 按钮边框圆角半径
        .onClick(()=>{ // 点击事件处理函数
          try { // 尝试执行以下代码
            promptAction.showDialog({ // 调用弹窗组件的showDialog方法
              title: "是否现在开始答题？", // 弹窗标题文本
              message: "答题时间100分钟，一旦开始不能关闭", // 弹窗内容文本
              buttons: [ // 弹窗中的按钮数组
                {text: "同意", color:"#000000"}, // 同意按钮，文本为"同意"，颜色为黑色
                {text: "不同意", color:"#000000"} // 不同意按钮，文本为"不同意"，颜色为黑色
              ],
            })
              .then(data=>{ // showDialog方法返回Promise对象，处理成功时执行的回调函数
                //输出点击的按钮索引，从0开始
                console.info(`showDialog success, click button: ${data.index}`) // 打印弹窗点击按钮的索引
              }).catch(err=>{ // 处理失败时执行的回调函数
                console.info(`showDialog error: ${err}`) // 打印错误信息
            })
          } catch (error) { // 捕获try代码块中的错误
            console.error(`showDialog args error code is ${error.code}, message is ${error.message}`); // 打印错误信息
          };
        })
    }
    .width("100%") // 设置列布局宽度为100%
    .margin({top:40}) // 设置列布局上边距为40
  }
}

预览后效果如下：

9.3.promptAction.showActionMenu

①.创建并显示操作菜单，菜单响应结果异步返回。接口：

showActionMenu(options: ActionMenuOptions, callback: AsyncCallback<ActionMenuSuccessResponse>):void

②.参数：

参数名	类型	必填	说明
options	ActionMenuOptions	是	操作菜单选项。
callback	AsyncCallback	是	菜单响应结果回调。

options操作菜单的选项：

名称	类型	必填	说明
title	string| Resource9+	否	标题文本。
buttons	[Button,Button?,Button?,Button?,Button?,Button?]	是	菜单中菜单项按钮的数组，结构为：{text:'button', color: '#666666'}，支持1-6个按钮。大于6个按钮时弹窗不显示。

上面Button：菜单中的菜单项按钮的构成：

名称	类型	必填	说明
text	string| Resource9+	是	按钮文本内容。
color	string| Resource9+	是	按钮文本颜色。

③.返回值：

ActionMenuSuccessResponse类型，操作菜单的响应结果。

名称	类型	必填	说明
index	number	否	选中按钮在buttons数组中的索引，从0开始。

案例如下：

import promptAction from '@ohos.promptAction'
@Entry
@Component
struct ShowActionMenuPage {
  build() {
    Column() { // 列布局
      Button("点击出现弹窗") // 按钮文本
        .size({width:150, height:50}) // 按钮尺寸
        .type(ButtonType.Normal) // 按钮类型为普通
        .borderRadius(12) // 按钮边框圆角半径
        .onClick(()=>{ // 点击事件处理函数
          try { // 尝试执行以下代码
            promptAction.showActionMenu({ // 调用弹窗组件的showDialog方法
              title: "退休年份", // 弹窗标题文本
              buttons: [ // 弹窗中的按钮数组，每一个是一个选项
                {text: "2050", color:"#000000"},
                {text: "2060", color:"#000000"},
                {text: "2070", color:"#000000"}
              ],
            })
              .then(data=>{ // showDialog方法返回Promise对象，处理成功时执行的回调函数
                //输出点击的按钮索引，从0开始
                console.info(`showActionMenu success, click button: ${data.index}`) // 打印弹窗点击按钮的索引
              }).catch(err=>{ // 处理失败时执行的回调函数
              console.info(`showActionMenu error: ${err}`) // 打印错误信息
            })
          } catch (error) { // 捕获try代码块中的错误
            console.error(`showActionMenu args error code is ${error.code}, message is ${error.message}`); // 打印错误信息
          };
        })
    }
    .width("100%") // 设置列布局宽度为100%
    .margin({top:40}) // 设置列布局上边距为40
  }
}

执行后效果如下：

选择菜单后，上面的代码会打印出，选择的索引ID，如下：

十、滑动条组件

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

10.1.Slider定义介绍

接口：

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

参数：

参数名	参数类型	必填	参数描述
value	number	否	当前进度值。默认值：0
min	number	否	设置最小值。默认值：0
max	number	否	设置最大值。默认值：100
step	number	否	设置滑动条滑动步长。默认值：1
style	SliderStyle	否	设置滑动条的滑块样式。默认值：SliderStyle.OutSet
direction8+	Axis	否	设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal
reverse8+	boolean	否	设置滑动条取值范围是否反向。说明：设置为false时，水平方向滑动条为从左向右滑动，竖直方向滑动条从上向下滑动，设置为true时，水平方向滑动条为从右向左滑动，竖直方向滑动条从下向上滑动。默认值：false

style滑块样式SliderStyle枚举说明

名称	描述
OutSet	滑块在滑轨上。
InSet	滑块在滑轨内。

案例演示如下：

@Entry
@Component
struct SliderPage {
  build() {
    Column({space:10}){
      Slider({
        value: 20,                             //当前的进度值
        min:0,                                 //设置最小值
        max:100,                               //设置最大值
        step:1,                                //设置滑动条滑动步长
        style: SliderStyle.InSet,              //设置滑动条的滑动样式  InSet滑块在滑轨内
        direction: Axis.Horizontal,            //设置滑动条为水平方法
        reverse:false                          //设置滑动条取值范围是否反向，false正向滑动
      }).width(260)
        .height(60)
        .backgroundColor("#F5F5DC")

      Slider({
        value: 20,                             //当前的进度值
        min:0,                                 //设置最小值
        max:100,                               //设置最大值
        step:1,                                //设置滑动条滑动步长
        style: SliderStyle.OutSet,             //设置滑动条的滑动样式 OutSet滑块在滑轨外
        direction: Axis.Horizontal,            //设置滑动条为水平方法
        reverse:false                          //设置滑动条取值范围是否反向，false正向滑动
      })
        .width(260)
        .height(60)
        .backgroundColor("#F5F5DC")

    }
    .width("100%")
    .height("100%")
    .margin({top:20})
  }
}

预览效果如下：

10.2.属性

滑动场景属性如下：

名称	参数类型	描述
blockColor	ResourceColor	设置滑块的颜色。
trackColor	ResourceColor	设置滑轨的背景颜色。
selectedColor	ResourceColor	设置滑轨的已滑动颜色。
showSteps	boolean	设置当前是否显示步长刻度值。默认值：false
showTips	boolean	设置滑动时是否显示气泡提示百分比。默认值：false
trackThickness	Length	设置滑轨的粗细。
maxLabel（已废弃）	string	设置最大标签。
minLabel（已废弃）	string	设置最小标签。

案例1：设置滑块的颜色、设置滑轨的背景颜色、设置滑轨的已滑动颜色。

@Entry
@Component
struct SliderPage {
  build() {
    Column({space:10}){
      Slider({
        value: 20,                             //当前的进度值
        min:0,                                 //设置最小值
        max:100,                               //设置最大值
        step:1,                                //设置滑动条滑动步长
        style: SliderStyle.InSet,              //设置滑动条的滑动样式  InSet滑块在滑轨内
        direction: Axis.Horizontal,            //设置滑动条为水平方法
        reverse:false                          //设置滑动条取值范围是否反向，false正向滑动
      }).width(260)
        .height(60)
        .backgroundColor("#F5F5DC")

      Slider({
        value: 20,                             //当前的进度值
        min:0,                                 //设置最小值
        max:100,                               //设置最大值
        step:1,                                //设置滑动条滑动步长
        style: SliderStyle.OutSet,             //设置滑动条的滑动样式 OutSet滑块在滑轨外
        direction: Axis.Horizontal,            //设置滑动条为水平方法
        reverse:false                          //设置滑动条取值范围是否反向，false正向滑动
      })
        .width(260)
        .height(60)
        .backgroundColor("#F5F5DC")
        .blockColor(Color.Red)         //设置滑动颜色
        .trackColor(Color.Pink)        //设置滑轨颜色
        .selectedColor(Color.Green)      //设置滑动的已滑动颜色
    }
    .width("100%")
    .height("100%")
    .margin({top:20})
  }
}

预览效果如下：

案例2：:设置当前显示步长刻度值、设置滑动时是否显示气泡提示百分比、设置滑动条粗细。

@Entry
@Component
struct SliderPage {
  build() {
    Column({space:10}){
      Slider({
        value: 20,                             //当前的进度值
        min:0,                                 //设置最小值
        max:100,                               //设置最大值
        step:1,                                //设置滑动条滑动步长
        style: SliderStyle.InSet,              //设置滑动条的滑动样式  InSet滑块在滑轨内
        direction: Axis.Horizontal,            //设置滑动条为水平方法
        reverse:false                          //设置滑动条取值范围是否反向，false正向滑动
      }).width(260)
        .height(60)
        .backgroundColor("#F5F5DC")

      Slider({
        value: 20,                             //当前的进度值
        min:0,                                 //设置最小值
        max:100,                               //设置最大值
        step:10,                                //设置滑动条滑动步长
        style: SliderStyle.OutSet,             //设置滑动条的滑动样式 OutSet滑块在滑轨外
        direction: Axis.Horizontal,            //设置滑动条为水平方法
        reverse:false                          //设置滑动条取值范围是否反向，false正向滑动
      })
        .width(260)
        .height(60)
        .backgroundColor("#F5F5DC")
        .blockColor(Color.Red)         //设置滑动颜色
        .trackColor(Color.Pink)        //设置滑轨颜色
        .selectedColor(Color.Green)    //设置滑动的已滑动颜色
        .showSteps(true)               //设置显示步长 可以修改上面的步长后在看效果
        .showTips(true)                //设置显示进度
        .trackThickness(8)             //设置滚动条的宽度
    }
    .width("100%")
    .height("100%")
    .margin({top:20})
  }
}

预览效果如下：设置了步长为10，显示步长

10.3.事件

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

名称	功能描述
onChange(callback: (value: number, mode: SliderChangeMode) => void)	Slider滑动时触发事件回调。value：当前进度值。mode：拖动状态。

SliderChangeMode枚举值为：

名称	值	描述
Begin	0	用户开始拖动滑块。
Moving	1	用户拖动滑块中。
End	2	用户结束拖动滑块。
Click	3	用户点击滑动条使滑块位置移动。

案例演示随着滚动条的拖动，修改图片显示的宽度，如下：

@Entry
@Component
struct SliderPage {
  @State imageWidth:number = 100

  build() {
    Column({space:10}){
      Row(){
        Image($r('app.media.Snip'))
          .width(this.imageWidth)
      }
      .height(300)

      Row(){
        Slider({
          value: 100,                             //当前的进度值
          min:100,                                 //设置最小值
          max:300,                               //设置最大值
          step:1,                                //设置滑动条滑动步长
          style: SliderStyle.OutSet,              //设置滑动条的滑动样式  InSet滑块在滑轨内
          direction: Axis.Horizontal,            //设置滑动条为水平方法
          reverse:false                          //设置滑动条取值范围是否反向，false正向滑动
        })
          .height(60)
          .showSteps(true)      //显示步长
          .showTips(true)       //显示进度
          .trackThickness(5)    //设置滚动条宽度
          .backgroundColor("#A9A9A9")
          .onChange((value:number)=>{
            this.imageWidth = value
          })
      }
    }
    .width("100%")
    .height("100%")
    .margin({top:20})
  }
}

执行后如下：

十一、评分条组件

项目开发中可能会有设置评分的需求，比如给用户一个弹窗，让用户给当前 APP 设置评分等场景，ArkUI开发框架提供了评分条组件 Rating 来实现这个功能。

11.1.Rating定义

提供在给定范围内选择评分的组件。接口如下：

Rating(options?: { rating: number, indicator?: boolean })

参数：

参数名	参数类型	必填	参数描述
rating	number	是	设置并接收评分值。默认值：0取值范围： [0, stars]小于0取0，大于stars取最大值stars。
indicator	boolean	否	设置评分组件作为指示器使用，不可改变评分。默认值：false, 可进行评分说明：indicator=true时，默认组件高度height=12.0vp，组件width=height * stars。indicator=false时，默认组件高度height=28.0vp，组件width=height * stars。

案例如下：

@Entry
@Component
struct RatingPage {
  build() {
    Column(){
      Rating(
        {rating:0, indicator: true}  //设置不可操作，默认值为0
      ).width(200)
        .height(60)

      Rating(
        {rating:0, indicator: false}  //设置可操作，默认值为0
      ).width(200)
        .height(60)
      
    }
    .width("100%")
    .height("100%")
    .padding(10)
  }
}

预览效果如下：

11.2.属性

名称	参数类型	描述
stars	number	设置评分总数。默认值：5从API version 9开始，该接口支持在ArkTS卡片中使用。说明：设置为小于0的值时，按默认值显示。
stepSize	number	操作评级的步长。默认值：0.5从API version 9开始，该接口支持在ArkTS卡片中使用。说明：设置为小于0.1的值时，按默认值显示。取值范围为[0.1, stars]。
starStyle	{backgroundUri: string,foregroundUri: string,secondaryUri?: string}	backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片。secondaryUri：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：startStyle属性所支持的图片类型能力参考Image组件。支持加载本地图片和网络图片，暂不支持PixelMap类型和Resource资源。默认图片加载方式为异步，暂不支持同步加载。设置值为undefined或者空字符串时，rating会选择加载系统默认星型图源。

说明

• rating宽高为[width, height]时，单个图片的绘制区域为[width / stars, height]。
• 为了指定绘制区域为方形，建议自定义宽高时采取[height * stars, height], width = height * stars的方式。

案例如下：

@Entry
@Component
struct RatingPage {
  build() {
    Column(){
      Rating(
        {rating:2, indicator: true}  //设置不可操作，设置默认值为2，打开就有两个星星
      ).width(200)
        .height(60)

      Rating(
        {rating:0, indicator: false}  //设置可操作，默认值为0
      )
        .width(200)
        .height(60)
        .stars(8)              //设置总共有10颗星星
        .stepSize(0.5)          //设置步长为0.5

    }
    .width("100%")
    .height("100%")
    .padding(10)
  }
}

预览效果如下：

11.3.Rating事件介绍

事件说明：

名称	功能描述
onChange(callback:(value: number) => void)	操作评分条的评星发生改变时触发该回调。从API version 9开始，该接口支持在ArkTS卡片中使用。

案例说明如下：

@Entry
@Component
struct RatingPage {

  @State rating:number = 1

  build() {
    Column(){
      Rating({
        rating:this.rating, //设置默认值
        indicator: false    //设置可以操作打分
      })
        .width(220)
        .height(50)
        .stars(10)          //10颗星星
        .stepSize(0.5)      //设置步长0.5
        .onChange((value:number)=>{
          //修改总分数
          this.rating = value
        })

      Text(`评分数：${this.rating}`).fontSize(25).width("90%").textAlign(TextAlign.Center)
    }
    .width("100%")
    .height("100%")
    .padding(10)
  }
}

预览效果如下：