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

鸿蒙开发系统组件详细剖析

五、进度条组件

进度条也是UI开发最常用的组件之一,ArkUI开发框架提供了两种类型的进度条: ProgressLoadingProgress ,前者可以精准指定进度,后者表示正在加载的状态,我们接下来对它们分别做下介绍。

5.1.Progress

5.1.1.Progress定义介绍

Progress 组件可以精确的设置当前进度条的进度,它主要用在有加载进度的场景。

Progress(options: {value: number, total?: number, type?: ProgressType})

创建进度组件,用于显示内容加载或操作处理进度。说明如下:

options:进度条参数配置项,ProgressOptions 参数说明如下:

  • value:表示当前进度,取值范围[0, 100],当超过 100 时无效。
  • total:表示进度条总进度,默认值为100。
  • type、style:设置进度条的样式, style 从 API 8 起使用 type 代替, ProgressType 定义了以下 2 种样式:
    • Linear:进度条样式为条形进度条
    • Eclipse:进度条样式为圆形进度条
    • Ring:环形进度条
    • ScaleRing:环形刻度进度条
    • Capsule:胶囊样式进度条

案例如下:

@Entry
@Component
struct ProgressPage {
  build() {
    Column(){
      Progress({
        value:70,                       //设置当前进度
        type: ProgressType.ScaleRing     //设置进度条的样式为环形刻度样式
      })
        .size({width:150, height:150})

      Progress({
        value:45,                       //设置当前进度
        total:100,                      //设置进度总量
        type: ProgressType.Capsule     //设置进度条的样式为胶囊样式
      })
        .size({width:150, height:60})
        .margin({top:20})

      Progress({
        value:50,                       //设置当前进度
        total:100,                      //设置进度总量
        type: ProgressType.Eclipse     //设置进度条的样式为圆形样式
      })
        .size({width:120, height:120})
        .margin({top:20})

      Progress({
        value:45,                       //设置当前进度
        total:100,                      //设置进度总量
        type: ProgressType.Linear       //设置进度条的样式为条形样式
      })
        .size({width:"90%", height:60})
        .margin({top:20})

      Progress({
        value:45,                       //设置当前进度
        total:100,                      //设置进度总量
        type: ProgressType.Ring         //设置进度条的样式为环形样式
      })
        .size({width:150, height:150})
        .margin({top:20})
    }
    .width("100%")
    .padding(20)
  }
}

执行如下:

img

5.1.2.Progress属性介绍

value:设置当前进度值。

style:设置进度条的样式,样式说明如下:

  • strokeWidth:设置进度条宽度。
  • scaleCount:设置环形进度条总刻度数。
  • scaleWidth:设置环形进度条刻度粗细。

color:设置进度条的颜色,默认为蓝色。

样式设置案例如下:

@Entry
@Component
struct ProgressPage {
  build() {
    Column(){
      Progress({
        value:70,                       //设置当前进度
        type: ProgressType.ScaleRing     //设置进度条的样式为环形刻度样式
      })
        .size({width:150, height:150})
        .style({
          scaleCount:20,  //设置环形进度条刻度梳理
          scaleWidth:10   //设置环形进度条刻度粗细
        })
        .color(Color.Red) //设置颜色

      Progress({
        value:45,                       //设置当前进度
        total:100,                      //设置进度总量
        type: ProgressType.Capsule     //设置进度条的样式为胶囊样式
      })
        .size({width:150, height:60})
        .margin({top:20})
        .color("#6495ED") //设置颜色

      Progress({
        value:50,                       //设置当前进度
        total:100,                      //设置进度总量
        type: ProgressType.Eclipse     //设置进度条的样式为圆形样式
      })
        .size({width:120, height:120})
        .margin({top:20})



      Progress({
        value:45,                       //设置当前进度
        total:100,                      //设置进度总量
        type: ProgressType.Linear       //设置进度条的样式为条形样式
      })
        .size({width:"90%", height:60})
        .margin({top:20})
        .style({strokeWidth:30})  //设置进度条线条宽度

      Progress({
        value:45,                       //设置当前进度
        total:100,                      //设置进度总量
        type: ProgressType.Ring         //设置进度条的样式为环形样式
      })
        .size({width:150, height:150})
        .margin({top:20})
        .style({strokeWidth:20})     //设置进度条线条宽度
    }
    .width("100%")
    .padding(20)
  }
}

预览效果如下:

img

5.2.LoadingProgress

LoadingProgressProgress 的区别是不能精确指定进度条的进度,它是一个一直加载的动画,主要是向用户提示任务正在运行中。

5.2.1:LoadingProgress定义

LoadingProgress()

创建加载进展组件。LoadingProgress 没有定义任何参数。案例如下:

LoadingProgress().width(180).height(180)

预览后结果如下:

img

5.2.2.LoadingProgress属性介绍

