鴻蒙學習筆記（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);
}