前言
本文将會帶着大家做一個完整的項目，但是不包含後端，如果需要後端雲開發的話，後期再給大家補上
本來最開始是想帶着大家做鴻蒙官方的CodeLabs的，但是我看現在網上已經出了很多教程，尤其是機構，他們到時候應該會以視訊教學的方式帶着大家做，是以我就不做CodeLabs了，決定自己做一個單出的Demo，因為自己做的話需要設計等因素，是以拖了蠻長時間的
最後的項目代碼我傳到了Gitee上供大家參考，因為我自己也懶得用Github...
好的，我們開始吧
登陸頁面
我們建立項目，選擇空模闆就行了，建立完是這個樣子的
我現在需要添加一個登入頁和注冊頁，就直接建立兩個Page
我現在想建立一個常量的檔案，用來存放一些常量，例如一些文字大小，顔色等等
于是建立一個common并且建立一個Constant.ets
然後我先定義一下我登陸頁面标題的内容資料，這種資料的格式推薦是大寫，然後多個單詞用_進行分割
然後在登陸頁面使用
然後輸入框我們用TextInput元件來完成
我們先簡單做成這種效果，然後我們把一些别的地方也會用到的公共的常量拿出來
然後我們在Login中使用
這裡可能有人會說，為什麼不封裝一個Form元件呢？其實我最開始也是這麼想的，因為登陸和注冊都需要一個表單，但是在寫的過程中我發現其實也并不怎麼省事，而且我設想的後期的登陸和注冊頁面可能差別較大
當然，如果這裡你想封裝一個Form元件的話是完全可以的~
現在我們想擷取到輸入框的值，并且希望點選Button進行頁面跳轉，跳轉到Index
這裡順便傳了個參數，其實這個使用者名密碼應該存在應用裡的，但是這裡就當是複習一下傳參吧
然後Index接收
現在的效果是這樣的
然後我們同樣的邏輯，搞一下注冊頁面
注冊頁面
我們先在這裡加一行，可以跳轉到注冊
然後頁面和Login一個邏輯
import router from '@ohos.router'
import Constant from '../common/Constant'
@Entry
@Component
struct Register {
@State message: string = 'Please Register'
@State username: string = ''
@State password: string = ''
@State email: string = ''
build() {
Row() {
Column() {
Text(this.message)
.fontColor(Constant.LOGIN_COLOR)
.fontSize(Constant.LOGIN_SIZE)
.fontWeight(FontWeight.Bold)
TextInput({ placeholder: 'Username' })
.margin({ top: 20 })
.width(Constant.INPUT_WIDTH)
.height(Constant.INPUT_HEIGHT)
.onChange((value: string) => {
this.username = value
})
TextInput({ placeholder: 'Email' })
.margin({ top: 20 })
.width(Constant.INPUT_WIDTH)
.height(Constant.INPUT_HEIGHT)
.onChange((value: string) => {
this.email = value
})
TextInput({ placeholder: 'Password' })
.type(InputType.Password)
.margin({ top: 20 })
.width(Constant.INPUT_WIDTH)
.height(Constant.INPUT_HEIGHT)
.onChange((value: string) => {
this.password = value
})
Button('Register')
.width(Constant.BUTTON_WIDTH)
.height(Constant.BUTTON_HEIGHT)
.margin({ top: 30 })
.backgroundColor(Constant.BUTTON_COLOR)
.onClick(() => {
router.pushUrl({
url: 'pages/Login',
params: {
username: this.username,
password: this.password,
email: this.email
}
})
})
}
.width('100%')
}
.height('100%')
}
}
這是最後效果，最終調到Login頁面
目前較為簡潔哈，後面會改善一下
Index
我們首先先通過Tabs将底部導航欄搞出來
現在代碼太亂了，我們希望Index幹淨一些，是以需要封裝一下
我們先将Tabs的内容封裝成一個元件，叫做TabBar
ets下建立一個views檔案夾用來存放元件，然後建立一個TabBar.ets
然後把Tabs下的内容都放在TabBar元件下，并導出
然後在Index中引入并使用
效果是一樣的
然後我們關注每個TabContent即可
首頁Home
先從我們的首頁開始
我們把首頁的内容也做成一個元件，叫做Home
然後在TabBar引入并使用
OK，好的，我們開始專心開發Home的内容吧
Search搜尋框
首先在頂部，我想有一個搜尋框
現在搜尋框完事了，但是代碼也有點備援了，是以我把這部分也抽出去，萬一以後别的地方會用呢
這裡的@Preview是我為了能夠單獨預覽元件用的
OK，效果是一樣的，我們繼續往下了
這裡注意，你完全可以去用自帶的Search元件
但是對我來說，其實寫的沒差太多，而且我想更自由化一點，具體選擇看你的場景即可
我先加上一個标題
List
然後下面是一個清單，那我就要去用List元件了
List是一個容器元件，它裡面的内容需要用ListItem進行填充，同時又需要多個ListItem，這就用到了之前學過的清單的循環渲染ForEach
現在的效果是這樣的
同時拉到最底部的時候會觸發onReachEnd事件，可以用來做一些操作
顯然，我們這個List不能直接放在這裡，于是封裝一個ProductList元件
在Home中引用
效果是一樣的
重新整理Refresh
然後正常的清單應該是可以下拉重新整理的，下拉重新整理我們有兩種方式
- 封裝一個重新整理元件
- 用ArcUI的元件
這裡我們就用Arc提供給我們的元件了，之後我看看優化的時候可以考慮封裝一個
其實在官網的CodeLabs中就有一個封裝的重新整理元件了，大家可以看看
連結給大家自定義下拉重新整理動畫（ArkTS） (huawei.com)
好的，那我們這裡用自帶的重新整理元件Refresh
這是效果
ListItem
好的，現在我們專注于ListItem的内容
我們先看看效果，顯然，裡面有很多資料，這時候我們就需要去寫資料了
我們在ets下建立一個viewModel檔案夾，用來存放資料
然後我們建立一個ProductData.ets用來放商品資料
這裡的Resource是指去拿資源裡的資料，這裡我拿的是圖檔，其實一些資料名或者是顔色在element裡面都可以進行設定
這裡大家知道就好，并不是什麼難的東西，目前我先不放在這裡
然後我進行使用，并設計一下每個ListItem
目前的效果是這樣的
這裡的過期提示我設定的是一個Button，因為我打算後期加一些功能
然後過期、新鮮兩種狀态我設定了不同的顔色，我現在想要做一個判斷，用來讓按鈕顯示不同的顔色，那麼就需要用條件渲染了
這樣就可以進行動态的判斷了
我的頁面
現在我們來做Mine子產品
OK，我們建立了一個Mine.ets并且在TabBar裡面進行引用，現在我們專注于Mine子產品即可
我現在想要這種類型的輸入框，但是Arc原生并沒有提供，是以需要我們封裝一下
然後我們通過傳參的形式在Mine給TextPro指派
OK，效果出來了
然後我們再加上一行個性簽名
現在我們需要功能更加複雜的輸入框
然後可以點選彈出彈出框
OK，我們來搞一下
我們這回封裝一個TextPlus元件
大部分和之前的都一樣，不過是多了一個箭頭，然後多出了一個事件，這個事件将會用來觸發彈窗
然後我們來做彈窗部分
這裡我們需求和官方的文本滑動選擇器彈窗大體是一緻的，于是我們就采用這種方案
然後我們寫一下
現在的效果就是這樣了
原文連結：https://juejin.cn/post/7307889500545400851