Android 用Jektpack Compose 來開發app【04】 - Compose畫面篇
4 min read
UIFramework#Android#Kotlin
前言
* 這是這個系列的第四篇
到這個階段基本上就比較多是在
刻畫UI/UX設計稿提供的畫面了
大家可以開始暢大寫特寫code了
專案建置
* 使用的library如下：
{% include table/compose-use.html %}
{% include table/compose-category.html %}
刻畫共用的畫面心得分享
* 與不同的UI/UX合作後
發現滿多設計的畫面也都會有針對當前專案有共用的元件
如果剛好有一些元件是整個專案裡面通用的
也可以先把他拉出來做成通用compose
(主要還是要看你與設計師怎麼溝通)
- 像是比較常用的edittext、dialog或是一些的客製化元件
下面分享幾種可能可以做成通用元件的compose
大家可以根據自己的需求去實作
Edittext
Dialog
Dialog
組出你要的畫面
* 再來就可以把各種畫面給組出來
假設後面新需求出的畫面跟設計都是同一套的話
你就可以很輕鬆的把你前面
辛苦分開刻的畫面給組起來
像是下面就是用了我前面第一篇初期建構篇內容的通用toolbar
以及用到了上面分享的compose
透過flow來響應畫面更新
建立flow
- 現在的app功能愈來愈多
所以取得值的來源或需求也增多了
假設你的某個功能被要求處理多個畫面上的變化
且他的值的來源都不相同
這時候我可能就會採用flow來處理各個協程返回的值
把來源資料的return 或型態都使用flow
因為你有時候也無法控制資料來源的存取速度
例如網路請求、或本地端DB查詢大量資料時
所以可以使用flow等待他把資料emit過來給你
這邊稍微舉例：
建立viewstate來放畫面響應需要的資料
* 接著為了整理你所有畫面上會有變化的內容
可以做一個data class 用來放你畫面要的資料
用combine組合flow
* 接著使用`combine`把各種資料來源組進來
combine會組合你的所有flow
並把最近每個被emit過來的值組合起來
看看他實作的原理就是使用funtion type 或是稱作lambda function
返回一個你指定類型的flow
- 如果你在lambda
{}內有想要做判斷的值也可以考慮在裡面
最終把你要的結果用前面定義的ViewState去return即可
.stateIn可以設定你這個R類型flow的初始值
實際在compose中使用flow給的資料
* 前面完成之後就可以透過`.collectAsState()`去拿到前面的flow
並收集成compose能用的state
這時候就能響應式更新畫面囉~