本篇將帶你實(shí)現(xiàn)一個(gè)簡(jiǎn)易日歷應(yīng)用，顯示當(dāng)前月份的日期，并支持選擇特定日期的功能。用戶可以通過點(diǎn)擊日期高亮選中，還可以切換上下月份，體驗(yàn)動(dòng)態(tài)界面的交互效果。

---

關(guān)鍵詞

• UI互動(dòng)應(yīng)用
• 簡(jiǎn)易日歷
• 動(dòng)態(tài)界面
• 狀態(tài)管理
• 用戶交互

---

一、功能說明

簡(jiǎn)易日歷應(yīng)用提供了以下功能：

1. 查看當(dāng)前月份的日期。
2. 點(diǎn)擊某一天后高亮顯示選中的日期。
3. 支持切換到上一個(gè)或下一個(gè)月份。

用戶通過動(dòng)態(tài)界面交互，實(shí)時(shí)查看和選擇日期，提升應(yīng)用的互動(dòng)體驗(yàn)。

---

二、所需組件

• @Entry 和 @Component 裝飾器
• Column 和 Row 布局組件，用于頁(yè)面和網(wǎng)格布局
• Button 組件，用于切換月份和選擇日期
• Text 組件，用于顯示標(biāo)題和選中的日期
• @State 修飾符，用于管理界面動(dòng)態(tài)更新的狀態(tài)

---

三、項(xiàng)目結(jié)構(gòu)

• 項(xiàng)目名稱：SimpleCalendarApp
• 自定義組件名稱：SimpleCalendarPage
• 代碼文件：
  • SimpleCalendarPage.ets：實(shí)現(xiàn)核心邏輯。
  • Index.ets：作為應(yīng)用入口調(diào)用主頁(yè)面組件。

---

四、代碼實(shí)現(xiàn)

// 文件名：SimpleCalendarPage.ets@Component
export struct SimpleCalendarPage {@State currentDate: Date = new Date(); // 當(dāng)前日期@State selectedDate: Date | null = null; // 選中的日期build() {Column({ space: 20 }) {// 顯示當(dāng)前年份和月份Row({ space: 10 }) {Button('上一個(gè)月').onClick(() => this.changeMonth(-1));Text(`${this.currentDate.getFullYear()}年 ${this.currentDate.getMonth() + 1}月`).fontSize(24).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Center);Button('下一個(gè)月').onClick(() => this.changeMonth(1));}.justifyContent(FlexAlign.SpaceBetween);// 顯示星期標(biāo)題Row({ space: 5 }) {ForEach(['日', '一', '二', '三', '四', '五', '六'], (day: string) => {Text(day).fontSize(18).fontWeight(FontWeight.Bold).width('12%').textAlign(TextAlign.Center);});}// 顯示日期Column({ space: 5 }) {ForEach(this.getDatesInMonth(), (week: (Date | null)[]) => {Row({ space: 10 }) {ForEach(week, (date: Date | null) => {if (date) {Button(date.getDate().toString()).backgroundColor(this.selectedDate && this.isSameDay(this.selectedDate, date)? Color.Blue: Color.Gray).fontColor(Color.White).onClick(() => this.selectedDate = date).width('12%').height('50px');} else {Text(' ')// 空白占位.width('12%').height('50px');}});}.justifyContent(FlexAlign.SpaceBetween);});}// 顯示選中日期if (this.selectedDate) {Text(`選中的日期：${this.selectedDate.toLocaleDateString()}`).fontSize(20).alignSelf(ItemAlign.Center);}}.padding(20).width('100%').height('100%').alignItems(HorizontalAlign.Center);}// 獲取當(dāng)月的所有日期，按星期分組private getDatesInMonth(): (Date | null)[][] {const year = this.currentDate.getFullYear();const month = this.currentDate.getMonth();const firstDay = new Date(year, month, 1).getDay();const lastDay = new Date(year, month + 1, 0).getDate();const weeks: (Date | null)[][] = [];let currentWeek: (Date | null)[] = Array(firstDay).fill(null);for (let day = 1; day <= lastDay; day++) {currentWeek.push(new Date(year, month, day));if (currentWeek.length === 7) {weeks.push(currentWeek);currentWeek = [];}}if (currentWeek.length > 0) {while (currentWeek.length < 7) {currentWeek.push(null);}weeks.push(currentWeek);}return weeks;}// 判斷兩個(gè)日期是否為同一天private isSameDay(date1: Date, date2: Date): boolean {return (date1.getFullYear() === date2.getFullYear() &&date1.getMonth() === date2.getMonth() &&date1.getDate() === date2.getDate());}// 切換月份private changeMonth(offset: number) {const newDate = new Date(this.currentDate);newDate.setMonth(this.currentDate.getMonth() + offset);this.currentDate = newDate;this.selectedDate = null; // 切換月份時(shí)清除選中狀態(tài)}
}

