介紹
本篇Codelab是基于Flex容器組件,實(shí)現(xiàn)彈性布局效果。彈性布局的特點(diǎn)是頁(yè)面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整,但整體布局不變。
相關(guān)概念
- [Flex組件]:以彈性方式布局子組件的容器組件。
- [Search組件]:搜索框組件,適用于瀏覽器的搜索內(nèi)容輸入框等應(yīng)用場(chǎng)景。
- [Text組件]:顯示一段文本的組件。
- [Image組件]:圖片組件,支持本地圖片和網(wǎng)絡(luò)圖片的渲染展示。
- [Scroll組件]:可滑動(dòng)的容器組件,當(dāng)子組件的布局尺寸超過(guò)父組件的視口時(shí),內(nèi)容可以滑動(dòng)。
- [條件渲染]:條件渲染可根據(jù)應(yīng)用的不同狀態(tài),使用if、else和else if渲染對(duì)應(yīng)狀態(tài)下的UI內(nèi)容。
- [循環(huán)渲染]:基于數(shù)組類(lèi)型數(shù)據(jù)執(zhí)行循環(huán)渲染。
環(huán)境搭建
軟件要求
- [DevEco Studio]版本:DevEco Studio 3.1 Release。
- OpenHarmony SDK版本:API version 9。
硬件要求
- 開(kāi)發(fā)板類(lèi)型:[潤(rùn)和RK3568開(kāi)發(fā)板]。
- OpenHarmony系統(tǒng):3.2 Release。
環(huán)境搭建
完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建,本示例以RK3568開(kāi)發(fā)板為例,參照以下步驟進(jìn)行:
- [獲取OpenHarmony系統(tǒng)版本]:標(biāo)準(zhǔn)系統(tǒng)解決方案(二進(jìn)制)。以3.2 Release版本為例:
- 搭建燒錄環(huán)境。
- [完成DevEco Device Tool的安裝]
- [完成RK3568開(kāi)發(fā)板的燒錄](méi)
- 搭建開(kāi)發(fā)環(huán)境。
- 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備],完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
- 開(kāi)發(fā)環(huán)境配置完成后,請(qǐng)參考[使用工程向?qū)創(chuàng)建工程(模板選擇“Empty Ability”)。
- 工程創(chuàng)建完成后,選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
- 鴻蒙開(kāi)發(fā)指導(dǎo)文檔:[
qr23.cn/FBD4cY
]
代碼結(jié)構(gòu)解讀
本篇Codelab只對(duì)核心代碼進(jìn)行講解,對(duì)于完整代碼,我們會(huì)在gitee中提供。
├──entry/src/main/ets // 代碼區(qū)
│ ├──common
│ │ └──constants
│ │ └──StyleConstants.ets // 樣式常量類(lèi)
│ ├──entryability
│ │ └──EntryAbility.ts // 程序入口類(lèi)
│ ├──pages
│ │ └──HomePage.ets // 主界面
│ ├──view
│ │ ├──ClearSearch.ets // 清除歷史記錄自定義組件
│ │ ├──FlexLayout.ets // 彈性布局自定義組件
│ │ └──SearchInput.ets // 搜索輸入框自定義組件
│ └──viewmodel
│ └──SearchViewModel.ets // 歷史搜索數(shù)據(jù)類(lèi)
└──entry/src/main/resources // 資源文件目錄
`HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿`
編寫(xiě)搜索框布局
在這個(gè)章節(jié)中,我們需要完成搜索框布局的編寫(xiě),并實(shí)現(xiàn)文本輸入和點(diǎn)擊事件。效果如圖所示:
在ets目錄下,點(diǎn)擊鼠標(biāo)右鍵 > New > Directory,新建名為view的自定義子組件目錄。然后在view目錄下,點(diǎn)擊鼠標(biāo)右鍵 > New > ArkTS File,新建名為SearchInput的ArkTS文件。最后在SearchInput.ets文件中,逐步完成如下操作:
- 使用@Component新增一個(gè)自定義組件,組件名為SearchInput。
- 在build()中使用Flex作為容器組件,實(shí)現(xiàn)子組件水平排列。
- 使用Search組件作為搜索框布局,Text組件作為搜索文本按鈕布局。
// SearchInput.ets
@Component
export default struct SearchInput {
build() {
Flex({ alignItems: ItemAlign.Center }) {
// 搜索框布局
Search()
...
// 搜索文本按鈕布局
Text($r('app.string.search'))
...
}
...
}
}
接下來(lái)我們實(shí)現(xiàn)Search組件的樣式及輸入功能,并將輸入的數(shù)據(jù)添加到數(shù)組searchArr中:
- 使用@State定義變量searchInput,存儲(chǔ)搜索框輸入的文本內(nèi)容。
- 在Search組件參數(shù)中,將變量searchInput賦值給參數(shù)value,參數(shù)placeholder填寫(xiě)提示內(nèi)容,參數(shù)icon表示搜索圖標(biāo)路徑。
- 設(shè)置高度height、寬度width、背景顏色backgroundColor、提示內(nèi)容顏色placeholderColor等屬性。
- 設(shè)置onChange事件,將用戶(hù)輸入的內(nèi)容綁定到變量searchInput中。
- 使用@Link定義一個(gè)數(shù)組變量searchArr,點(diǎn)擊搜索文本按鈕時(shí),將用戶(hù)輸入的內(nèi)容即searchInput的值,通過(guò)數(shù)組的unshift()方法,在數(shù)組searchArr的頭部添加數(shù)據(jù)。
// SearchInput.ets
@Component
export default struct SearchInput {
@State searchInput: string = '';
@Link searchArr: Array< string >;
build() {
Flex({ alignItems: ItemAlign.Center }) {
// 搜索框布局
Search({
value: this.searchInput,
placeholder: StyleConstants.SEARCH_PLACEHOLDER,
icon: StyleConstants.SEARCH_ICON
})
.placeholderColor($r('app.color.placeholder_color'))
.placeholderFont({ size: $r('app.float.font_size') })
.textFont({ size: $r('app.float.font_size') })
.height(StyleConstants.SEARCH_HEIGHT)
.width(StyleConstants.SEARCH_WIDTH)
.backgroundColor(Color.White)
...
.onChange((value: string) = > {
this.searchInput = value;
})
// 搜索文本按鈕布局
Text($r('app.string.search'))
...
.onClick(() = > {
if (this.searchInput !== '' && this.searchInput.trim().length > 0) {
// 使用unshift在數(shù)組頭部添加數(shù)據(jù)
this.searchArr.unshift(this.searchInput.trim());
}
this.searchInput = '';
})
}
...
}
}
然后我們?cè)贖omePage.ets首頁(yè)中,引入SearchInput搜索輸入框自定義組件。
- 使用@State定義數(shù)組變量searchArr,存放最近搜索文本內(nèi)容。
- 在構(gòu)造參數(shù)中,使用$符號(hào)引用@State修飾的變量searchArr,將父組件的變量searchArr與子組件searchArr變量關(guān)聯(lián)起來(lái)。
// HomePage.ets
import SearchInput from '../view/SearchInput';
@Entry
@Component
struct HomePage {
@State searchArr: Array< string > = SearchViewModel.getSearchArrData();
build() {
Column() {
// 搜索輸入框自定義組件
SearchInput({ searchArr: $searchArr })
}
...
}
}
編寫(xiě)清除記錄布局
在這個(gè)章節(jié)中,我們需要完成清除記錄布局的編寫(xiě),并實(shí)現(xiàn)條件渲染。效果如圖所示:
在view目錄下,點(diǎn)擊鼠標(biāo)右鍵 > New > ArkTS File,新建名為ClearSearch的ArkTS文件。然后在ClearSearch.ets文件中,逐步完成如下操作:
- 使用@Component新增一個(gè)自定義組件,組件名為ClearSearch。
- 在build()中使用Flex作為容器組件,實(shí)現(xiàn)子組件水平排列。
- 使用if/else實(shí)現(xiàn)條件渲染:當(dāng)有搜索內(nèi)容時(shí),顯示最近搜索的文本和清除搜索內(nèi)容圖標(biāo);否則就顯示沒(méi)有搜索內(nèi)容和相關(guān)圖片。
- 使用@Link定義數(shù)組變量searchArr,當(dāng)點(diǎn)擊清除搜索內(nèi)容圖標(biāo)時(shí),所有最近搜索內(nèi)容清空。
// ClearSearch.ets
@Component
export default struct ClearSearch {
// 搜索內(nèi)容數(shù)組
@Link searchArr: Array< string >;
build() {
Flex({ alignItems: ItemAlign.Center }) {
if (this.searchArr.length > 0) {
Text($r('app.string.recent_searches'))
...
Image($r('app.media.ic_delete'))
...
.onClick(() = > {
this.searchArr.splice(0, this.searchArr.length);
this.searchArr.length = 0;
})
} else {
Column() {
Image($r('app.media.ic_no_search'))
...
Text($r('app.string.no_search_content'))
...
}
...
}
}
}
}
然后我們?cè)贖omePage.ets首頁(yè)中,引入ClearSearch搜索輸入框自定義組件。
// HomePage.ets
import SearchInput from '../view/SearchInput';
import ClearSearch from '../view/ClearSearch';
@Entry
@Component
struct HomePage {
@State searchArr: Array< string > = SearchViewModel.getSearchArrData();
build() {
Column() {
// 搜索輸入框自定義組件
SearchInput({ searchArr: $searchArr })
// 清除搜索記錄自定義組件
ClearSearch({ searchArr: $searchArr })
}
...
}
}
編寫(xiě)彈性布局
在這個(gè)章節(jié)中,我們需要完成彈性布局的功能樣式,并實(shí)現(xiàn)循環(huán)渲染。效果如圖所示:
在view目錄下,點(diǎn)擊鼠標(biāo)右鍵 > New > ArkTS File,新建名為FlexLayout的ArkTS文件。然后在FlexLayout.ets文件中,逐步完成如下操作:
- 使用@Component新增一個(gè)自定義組件,組件名為FlexLayout。
- 在build()中使用Flex作為容器,設(shè)置參數(shù)wrap為FlexWrap.Wrap時(shí)為彈性布局,實(shí)現(xiàn)自動(dòng)換行。
- 使用if實(shí)現(xiàn)條件渲染,當(dāng)有搜索內(nèi)容時(shí),顯示最近搜索的所有內(nèi)容。
- 使用@Link定義數(shù)組變量searchArr,表示子組件要顯示的所有最近搜索文本內(nèi)容。
- 使用ForEach遍歷變量searchArr,實(shí)現(xiàn)循環(huán)渲染。
// FlexLayout.ets
@Component
export default struct FlexLayout {
@Link searchArr: Array< string >;
build() {
Scroll() {
// Flex布局, wrap設(shè)置成FlexWrap.Wrap時(shí)為彈性布局
Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {
if (this.searchArr.length > 0) {
// 循環(huán)渲染
ForEach(this.searchArr, (item: string) = > {
Text(`${item}`)
...
}, (item: string) = > JSON.stringify(item))
}
}
...
}
}
}
然后我們?cè)贖omePage.ets首頁(yè)中,引入FlexLayout搜索輸入框自定義組件。
// HomePage.ets
import SearchInput from '../view/SearchInput';
import ClearSearch from '../view/ClearSearch';
import FlexLayout from '../view/FlexLayout';
@Entry
@Component
struct HomePage {
@State searchArr: Array< string > = SearchViewModel.getSearchArrData();
build() {
Column() {
// 搜索輸入框自定義組件
SearchInput({ searchArr: $searchArr })
// 清除搜索記錄自定義組件
ClearSearch({ searchArr: $searchArr })
// 彈性布局自定義組件
FlexLayout({ searchArr: $searchArr })
}
...
}
}
審核編輯 黃宇
-
開(kāi)發(fā)板
+關(guān)注
關(guān)注
25文章
5119瀏覽量
97944 -
開(kāi)發(fā)者
+關(guān)注
關(guān)注
1文章
590瀏覽量
17055 -
鴻蒙
+關(guān)注
關(guān)注
57文章
2388瀏覽量
42964 -
HarmonyOS
+關(guān)注
關(guān)注
79文章
1980瀏覽量
30403 -
OpenHarmony
+關(guān)注
關(guān)注
25文章
3744瀏覽量
16473
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論