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

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

五、进度条组件

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

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

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

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.mzph.cn/news/613791.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Spring MVC 参数接收

Spring MVC 参数接收

参数接收 Springmvc中，接收页面提交的数据是通过方法形参来接收： 处理器适配器调用springmvc使用反射将前端提交的参数传递给controller方法的形参 springmvc接收的参数都是String类型，所以spirngmvc提供了很多converter（转换器…
阅读更多...
LightGBM原理和调参

LightGBM原理和调参

背景知识 LightGBM(Light Gradient Boosting Machine)是一个实现GBDT算法的框架，具有支持高效率的并行训练、更快的训练速度、更低的内存消耗、更好的准确率、支持分布式可以处理海量数据等优点。 普通的GBDT算法不支持用mini-batch的方式训练，在每一次…
阅读更多...
Google Pixel 与 iPhone手机：哪个更好？

Google Pixel 与 iPhone手机：哪个更好？

iPhone稳定可靠，Pixel性价比高且创新。两者各有千秋，满足不同需求 谷歌的 Pixel 手机是 Android 最接近 iPhone 的手机，也是真正原生的Android手机。在iPhone 15 Pro Max 与华为 Mate 60 Pro的比较中不难看出，iPhone依然有着极强…
阅读更多...
杨中科 .NETCORE 异步编程

杨中科 .NETCORE 异步编程

