Kotlin Practice # 7 Lazy Column click Event 點擊事件
Feb 13, 2023
上一篇簡單透過自己的照片實踐的Jetpack Compose的練習,展示了自己2022的攝影作品。
而這篇則是要來研究通常APP會出現的點擊行為,通常我們在點擊列表事件時,會有頁面切換或轉換UI的行為,通常是顯示更詳細的資料或是其他的行為。
而這篇則要嘗試練習,將上一個練習照片牆的照片,透過點擊後可以顯示詳細的攝影資訊。
首先先建立資料結構,這次新增了攝影的ISO、曝光時間、光圈資訊。
接續建立ViewModel,裏面簡單建立一個function回傳Photo的List。
接著要開始建構畫面,首先是要放在Lazy Column內的View,基本上跟前一個Practice一樣。
可以看到上面第24行,透過clickable等於要傳入的執行行為來做切換的準備。
接續建立攝影作品詳細頁面的View。
最後就是在MainActivity中加入邏輯判斷,使用者對Lazy Column的View執行點擊時,進行View的改變顯示詳細的頁面。
在第39行建立一個判斷,依照此判斷來顯示不同的View,近而達到切換的功能。
嘗試來看看實作的效果。
基本上達成自己想要的切換頁面功能了,目前暫且知道透過remember可以促使頁面進行切換,近似於SwiftUI的@State的概念,但相信是必須要把資料傳遞與畫面重新渲染的機制理解。持續加油!!