只有一个属性:

名称参数类型描述
colorResourceColor设置加载进度条前景色。从API version 9开始,该接口支持在ArkTS卡片中使用。

案例如下:

@Entry
@Component
struct ProgressPage02 {
  @State intervalID:number = 0;
  @State value:number = 0;

  build() {
    Column(){

      LoadingProgress()
        .width(180)
        .height(180)
        .color("#4B0082") //设置进度条的前景颜色

    }
    .width("100%")
    .padding(20)
  }
}

预览后效果如下:

img

六、选择器组件

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

6.1.TimePicker

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

6.1.1:TimePicker定义

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

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

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

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

参数:

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

案例如下所示:

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

预览结果如下:

img

6.1.2.TimePicker属性介绍

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

名称参数类型描述
useMilitaryTimeboolean展示时间是否为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)
  }
}

预览效果如下:

img

6.2.DatePicker

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

6.2.1.DatePicker定义

接口:

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

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

参数名参数类型必填参数描述
startDate指定选择器的起始日期。默认值:Date(‘1970-1-1’)
endDate指定选择器的结束日期。默认值:Date(‘2100-12-31’)
selectedDate设置选中项的日期。默认值:当前系统日期

案例如下:

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

执行后效果如下:

img

6.2.2:DatePicker属性介绍

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

名称参数类型描述
lunarboolean日期是否显示农历。- 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)
  }
}

预览效果如下:

img

6.2.3:DatePicker事件介绍

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

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

DatePickerResult对象说明:

名称参数类型描述
yearnumber选中日期的年。
monthnumber选中日期的月(0~11),0表示1月,11表示12月。
daynumber选中日期的日

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

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

预览效果如下:

img

七、二维码组件

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

接口:

QRCode(value: string)

参数:

参数名参数类型必填参数描述
valuestring二维码内容字符串。最大支持256个字符,若超出,则截取前256个字符。说明:该字符串内容确保有效,不支持null、undefined以及空内容。

属性

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

名称参数类型描述
colorResourceColor设置二维码颜色。默认值:Color.Black从API version 9开始,该接口支持在ArkTS卡片中使用。
backgroundColorResourceColor设置二维码背景颜色。默认值: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})
  }
}

设置后如下:

img

八、开关组件

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

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

8.1.Toggle定义

接口

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

参数:

参数名参数类型必填参数描述
typeToggleType开关的样式。
isOnboolean开关是否打开,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})
  }
}

执行后如下:

img

8.2.Toggle属性介绍

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

名称参数参数描述
selectedColorResourceColor设置组件打开状态的背景颜色。从API version 9开始,该接口支持在ArkTS卡片中使用。
switchPointColorResourceColor设置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})
  }
}

执行后如下:

img

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/321698.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

对Transformer的理解。

要理解Transformer,需要先理解注意力机制,下面大部分内容来自台大教授李宏毅老师讲课资料。 注意力机制 之前使用的MLP,CNN,RNN模型可以解决一些简单序列问题,但当序列长度太长容易失去效果,原因是看了新…

python 列表的高级应用

当前版本: Python 3.8.4 简介 列表(list)是Python编程语言中的基本数据类型之一,也是一个非常重要的通用序列。在其它编程语言中,它们通常被称为“数组”。可以存储多个元素,包括数字、字符串、甚至其他列…

python 字符串的详细处理方法

当前版本: Python 3.8.4 简介 字符串是由字符组成的序列,可以用单引号、双引号或三引号(单引号或双引号的连续使用)括起来。一般用来表示和处理文本信息,可以是字母、数字、标点符号以及其他特殊字符,用于…

力扣每日一练(24-1-14)

做过类似的题,一眼就是双指针,刚好也就是题解。 if not nums:return 0p1 0 for p2 in range(1, len(nums)):if nums[p2] ! nums[p1]:p1 1nums[p1] nums[p2]return p1 1 根据规律,重复的数字必定相连,那么只要下一个数字与上一…

WeNet2.0:提高端到端ASR的生产力

摘要 最近,我们提供了 WeNet [1],这是一个面向生产(工业生产环境需求)的端到端语音识别工具包,在单个模型中,它引入了统一的两次two-pass (U2) 框架和内置运行时(built-in runtime)…

SpringCloud.04.熔断器Hystrix( Spring Cloud Alibaba 熔断(Sentinel))

目录 熔断器概述 使用Sentinel工具 什么是Sentinel 微服务集成Sentinel 配置provider文件,在里面加入有关控制台的配置 实现一个接口的限流 基本概念 重要功能 Sentinel规则 流控规则 简单配置 配置流控模式 配置流控效果 降级规则 SentinelResource…

Linux/Traverxec

Enumeration nmap 使用nmap快速扫描目标,发现对外开放了22和80,第一个问题就是问80端口运行的是什么服务,针对这两个端口扫描对应的详细信息后就能得到答案 Nostromo 从nmap的扫描结果可以看到,目标开启了80端口,且…