一、 为什么需要异步编程 异步点餐的优点：能同时服务多个客人 异步点餐一定会提升单个客户点餐速度吗？ 答案理所当然：不能 图片美化服务例子服务器能够同时服务的请求数量有限 void BeautifyPic (File photo, Response response) {byte[] …
阅读更多...
Nginx配置反向代理实例二

Nginx配置反向代理实例二

Mac 安装Nginx教程 Nginx配置反向代理实例一 提醒一下：下面实例讲解是在Mac系统演示的； 反向代理实例二实现的效果 使用nginx 反向代理，根据访问的地址跳转到不同端口的服务中 nginx 监听端口为81； 访问地址1：http:/…
阅读更多...
postman使用-06断言

postman使用-06断言

文章目录 一、断言定义二、 常用的断言三、断言-状态码（1）单一状态码断言：Status code:Code is 200 检查返回的状态码是否为200原始模板：修改后：括号里的200也可以改成自己要断言的状态码具体步骤：断言成功…
阅读更多...
字体图标 iconFont

字体图标 iconFont

字体图标使用场景︰主要用于显示网页中通用、常用的一些小图标 精灵图是有诸多优点的，但是缺点很明显。 图片文件还是比较大的。图片本身放大和缩小会失真。一旦图片制作完毕想要更换非常复杂。 此时，有一种技术的出现很好的解决了以上问题&#xff0c…
阅读更多...
springboot虹软人脸识别集成

springboot虹软人脸识别集成

准备工作 虹软开放平台中创建一个新的应用 虹软开发平台【点我跳转】 开始上代码 基本配置 将下载的jar包放到src同级目录下 <!-- 虹软--><dependency><groupId>com.arcsoft.face</groupId><artifactId>arcsoft-sdk-face</artifactI…
阅读更多...
力扣日记1.10-【二叉树篇】701. 二叉搜索树中的插入操作

力扣日记1.10-【二叉树篇】701. 二叉搜索树中的插入操作

力扣日记&#xff1a;【二叉树篇】701. 二叉搜索树中的插入操作 日期&#xff1a;2024. 参考&#xff1a;代码随想录、力扣 —————————————————————— 天哪&#xff0c;上次打开力扣还是2023&#xff0c;转眼已经2024&#xff1f;&#xff01; 两个星期过去…
阅读更多...
【提示学习论文六】MaPLe: Multi-modal Prompt Learning论文原理

【提示学习论文六】MaPLe: Multi-modal Prompt Learning论文原理

文章目录 MaPLe: Multi-modal Prompt Learning 多模式提示学习文章介绍动机MaPLe:Multi-modal Prompt Learning 模型结构1、Deep Language Prompting 深度语言提示2、Deep Vision Prompting 深度视觉提示3、Vision Language Prompt Coupling 视觉语言提示耦合提示耦合过程 实验…
阅读更多...
232Modbus转Profinet应用案例分享

232Modbus转Profinet应用案例分享

现场需求&#xff1a;现场需要将多台伺服接到控制器&#xff08;1200PLC&#xff09;上&#xff0c;用Modbus协议。 根据现场的描述&#xff0c;我们给出一个方案&#xff0c;在PLC和伺服中间加入232Modbus转Profinet&#xff08;XD-PNR200&#xff09;网关&#xff0c;232Modb…
阅读更多...
如何进行大数据系统测试

如何进行大数据系统测试

大数据系统常见的架构形式有如下几种&#xff1a; Hadoop架构&#xff1a; Hadoop Distributed File System (HDFS)&#xff1a;这是一种分布式文件系统&#xff0c;设计用于存储海量数据并允许跨多台机器进行高效访问。 MapReduce&#xff1a;作为Hadoop的核心计算框架&#…
阅读更多...
基于css实现动画效果

基于css实现动画效果

介绍 本文将会基于css&#xff0c;实现各种动画效果&#xff0c;接下来会从简单几个例子入手。 案例 三颗球 <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><title>React App</title><style>…
阅读更多...
【scala】编译build报错 “xxx is not an enclosing class“

【scala】编译build报错 “xxx is not an enclosing class“

private[sources] val creationTimeMs: Long {val session SparkSession.getActiveSession.orElse(SparkSession.getDefaultSession)require(session.isDefined)private[xxx]是访问权限控制在xxxx包的意思。 解决办法&#xff1a; 把[sources]删掉&#xff0c;或者改成和包名…
阅读更多...
vim升级和配置

vim升级和配置

vim升级和配置 1、背景2、环境说明3、操作3.1 升级VIM3.2 配置VIM3.2.1、编辑vimrc文件3.2.2、安装插件 1、背景 日常工作跟linux系统打交道比较多&#xff0c;目前主要用到的是Cenots7和Ubuntu18这两个版本的linux系统&#xff0c;其中Centos7主要是服务器端&#xff0c;Ubun…
阅读更多...
VMware正被博通“收拾”，我们是不是可以“嚣张”一点？

VMware正被博通“收拾”，我们是不是可以“嚣张”一点？

引言&#xff1a;一朝躺在大佬怀&#xff0c;今生荣华伸手来。 【全球存储观察 &#xff5c; 科技热点关注】 如是所闻&#xff0c;2023年元旦前两个月&#xff0c;大家看到博通以610亿美元的高价&#xff0c;成功完成收购了闻名遐迩的虚拟化大佬VMware。日期为2023年11月22日。…
阅读更多...
0111qt

0111qt

实现闹钟&#xff0c;并播报懒虫...~ daytest.pro: QT core gui texttospeechgreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c11# The following define makes your compiler emit warnings if you use # any Qt feature that has been marked deprecated (th…
阅读更多...
1.11.。。。

1.11.。。。

1 有道云笔记 2 .h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimerEvent> #include <QTime> #include <QTextToSpeech>namespace Ui { class Widget; }class Widget : public QWidget {Q_OBJECTpublic:explicit Widget(QW…
阅读更多...
江科大STM32

江科大STM32

参考&#xff1a; https://blog.csdn.net/weixin_54742551/article/details/132409170?spm1001.2014.3001.5502 https://blog.csdn.net/Johnor/article/details/128539267?spm1001.2014.3001.5502 SPI&#xff1a;https://blog.csdn.net/weixin_62127790/article/details/132…
阅读更多...
【SAP-PP】生产订单导入问题--完成日期向前推了一天

【SAP-PP】生产订单导入问题--完成日期向前推了一天

问题描述&#xff1a; 在执行BAPI_PRODORD_CREATE生产订单导入的时候&#xff0c;发现填写入模板中的基本完成日期是12月31日&#xff0c;但是到具体工单时变成了12月30日 截图说明&#xff1a; 感觉很神奇&#xff0c;咋一看&#xff0c;真的是日期提前了一天&#xff0c;de…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023