Compose 的清單和格線 Lists and grids part2

在 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 要顯示的內容資料

LayRow 的 LazyListScope DSL

基本上LayRow 和 LayColumn的控制的程式碼都一樣，只要LayColumn 改成LayRow就好了

	@Composable
fun Greeting(name: String) {
    LazyRow {
        // 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 = "到底了")
        }
    }
}

使用 item() 也可以提供 key 來作為參考 ，LayColumn 也可以使用

@Composable
fun Greeting(name: String) {
 val intList = arrayListOf<Int>()
	for (index in 0..10){
     	intList.add(index)
   	}
 //LayColumn{ 	
 LazyRow {
        items(
            items = intList,
            key = {index -> index })
        {
            data ->
                Text(text = "$data")
        }
    }
}

LazyRow的顯示結果

LayColumn的顯示結果

使用 stickyHeader 可以當作分類的標題 ，LayColumn 也可以使用

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun Greeting(name: String) {
 val intList = arrayListOf<Int>()
	for (index in 0..10){
     	intList.add(index)
   	}

 //LayColumn{ 	
 LazyRow {
        itemsIndexed(intList){Index,data->
            Text(text = "$data")            
        }
        stickyHeader {
            Text(text = "stickyHeader")
        }
        items(intList)
        {
                data ->
                Text(text = "${data}")
            
        }
}

LazyRow的顯示結果

LayColumn的顯示結果

使用 多Type 來作參考處理 ，LayColumn 也可以使用

來顯示一個是偶數的範例:

data class ListType(val int:Int,val isEven:Boolean)

@Composable
fun Greeting() {
 val intList = arrayListOf<ListType>()
 intList.apply {
        intList.add(ListType(1,false))
        intList.add(ListType(2,true))
        intList.add(ListType(3,false))
        intList.add(ListType(4,isEven = true))
        intList.add(ListType(5,isEven = false))
        intList.add(ListType(6,isEven = true))
        intList.add(ListType(7,isEven = false))
        intList.add(ListType(8,isEven = true))
        intList.add(ListType(9,isEven = false))
        intList.add(ListType(10,isEven = true))
    }

 //LayColumn{ 	
  LayRow{ 
  items(intList)
        {
                data ->
            if(data.isEven) {
                Text(text = "${data.int} isEven,")
            }else{
                Text(text = "${data.int},")
            }

        }
}

LazyRow的顯示結果

LayColumn的顯示結果

參考:

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