一二三应用开发平台文件处理设计与实现系列之5——MinIO技术预研

背景 上篇介绍了文件读写框架设计与实现,同时顺便说明了本地磁盘存储模式的实现模式。 今天来说下基于文件读写框架,如何集成对象存储组件minio,集成之前,需要对minio进行必要的了解,本篇是minio的技术预研。 minio简…

Python - 深夜数据结构与算法之 AVL 树 红黑树

目录 一.引言 二.高级树的简介 1.树 2.二叉树 3.二叉搜索树 4.平衡二叉树 三.AVL 树 ◆ 插入节点 ◆ 左旋 ◆ 右旋 ◆ 左右旋 ◆ 右左旋 ◆ 一般形式 ◆ 实际操作 ◆ 总结 四.红黑树 ◆ 概念 ◆ 示例 ◆ 对比 五.总结 一.引言 前面我们介绍了二叉树、二叉…

论文阅读 Self-Supervised Burst Super-Resolution

这是一篇 ICCV 2023 的文章,主要介绍的是用自监督的方式进行多帧超分的学习 Abstract 这篇文章介绍了一种基于自监督的学习方式来进行多帧超分的任务,这种方法只需要原始的带噪的低分辨率的图。它不需要利用模拟退化的方法来构造数据,而且模…

爬虫验证码分析

声明: 该文章为学习使用,严禁用于商业用途和非法用途,违者后果自负,由此产生的一切后果均与作者无关 本文只做简单的验证码分析,不涉及扣代码等逆向 一、常见得验证码平台 易盾:https://dun.163.com/pr…

重学Java 5 idea详细使用和运算符

慢点跑,前面的路不好走 ——24.1.14 一、IDEA的使用 1.idea的介绍 1.概述:开发工具 2.特点: a、idea是java写的,所以本地上必须有正确的jdk环境 b、idea自动保存 c、不用我们打开dos命令窗口执行javac和java命令 d、idea有强大的…

数据结构与算法教程,数据结构C语言版教程!(第四部分、字符串,数据结构中的串存储结构)一

第四部分、字符串,数据结构中的串存储结构 串存储结构,也就是存储字符串的数据结构。 很明显,字符串之间的逻辑关系也是“一对一”,用线性表的思维不难想出,串存储结构也有顺序存储和链式存储。 提到字符串&#xff…

Python 自学(八) 之模块

目录 1. import语句导入模块 P206 2. from ... import 语句导入模块 P207 3. 模块的搜索目录 sys.path P209 4. 以主程序的形式执行 __name__ P212 5. python中的包 P213 1. import语句导入模块 P206 同一目录下&…

【MATLAB】 SSA奇异谱分析信号分解算法

有意向获取代码,请转文末观看代码获取方式~ 1 基本定义 SSA奇异谱分析(Singular Spectrum Analysis)是一种处理非线性时间序列数据的方法,可以对时间序列进行分析和预测。 它基于构造在时间序列上的特定矩阵的奇异值分解&#…

12AOP面向切面编程/GoF之代理模式

先看一个例子: 声明一个接口: // - * / 运算的标准接口! public interface Calculator {int add(int i, int j);int sub(int i, int j);int mul(int i, int j);int div(int i, int j); }实现该接口: package com.sunsplanter.prox…

编曲混音FL Studio21.2对电脑有什么配置要求

FL Studio 21是一款非常流行的音乐制作软件,它可以帮助音乐人和制作人创作出高质量的音乐作品。然而,为了保证软件的稳定性和流畅性,用户需要知道FL Studio 21对电脑的配置要求。本文将介绍FL Studio 21的配置要求,以帮助用户选择…

Open CV 图像处理基础:(七)学习 OpenCV 的图像增强和边缘检测功能

在Java中学习使用 OpenCV 的图像增强和边缘检测功能 目录 在Java中学习使用 OpenCV 的图像增强和边缘检测功能前言图像增强功能对比度调整(Core.addWeighted())函数原型:参数说明:代码:示例 直方图均衡化(I…

强化学习应用(五):基于Q-learning的物流配送路径规划研究(提供Python代码)

一、Q-learning算法简介 Q-learning是一种强化学习算法,用于解决基于马尔可夫决策过程(MDP)的问题。它通过学习一个值函数来指导智能体在环境中做出决策,以最大化累积奖励。 Q-learning算法的核心思想是使用一个Q值函数来估计每…

图形化编程:开启孩子创新思维的新途径

在科技日新月异的今天,编程已经成为了一项重要的技能。然而,对于孩子们来说,传统的编程语言可能会显得过于复杂和抽象。这时,图形化编程就显得尤为重要。那么,什么是图形化编程?它对孩子有什么帮助呢&#…
最新文章