【鸿蒙软件开发】ArkTS基础组件之DataPanel(数据面板)、DatePicker(日期选择)

news/2025/2/21 23:45:58

文章目录

  • 前言
  • 一、DataPanel数据面板
    • 1.1 接口
      • 参数介绍
    • 1.2 属性
    • 1.3 DataPanelType枚举说明
    • 1.4 深度剖析number[]参数
    • 1.5 示例代码
  • 二、DatePicker日期选择
    • 2.1 接口
      • 参数说明
    • 2.2 属性
    • 2.3 事件
      • DatePickerResult对象说明
    • 2.4 示例代码
  • 总结


前言

DataPanel:数据面板组件,用于将多个数据占比情况使用占比图进行展示。
DatePicker:日期选择器组件,用于根据指定日期范围创建日期滑动选择器。


一、DataPanel数据面板

1.1 接口

DataPanel(options:{values: number[], max?: number, type?: DataPanelType})

在这里插入图片描述

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

参数介绍

下面的参数分别代表:参数名,参数类型,必填,参数描述
values,number[],是,数据值列表,最多包含9个数据,大于9个数据则取前9个数据。若数据值小于0则置为0。
max,number,否

  • max大于0,表示数据的最大值。

  • max小于等于0,max等于value数组各项的和,按比例显示。
    默认值:100

type,DataPanelType,否,数据面板的类型(不支持动态修改),默认值:DataPanelType.Circle

1.2 属性

除了通用属性,如:backgroundcolor,color,font这些属性,他还有自己独特的属性:

closeEffect,boolean,关闭数据占比图表旋转动效。默认值:false

1.3 DataPanelType枚举说明

从API version 9开始,该接口支持在ArkTS卡片中使用。
下面参数功能分别为这个:名称,描述
Line,线型数据面板。
Circle,环形数据面板。

1.4 深度剖析number[]参数

通过图片理解:
在这里插入图片描述

他们是累加,在前一个数据后面累加,并不是从0开始!!!

1.5 示例代码

// xxx.ets
@Entry
@Component
struct DataPanelExample {
  public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10]

  build() {
    Column({ space: 5 }) {
      Row() {
        Stack() {
          DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).width(168).height(168)
          Column() {
            Text('30').fontSize(35).fontColor('#182431')
            Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6)
          }

          Text('%')
            .fontSize(9.33)
            .lineHeight(12.83)
            .fontWeight(500)
            .opacity(0.6)
            .position({ x: 104.42, y: 78.17 })
        }.margin({ right: 44 })

        Stack() {
          DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168)
          Column() {
            Text('75').fontSize(35).fontColor('#182431')
            Text('已使用98GB/128GB').fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6)
          }

          Text('%')
            .fontSize(9.33)
            .lineHeight(12.83)
            .fontWeight(500)
            .opacity(0.6)
            .position({ x: 104.42, y: 78.17 })
        }
      }.margin({ bottom: 59 })

      DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(10)
    }.width('100%').margin({ top: 5 })
  }
}

在这里插入图片描述

大家对于鸿蒙的示例代码玩玩就好,对于初学者不友好,所以玩一下即可。

二、DatePicker日期选择

日期选择器组件,用于根据指定日期范围创建日期滑动选择器。

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

2.1 接口

函数原型:

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

在这里插入图片描述

根据指定范围的Date创建可以选择日期的滑动选择器。

参数说明

参数对应分别为下面:参数名,参数类型,是否必填,参数描述
start,Date,否,指定选择器的起始日期。默认值:Date(‘1970-1-1’)
end,Date,否,指定选择器的结束日期。默认值:Date(‘2100-12-31’)
selected,Date,否,设置选中项的日期。默认值:当前系统日期

我们的start参数和end参数需要使用new Date("1970-1-1")

2.2 属性

除了通用属性,如:backgroundcolor,color,font这些属性,他还有自己独特的属性:

lunar,boolean,日期是否显示农历。
属性参数:
- true:展示农历。

- false:不展示农历。

默认值:false

2.3 事件

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

名称

onChange(callback: (value: DatePickerResult) => void)

在这里插入图片描述

功能描述:
选择日期时触发该事件。

DatePickerResult对象说明

