一, 前言
在介紹之前，雖然上篇 基于HarmonyOS ArkUI 3.0 架構，我成功開發了流式布局網絡語 吐槽過了， 再吐槽一下為什麼文檔Ets元件裡沒有文本輸入框，這麼基礎的元件都不先提供的，好的當時在HDC大會體驗Ets執行個體時，見到有用輸入框，名叫TextInput，在開發工具是沒有提示的，然後我也嘗試用它來為我的Demo提供輸入，然而發現個問題，當我把TextInput元件裡的text屬于綁定@State 定義變量時，每次在文本框輸入内容，點選按鈕，清空變量值，這時文本輸入框也清空了，但當我再次輸入内容時，輸入文本框會追加上次的内容，估計是因為TextInput有這個Bug，是以還沒有在文檔上顯示出來。這裡顯示的瀑布式布局效果,我也是在HDC大會上,印象裡見到過這樣的效果,但現在已經記不清楚在哪裡看到過了,然後以為文檔裡有執行個體或元件說明,找了一遍, 沒有找到,然後就在網上科普了一下瀑布式布局原理,道理都懂了,由于前端太菜了,沒有在eTS上按照原理實作, 然後就想到了用Flex布局的FlexDirection.Column, 再加上高度裝置,效果也出來了,但覺得不是真正的瀑布式布局,我想下來官網文檔開放布局了,一行代碼就可以有瀑布式布局了,目前先用着自己寫的效果了. 簡單介紹一下本文的實作效果，在文本輸入框輸入圖檔名稱, 模糊搜尋出符合條件的圖檔，點選搜尋按鈕，把符合條件圖檔添加到下面瀑布式布局的元件裡，圖檔以x、y軸縮放從0.5變化到1，透明度從0到1 顯示出來，點選随機删除按鈕時，從下面圖檔随機删除一個，并且以沿y軸旋轉360度消失。
二, 實作效果
開發環境效果： https://www.bilibili.com/video/BV1JQ4y1Q7z2/
遠端模拟器效果： https://www.bilibili.com/video/BV1uq4y1R7vB/
三, 建立工程
在這當作你已經安裝好最新版本DevEco-Studio開發工具, 點選File -> New -> New Project... 彈出Create HarmonyOS Project視窗, 這裡我選擇空白eTS模闆建立, 下來就跟着一起玩轉HarmonyOS ArkUI 3.0 架構聲明式開發吧.
基于HarmonyOS ArkUI 3.0 架構，瀑布式顯示HDC2021圖檔 基于HarmonyOS ArkUI 3.0 架構，瀑布式顯示HDC2021圖檔
四, 界面開發
界面有三個元件組合而成，文本輸入框和搜尋按鈕組合成一個自定義元件， 曆史記錄和随機删除按鈕組合成一個自定義元件，滾動元件和多個圖檔元件組合成一個自定義元件，同時還有Model結構, 初始化資料模型, 下面我們分别從上到下來介紹自定義元件：
@Entrybr/>@Component
struct PictureList {
@State pictureItems: PictureData[] = initOnStartup()
build() {
Column() {
// 文本輸入框和搜尋按鈕組合自定義元件
Search_Input({ pictureArr: $pictureItems })
// 曆史記錄和随機删除按鈕組合成自定義元件
Operation_Picture({ pictureArr: $pictureItems })
// 滾動元件和多個圖檔元件組合成自定義元件
Flowlayout_Container({ pictureArr: $pictureItems})
}
.alignItems(HorizontalAlign.Center)
曆史記錄和随機删除按鈕組合
滾動元件和多個圖檔元件組合成， 給圖檔元件添加兩個transition屬性，分别用于定義元件的添加動效和移除動效, 同時為實作瀑布式布局,設定好每張圖檔高度.
資料Model
初始化資料方法
const PictureArr: any[] = [
{id: 1, name: 'aa1', image: $r("app.media.1")},
{id: 2, name: 'aa2', image: $r("app.media.2")},
{id: 3, name: 'bb3', image: $r("app.media.3")},
{id: 4, name: 'bb4', image: $r("app.media.4")},
{id: 5, name: 'aa1', image: $r("app.media.5")},
{id: 6, name: 'aa2', image: $r("app.media.6")},
{id: 7, name: 'aa3', image: $r("app.media.7")},
{id: 8, name: 'aa4', image: $r("app.media.8")},
{id: 9, name: 'cc1', image: $r("app.media.9")},
{id: 10, name: 'cc2', image: $r("app.media.10")},
{id: 11, name: 'bb3', image: $r("app.media.11")},
{id: 12, name: 'bb4', image: $r("app.media.12")},
{id: 13, name: 'aa1', image: $r("app.media.13")},
{id: 14, name: 'aa2', image: $r("app.media.14")},
{id: 15, name: 'bb3', image: $r("app.media.15")},
{id: 16, name: 'bb4', image: $r("app.media.16")},
{id: 17, name: 'aa1', image: $r("app.media.17")},
{id: 18, name: 'aa2', image: $r("app.media.18")},
{id: 19, name: 'aa3', image: $r("app.media.19")}
];
export function initOnStartup(): Array<PictureData> {
let PictureDataArray: Array<PictureData> = []
PictureArr.forEach(item => {
PictureDataArray.push(new PictureData(item.id, item.name, item.image));
})
return PictureDataArray;
};