鸿蒙学习笔记（4）-Radio组件、弹框组件、组件内部状态、工具类

一、Radio组件

（1）简述

创建单选框组件。接收一个RadioOptions类型对象参数。

名称	类型	必填	说明
value	string	是	当前单选框的值。
group	string	是	当前单选框的所属群组名称，相同group的Radio只能有一个被选中。
indicatorType12+	RadioIndicatorType	否	配置单选框的选中样式。未设置时按照RadioIndicatorType.TICK进行显示。
indicatorBuilder12+	CustomBuilder	否	配置单选框的选中样式为自定义组件。自定义组件与Radio组件为中心点对齐显示。indicatorBuilder设置为undefined时，按照RadioIndicatorType.TICK进行显示。

（2）注意事项

1、group属性可以使得单选框实现只能单选或者都可以选，group属性设置一样时，只允许存在一个勾选状态。

2、除支持通用事件以外，还支持onChange事件，单选框选中状态改变时触发回调。

3、除支持通用属性意外，还支持radioStyle，设置单选框选中状态和非选中状态的样式；checked，设置单选框的选中状态；contentModifier，定制Radio内容区的方法，在Radio组件上，定制内容区的方法，modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

4、RadioStyle对象说明：checkedBackgroundColor，开启状态底板颜色；uncheckedBorderColor，关闭状态描边颜色；indicatorColor，开启状态内部圆饼颜色。

二、弹框组件

各种弹窗组件使用网址：弹窗-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

（1）日历弹框组件

1、CalendarPicker,CalendarPicker(options?: CalendarOptions)，日历选择器组件，提供下拉日历弹窗，可以让用户选择日期，得到的时间包括那年月日和时分秒，如若获取了当前时间得到的时分秒是需要是转化＋8小时才是此时的时间。

2、除支持通用事件，还支持事件：onChange

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

选择日期时触发该事件。

3、CalendarOptions对象说明：

名称	类型	必填	说明
hintRadius	number \| Resource	否	描述日期选中态底板样式。默认值：底板样式为圆形。说明： hintRadius为0，底板样式为直角矩形。hintRadius为0 ~ 16，底板样式为圆角矩形。hintRadius>=16，底板样式为圆形。
selected	Date	否	设置选中项的日期。选中的日期未设置或日期格式不符合规范则为默认值。默认值：当前系统日期。

名称

类型

必填

说明

hintRadius

number | Resource

否

描述日期选中态底板样式。

默认值：底板样式为圆形。

说明：

hintRadius为0，底板样式为直角矩形。hintRadius为0 ~ 16，底板样式为圆角矩形。hintRadius>=16，底板样式为圆形。

selected

Date

否

设置选中项的日期。选中的日期未设置或日期格式不符合规范则为默认值。

默认值：当前系统日期。

（2）日期弹框组件

1、TimePicker，TimePicker(options?: TimePickerOptions)，时间选择组件，根据指定参数创建选择器，支持选择小时及分钟，默认以24小时的时间区间创建滑动选择器。

2、TimePickerOptions对象说明：

名称	类型	必填	说明
selected	Date	否	设置选中项的时间。默认值：当前系统时间从API version 10开始，该参数支持$$双向绑定变量。元服务API：从API version 11开始，该接口支持在元服务中使用。
format11+	TimePickerFormat	否	指定需要显示的TimePicker的格式。默认值：TimePickerFormat.HOUR_MINUTE 元服务API：从API version 12开始，该接口支持在元服务中使用。

名称

类型

必填

说明

selected

Date

否

设置选中项的时间。

默认值：当前系统时间

从API version 10开始，该参数支持$$双向绑定变量。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

format11+

TimePickerFormat

否

指定需要显示的TimePicker的格式。

默认值：TimePickerFormat.HOUR_MINUTE

元服务API： 从API version 12开始，该接口支持在元服务中使用。

3、TimePickerFormat11+枚举说明

名称	说明
HOUR_MINUTE	按照小时和分显示。
HOUR_MINUTE_SECOND	按照小时、分钟和秒显示。

4、除通用属性外的常用属性：

名称	说明
useMilitaryTime（value: boolean）	设置展示时间是否为24小时制。
disappearTextStyle	设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。
textStyle	设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。
selectedTextStyle	设置选中项的文本颜色、字号、字体粗细。

三、组件内部状态

（1）@state

1、在组件进行数据动态渲染的时候，需要用到组件内部状态。用@state装饰器定义的变量，代表组件的内部状态，只要这个变量发生变化，页面ui会进行重新渲染。

2、@state来修饰变量，必须要求变量进行初始化，不能为空值。

3、@state来修饰变量，可以支持object、class、string、boolean等类型。如果出现嵌套类型的数据结构，嵌套对象的属性发生变化，页面无法检测更新。

4、标记为@state的变量默认都是私有变量，只能在组件中访问。

5、关于复杂数据类型的定义：

5.1 在viewmodel目录下定义约束模型，再引入到需要的组件或页面中：

