JetpackCompose

Jetpack Compose 入门：LazyColumn & LazyRow

LazyColumn 生成的是垂直滚动列表，而 LazyRow 生成的是水平滚动列表。

滚动状态通过 rememberLazyListState() 获取。

如果要嵌套列表，如果最外层是 LazyColumn,，那么嵌套的 LazyColumn 或者 LazyRow 必须指定最大高度；如果最外层是 LazyRow ，那么嵌套的 LazyColumn 或者 LazyRow 必须指定最大宽度。

item() 用于添加单个列表项，items()、itemsIndexed() 用于添加多个列表项：

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
@Composable
fun ListScreen(
    modifier: Modifier = Modifier
) {
    val lazyColumnState = rememberLazyListState()
    val lazyRowState = rememberLazyListState()

    val list = listOf(1,2,3,4,5,6,7,8,9,10)
		
    LazyColumn(
        state = lazyColumnState,
        content = {
            item {
                LazyRow(
                    modifier = modifier.height(250.dp),
                    state = lazyRowState,
                    content = {
                        itemsIndexed(
                            items = list,
                            key = {index: Int, item: Int -> index },
                        ){index,item ->
                            Text(
                                text = "Row $item",
                                modifier = modifier
                                    .padding(16.dp)
                                    .background(Color.Yellow)
                                    .width(100.dp)
                                    .fillMaxHeight(),
                                textAlign = TextAlign.Center
                            )
                        }
                    }
                )
            }

            itemsIndexed(
                items = list,
                key = { index: Int, item: Int ->  index}
            ){index: Int, item: Int ->  
                Text(
                    text = "Column itemsIndexed：index = $index,item = $item",
                    modifier = modifier
                        .padding(16.dp)
                        .background(Color.Cyan)
                        .fillMaxWidth()
                )
            }
            item {
                Divider( modifier = modifier.fillMaxWidth())
            }

            items(
                items = list,
                key = null
            ){item: Int ->
                Text(
                    text = "Column items：item = $item",
                    modifier = modifier
                        .padding(16.dp)
                        .background(Color.Green)
                        .fillMaxWidth()
                )
            }
        }
    )
}

参考文档 列表和网格。

Demo：https://github.com/hefengbao/jetpack-compose-demo