// 文件名：Index.etsimport { SimpleCalendarPage } from './SimpleCalendarPage';@Entry
@Component
struct Index {build() {Column() {SimpleCalendarPage() // 調(diào)用簡(jiǎn)易日歷頁(yè)面}.padding(20)}
}

效果示例：用戶可以通過按鈕切換月份，并點(diǎn)擊某一天高亮選中。界面實(shí)時(shí)更新，選中的日期顯示在屏幕下方。

---

五、代碼解讀

• 狀態(tài)管理：@State currentDate 和 @State selectedDate 用于保存當(dāng)前顯示的月份和選中的日期。
• 動(dòng)態(tài)生成日期按鈕：通過 getDatesInMonth 方法動(dòng)態(tài)生成當(dāng)月的所有日期，使用 ForEach 渲染按鈕。
• 日期高亮顯示：通過 isSameDay 方法判斷是否選中某一天，并更新按鈕的背景色。
• 月份切換邏輯：通過 changeMonth 方法更新 currentDate 并重新計(jì)算日期。

---

六、優(yōu)化建議

1. 添加工作日和周末標(biāo)記：用不同顏色標(biāo)記工作日和周末，增加視覺提示。
2. 支持跳轉(zhuǎn)到指定日期：提供輸入框或日期選擇器，快速跳轉(zhuǎn)到特定月份。
3. 擴(kuò)展交互功能：例如顯示當(dāng)月的節(jié)假日信息或增加任務(wù)記錄功能。

---

七、相關(guān)知識(shí)點(diǎn)

• 「Mac暢玩鴻蒙與硬件11」鴻蒙 UI 組件篇1 - Text 和 Button 組件詳解
• 「Mac暢玩鴻蒙與硬件33」UI互動(dòng)應(yīng)用篇10 - 數(shù)字猜謎游戲

---

小結(jié)

本篇通過動(dòng)態(tài)生成日歷網(wǎng)格，展示了如何結(jié)合狀態(tài)管理和用戶交互實(shí)現(xiàn)簡(jiǎn)易日歷功能。用戶可通過按鈕切換月份，并高亮選中日期，體驗(yàn)鴻蒙系統(tǒng)的開發(fā)便捷性。

---

下一篇預(yù)告

在下一篇「UI互動(dòng)應(yīng)用篇13 - 數(shù)字滾動(dòng)抽獎(jiǎng)器」中，我們將探索如何設(shè)計(jì)一個(gè)富有趣味的抽獎(jiǎng)應(yīng)用。你將學(xué)習(xí)如何實(shí)現(xiàn)數(shù)字滾動(dòng)效果，打造一個(gè)動(dòng)態(tài)變化的抽獎(jiǎng)界面，增加用戶交互的趣味性與吸引力。

---

上一篇： 「Mac暢玩鴻蒙與硬件34」UI互動(dòng)應(yīng)用篇11 - 顏色選擇器

下一篇： 「Mac暢玩鴻蒙與硬件36」UI互動(dòng)應(yīng)用篇13 - 數(shù)字滾動(dòng)抽獎(jiǎng)器

---

作者：SoraLuna
鏈接：https://www.nutpi.net/thread?topicId=312
來源：堅(jiān)果派
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

---