5.2 直接在需要的组件或页面中定义对象类型：

6、页面上要用到的数据，并不是所有的数据都需要大家采用@state来修饰，有些变量无需采用@state的，只需要也买你加载一次，直接定义就可以。

（2）父子组件通信

在鸿蒙开发中，涉及到父子组件通信我们需要用到两个装饰器，分别是@prop和@link。

（2.1）@Prop

单向数据通信：父组件传递值给子组件，子组件可以使用这个数据进行渲染，但是修改子组件的传递值，父组件是无法同步的。

注意：

1、@Prop只能在@component组件中使用，不能再@entry组件中使用。

2、@Prop来定义变量，可以默认不初始化，代表接受外来数据，即父组件数据。

3、@Prop来定义数据，可以进行修改，但是只能影响本组件，无法同步给父组件。

（2.2）@Link

双向数据通信：父组件传递值给子组件，子组件可以修改传递过去的这个值，同步将内容修改后传递回父组件。

注意：

1、@Link只能在@component组件中使用，不能在@entry组件中使用。

2、@Link来定义变量，可以默认不初始化，代表接受外来数据，即父组件数据。

3、@Link来定义数据，可以进行修改，无论是父组件还是子组件，数据都是同步变化的。

传参方式：

1、子组件中定义一个变量，这个变量可以默认初始化，也可以接受父组件传递的值。

四、日期格式化工具

传递日期进行格式化工具：

// 定义一个配置类 Opt，用于存储日期时间各部分的字符串值
export class Opt {yy: string = ''; // 年（完整年份，如 "2025"）mm: string = ''; // 月（补零，如 "03"）dd: string = ''; // 日（补零，如 "26"）HH: string = ''; // 时（24小时制，补零，如 "14"）MM: string = ''; // 分（补零，如 "05"）SS: string = ''; // 秒（补零，如 "09"）
}/*** 格式化日期时间* @param timestamp 时间戳（毫秒）* @param format 格式字符串，支持以下占位符：*   - y+ 年（如 yy 输出 25，yyyy 输出 2025）*   - m+ 月（如 m 输出 3，mm 输出 03）*   - d+ 日（如 d 输出 5，dd 输出 05）*   - H+ 时（24小时制）*   - M+ 分*   - S+ 秒* @returns 格式化后的日期时间字符串*/
export function formatData(timestamp: number, format: string) {let res: string = ''; // 存储格式化后的结果try {// 1. 将时间戳转换为 Date 对象const date = new Date(timestamp);// 2. 准备日期时间各部分的字符串值（自动补零）const opt: Opt = {yy: date.getFullYear().toString(), // 年（不补零，如 "2025"）mm: (date.getMonth() + 1).toString().padStart(2, '0'), // 月（补零，如 "03"）dd: date.getDate().toString().padStart(2, '0'), // 日（补零，如 "05"）HH: date.getHours().toString().padStart(2, '0'), // 时（补零，如 "14"）MM: date.getMinutes().toString().padStart(2, '0'), // 分（补零，如 "05"）SS: date.getSeconds().toString().padStart(2, '0'), // 秒（补零，如 "09"）};// 3. 使用正则表达式替换格式字符串中的占位符res = format.replace(/y+/g, opt.yy)// 替换年份（支持 yyyy 或 yy）.replace(/m+/g, opt.mm)// 替换月份（支持 mm 或 m）.replace(/d+/g, opt.dd)// 替换日期（支持 dd 或 d）.replace(/H+/g, opt.HH)// 替换小时（支持 HH 或 H）.replace(/M+/g, opt.MM)// 替换分钟（支持 MM 或 M）.replace(/S+/g, opt.SS); // 替换秒（支持 SS 或 S）} catch (error) {// 4. 错误处理（如传入非法时间戳）console.error('ERROR formatData:', error);}// 返回格式化后的字符串return res;
}

使用时，先导入在使用（标红处获取格式）：

五、随机日期和气温生成工具

String.protptype.padStart():padStart()方法是用另一个字符串填充当前字符串（如果需要会重复填充），直到达到给定的长度，填充是从当前字符串的开头开始的。

initData():在页面加载时，调用 initData() 从后端获取数据，在开发阶段，可以用 initData() 生成假数据用于测试：

（1）随机日期

export function getRandomCurrentMonth(){let today=new Date()const year=today.getFullYear()const month=today.getMonth()+1let minDay=1;let maxDay=new Date(year,month+1,0).getDate()let randomDay=Math.floor(Math.random()*(maxDay-minDay+1))+minDayreturn `${year}-${String(month).padStart(2,'0')}-${String(randomDay).padStart(2,'0')}`
}

（2）随机温度

export function getRandomTemperature(): string {const minTemp = 10; // 最低温度const maxTemp = 35; // 最高温度const randomTemp = Math.random() * (maxTemp - minTemp) + minTemp; // 生成随机温度return randomTemp.toFixed(1);
}