iT邦幫忙

2022 iThome 鐵人賽

DAY 18
0
Mobile Development

寫Jetpack Compose ,會很有畫面哦!系列 第 18

寫Jetpack Compose ,會很有畫面哦! - Day18 Compose 的清單和格線 Lists and grids

  • 分享至 

  • xImage
  •  

Compose 的清單和格線 Lists and grids

在 Day6 基本概念 - Lists and animations ,有簡單的介紹一下LayColumn 就是等於RecycleView,可以多省很多程式。,那就再來好好的看一下吧
- LayColumn 就像 Vertical RecyclerView 
- LazyRow 就像 Horizontal RecyclerView
- LazyVerticalGrid 就像 RecycleView GridView

Lazy 元件不是接受 @Composable 內容區塊參數,讓應用程式直接發出可組合項,而是提供一個 LazyListScope.() 區塊。這個 LazyListScope 區塊提供 DSL,可讓應用程式說明項目內容。接著,Lazy 元件會負責依照版面配置和捲動位置的要求,新增各個項目的內容。

簡單來說 LayColumn 會有一個 LazyListScope 來管理 LayColumn 要顯示的內容資料
LayRow 也會有一個 LazyListScope 來管理 LayRow 要顯示的內容資料

LayColumn 的 LazyListScope DSL

	@Composable
fun Greeting(name: String) {
    LazyColumn {
        // Add a single item
        item {
            Text(text = "Hello $name!")
        }

        // Add 3 items
        items(4) { index ->
            Text(text = "第一個List的項目 : $index")
        }

        // Add 2 items
        items(5) { index ->
            Text(text = "第二個List的項目: $index")
        }

        // Add another single item
        item {
            Text(text = "到底了")
        }
    }
}

https://ithelp.ithome.com.tw/upload/images/20220924/20121643lAgW8sObwh.png

使用 itemsIndexed() 的 items() 擴充功能函式來變化

@Composable
fun Greeting(name: String) {
    val stringList = arrayListOf<String>()
    for (index in 0..10){
        stringList.add("index")
    }
    LazyColumn {
        itemsIndexed(stringList){Index,data->
            Text(text = "這是List第${Index}的項目的資料$data")
        }
        itemsIndexed(stringList.toArray()){Index,data->
            Text(text = "這是Array第${Index}的項目的資料$data")
        }
    }
}

https://ithelp.ithome.com.tw/upload/images/20220924/20121643mmvzIjossE.png

https://ithelp.ithome.com.tw/upload/images/20220924/20121643U0jr3uyf3V.png

參考:

「DSL」是指網域特定語言。
Kotlin 支援使用型別安全建構工具建立網域特定語言 (DSL)。
DSL 可助您以更容易維護及更容易讀取的方式建構複雜的階層式資料結構。
https://developer.android.com/jetpack/compose/kotlin?hl=zh-tw#dsl
https://en.wikipedia.org/wiki/Domain-specific_language


上一篇
寫Jetpack Compose ,會很有畫面哦! - Day17 Compose 的版面配置 part5
下一篇
Day19 Compose 的清單和格線 Lists and grids part2
系列文
寫Jetpack Compose ,會很有畫面哦!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言