Kotlin Practice # 7 Lazy Column click Event 點擊事件

Dogpa Chen
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的概念,但相信是必須要把資料傳遞與畫面重新渲染的機制理解。持續加油!!

--

--