【HarmonyOS4.0】第八篇-ArkUI系统组件(三)_arkui prompt.showtoast 废弃

【HarmonyOS4.0】第七篇-ArkUI系统组件(三)

七、二维码组件

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

接口：

QRCode(value: string)
1

参数:

属性

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

案例如下：

@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})
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

设置后如下：

八、开关组件

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

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

8.1.Toggle定义

接口

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

参数:

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

按钮样式案例如下：

@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})
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

执行后如下：

8.2.Toggle属性介绍

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

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

@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})
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

执行后如下：

8.3.Toggle事件介绍

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

案例如下：

@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 })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

预览后效果如下：

九、提示框组件

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

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

①.导入模块：

import promptAction from '@ohos.promptAction'
1

②.promptAction.showToast，接口说明：

showToast(options: ShowToastOptions): void
1

③.参数：

ShowToastOptions选项说明

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

简答案例如下：

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})
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

预览显示如下：

9.2.promptAction.showDialog

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

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

②.参数：

ShowDialogOptions对话框的选项说明

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

案例如下：

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
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

预览后效果如下：

9.3.promptAction.showActionMenu

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

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

②.参数：

options操作菜单的选项：

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

③.返回值：

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

案例如下：

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
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

执行后效果如下：

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

十、滑动条组件

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

10.1.Slider定义介绍

接口：

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

参数：

style滑块样式SliderStyle枚举说明

案例演示如下：

@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})
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

预览效果如下：

10.2.属性

滑动场景属性如下：

案例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})
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

预览效果如下：

案例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})
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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

10.3.事件

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

SliderChangeMode枚举值为：

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

@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})
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

执行后如下：

十一、评分条组件

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

11.1.Rating定义

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

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

参数：

案例如下：

@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)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

预览效果如下：

11.2.属性

说明

• 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)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

预览效果如下：

11.3.Rating事件介绍

事件说明：

案例说明如下：

@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)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

预览效果如下：