在開發鴻蒙應用時，你是否也曾為一個頁面的布局反復調整？是否還在為查 API、寫模板代碼而浪費大量時間？今天帶大家實戰體驗一下鴻蒙官方的 AI 編程助手——CodeGenie（代碼精靈） ，如何從 0 到 1 快速構建一個完整頁面！幫助入門開發者快速上手，了解如何通過 AI 輔助完成頁面開發的整個流程。
本文將帶你用自然語言和 CodeGenie 聊聊天，就能自動生成一個完整的新聞列表頁面，體驗一下CodeGenie的高效性!
目標
我們打算做一個新聞類 App 的首頁頁面，包含以下內容：
- 一個頂部標題欄
- 一個搜索框，支持輸入關鍵詞
- 一個可滑動的新聞卡片列表（帶標題、圖片、描述）
- 下拉刷新功能
這個頁面是大部分內容類應用的常見模板，CodeGenie 可以輕松幫我們構建出來。
環境準備
在開始之前，請確保你已經準備好以下開發環境：
| 項目 | 狀態 |
|---|---|
| DevEco Studio | 已安裝（建議使用 4.0+ 版本） |
| CodeGenie 插件 | 已啟用（可在設置中打開） |
| 項目類型 | ArkTS 應用項目 |
創建一個新的項目（例如叫 NewsApp），并進入主頁面代碼文件（例如 NewsListPage.ets）。
第一步：打開 CodeGenie 聊天界面,輸入需求描述
打開 DevEco Studio，點擊工具欄右上角的 CodeGenie 圖標，進入聊天界面，輸入我們的頁面需求：
請幫我用 ArkTS 創建一個完整的新聞列表頁面demo，包含標題欄、搜索框、可滑動的新聞卡片列表（含標題、圖片、描述），并支持下拉刷新。
幾秒鐘后，CodeGenie 就會自動生成一個完整的頁面代碼。如果沒有達到預期效果，那么可能是描述的不優雅，我們可以換個問法，需求描述很重要!
第二步：查看并理解生成的代碼
CodeGenie 給出的頁面代碼結構清晰，具備完整的 UI 和邏輯，例如：
@Entry
@Component
struct NewsListPage {@State newsList: Array<NewsItem> = [{ title: '新聞標題1', image: $r('app.media.news1'), description: '新聞描述1' },{ title: '新聞標題2', image: $r('app.media.news2'), description: '新聞描述2' },{ title: '新聞標題3', image: $r('app.media.news3'), description: '新聞描述3' },// 更多新聞...]build() {Column() {// 標題欄NavigationBar() {Text('新聞列表').fontSize(20).fontWeight(FontWeight.Bold)}// 搜索框SearchBar()// 可滑動的新聞卡片列表List() {ForEach(this.newsList, (newsItem: NewsItem) => {NewsCard(newsItem)})}.onScrollIndex((start: number) => {console.info(`開始索引: ${start}`)}).listDirection(Axis.Vertical).edgeEffect(EdgeEffect.Spring).scrollBar(BarState.Off).friction(0.6).onScroll((scrollOffset: number) => {console.info(`滾動偏移量: ${scrollOffset}`)}).onScrollEdge((edge: Edge) => {console.info(`滾動到邊緣: ${edge}`)}).onScrollStop(() => {console.info('滾動停止')}).enableScrollInteraction(true)}.width('100%').height('100%').backgroundColor(Color.White)}
}interface NewsItem {title: stringimage: Resourcedescription: string
}@Component
struct NavigationBar {build() {Row() {Text('新聞列表').fontSize(20).fontWeight(FontWeight.Bold)}.height(50).backgroundColor(Color.Blue).justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)}
}@Component
struct SearchBar {build() {Row() {Image($r('app.media.search')).width(20).height(20).margin({ left: 10 })TextInput().placeholder('搜索新聞...').width('80%').height(40).backgroundColor(Color.White).fontSize(16).fontColor(Color.Black).borderRadius(20).margin({ left: 10 })}.height(40).backgroundColor(Color.White).justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center).padding(10)}
}@Component
struct NewsCard {@Prop newsItem: NewsItembuild() {Column() {Image(this.newsItem.image).width('100%').height(200).objectFit(ImageFit.Cover)Text(this.newsItem.title).fontSize(18).fontWeight(FontWeight.Bold).margin({ top: 10 })Text(this.newsItem.description).fontSize(16).margin({ top: 5 })}.width('100%').height('100%').backgroundColor(Color.White).padding(10).borderRadius(10).margin({ bottom: 10 })}
}
以下是對代碼的解釋：
在這個示例中：
- 使用@Entry和@Component裝飾器定義了一個名為NewsListPage的組件，作為頁面的入口。
- 使用@State裝飾器定義了一個newsList狀態，用于存儲新聞列表數據。
- 使用Column布局組件來組織頁面內容，包括標題欄、搜索框和新聞卡片列表。
- 使用NavigationBar組件來顯示頁面的標題。
- 使用SearchBar組件來顯示搜索框。
- 使用List組件來創建一個可滑動的新聞卡片列表，并使用ForEach循環渲染每個新聞卡片。
- 使用NewsCard組件來顯示每個新聞卡片的內容，包括標題、圖片和描述。
- 使用各種屬性和事件處理函數來控制組件的樣式和行為。
CodeGenie 回答的還是很完善的,非常的棒!
第三步：調整圖片資源或組件API代碼
CodeGenie 幫我們生成的代碼,還是有一些小瑕疵的,需要我們手動去調整,例如一些圖片資源或者組件的API方法不支持等等
生成的代碼中默認使用了本地圖片 app.media.news1。你可以按如下方式替換為真實的網絡圖片或資源文件：
? 方法一：放入本地資源目錄
將圖片放到 resources/base/media/ 目錄中，并確保路徑正確，例如：
image: '/resources/base/media/news1.png'
? 方法二：使用網絡圖片鏈接
image: 'https://example.com/news-image1.jpg'
第四步：運行并預覽頁面
在 DevEco Studio 中點擊“預覽”或運行到模擬器，頁面應當呈現如下結構：
- 頂部：“新聞列表”標題
- 中部：可輸入的搜索框
- 下方：可滾動的新聞卡片列表，每項展示圖片、標題與描述
- 下拉操作：觸發刷新邏輯
恭喜你，短短幾分鐘就完成了一個頁面的搭建！
拓展功能建議
有了基礎頁面，你可以繼續和 CodeGenie 聊天，添加新功能。例如：
| 想法 | 示例指令 |
|---|---|
| 增加分頁加載 | “為新聞列表添加分頁加載邏輯，滑到底部時加載更多” |
| 優化樣式 | “請讓卡片增加圓角和陰影，更加卡片化” |
| 跳轉到詳情頁 | “點擊新聞項跳轉到詳情頁，傳遞新聞數據” |
| 網絡請求替代模擬數據 | “把 newsList 替換為從遠程接口請求的新聞列表” |
CodeGenie 會像開發搭檔一樣，持續幫你完善頁面！
總結：AI + 開發 = 高效創作
通過這次實戰我們可以看到，CodeGenie 不僅可以理解自然語言，還能真正參與到項目搭建的每一步：
- 快速生成結構清晰、功能完整的頁面
- 理解鴻蒙 ArkTS 的開發模式與組件體系
- 幫助開發者省去大量重復勞動，專注業務邏輯
- 對初學者友好，對資深開發者更是降本增效
如果你還沒有試過 CodeGenie，現在就打開 DevEco Studio，動動嘴皮子或者敲幾行字，就能把一個頁面做出來！