DatePickerResult成员功能分别如下:名称,参数类型,描述
year,number,选中日期的年。
month,number,选中日期的月(0~11),0表示1月,11表示12月。
day,number,选中日期的日。

2.4 示例代码

// xxx.ets
@Entry
@Component
struct DatePickerExample {
  @State isLunar: boolean = false
  private selectedDate: Date = new Date('2021-08-08')

  build() {
    Column() {
      Button('切换公历农历')
        .margin({ top: 30, bottom: 30 })
        .onClick(() => {
          this.isLunar = !this.isLunar
        })
      DatePicker({
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.selectedDate
      })
        .lunar(this.isLunar)
        .onChange((value: DatePickerResult) => {
          this.selectedDate.setFullYear(value.year, value.month, value.day)
          console.info('select current date is: ' + JSON.stringify(value))
        })

    }.width('100%')
  }
}

在这里插入图片描述


总结

本文章基本介绍了下面的组件:
DataPanel:数据面板组件,用于将多个数据占比情况使用占比图进行展示。
DatePicker:日期选择器组件,用于根据指定日期范围创建日期滑动选择器。

如果还有疑惑的还可以再看一遍我们的文章,或者去看我们的华为官方文档

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

相关文章

Python手搓C4.5决策树+Azure Adult数据集分析

前言 课上的实验 由于不想被抄袭,所以暂时不放完整代码 Adult数据集可以在Azure官网上找到 Azure 开放数据集中的数据集 - Azure Open Datasets | Microsoft Learn 数据集预处理 删除难以处理的权重属性fnlwgt与意义重复属性educationNum去除重复行与空行删除…

听GPT 讲Rust源代码--library/std(2)

File: rust/library/std/src/sys_common/wtf8.rs 在Rust源代码中,rust/library/std/src/sys_common/wtf8.rs这个文件的作用是实现了UTF-8编码和宽字符编码之间的转换,以及提供了一些处理和操作UTF-8编码的工具函数。 下面对这几个结构体进行一一介绍&…

python版opencv人脸训练与人脸识别

1.人脸识别准备 使用的两个opencv包 D:\python2023>pip list |findstr opencv opencv-contrib-python 4.8.1.78 opencv-python 4.8.1.78数据集使用前一篇Javacv的数据集,网上随便找的60张图片,只是都挪到了D:\face目录下方便遍历 D:\face\1 30张刘德华图片…

【Rust日报】2023-10-22 Korvin - 一个 WASM 前端框架,比基线 vanillajs 实现快了 33%!...

Yazi v0.1.5 发布 - 有史以来最大的更新 Yazi - 💥 用 Rust 编写的基于异步 I/O 的快速终端文件管理器。 嘿伙计!我很高兴在这里宣布Yazi v0.1.5 发布了! 这是有史以来最大的更新,也是周期最长的更新。该版本带来了许多有意义的变…

JavaScript中undefined和not defined的区别

在JavaScript中,undefined和not defined是两个不同的概念。 undefined:表示一个变量已经声明了,但是它的值还没有被设置。例如: let x; console.log(x); // undefinednot defined:表示一个变量还没有被声明。例如&am…

Queue 的 poll() 和 remove()

在Queue接口中,poll()和remove()都是用于从队列中移除并返回头部元素的方法: 返回值: poll(): 如果队列为空,poll()方法会返回null,不会抛出异常。remove(): 如果队列为空,remove()方法会抛出NoSuchElementException异…

CI/CD:GitLab-CI 自动化集成/部署 JAVA微服务的应用合集

CI/CD:GitLab-CI 自动化集成/部署 JAVA微服务的应用合集 CI/CD:GitLab-CI 自动化集成/部署 JAVA微服务的应用合集安装DockerGitLabGitLab-Runner阿里云容器仓库 GitLab-CIJava微服务的GitLab-CI应用 CI/CD:GitLab-CI 自动化集成/部署 JAVA微服…

01-初识VUE3

01.初识VUE3 1.创建VUE3项目 1).使用 vue-cli 创建 ## 查看vue/cli版本,确保vue/cli版本在4.5.0以上 vue --version ## 安装或者升级你的vue/cli npm install -g vue/cli ## 创建 vue create vue_test ## 启动 cd vue_test npm run serve2).使用 vite 创建 ## 创…