概述

在Android的传统View中，当咱们需求展现很多的数据时，一般都会运用ListView或者是更高级的RecyclerView。在Compose中咱们能够经过Column来完结这一需求，并且还能够让列表完结翻滚，懒加载，快速定位到具体方位等功用。十分灵敏，下文便是运用Column来完结列表的内容

实例解析

1.完结简略的列表

完结简略的列表时，咱们仅需求经过Column组件枚举列出要展现的项即可，比如能够做一个菜单之类的控件。

Android Jetpack Compose之列表的使用
代码如下：

@Composable
fun SimpleColumn() {
    Surface(border = BorderStroke(2.dp,Color.Gray),
        modifier = Modifier
            .padding(5.dp)
            .height(80.dp)
            .width(70.dp)
    ) {
        Column {
            Text(text = "增加老友", style = MaterialTheme.typography.subtitle1)
            Text(text = "替换布景", style = MaterialTheme.typography.subtitle1)
            Text(text = "隐私协议", style = MaterialTheme.typography.subtitle1)
        }
    }
}

这仅仅个简略的demo，目的便是想告知读者能够运用column来做菜单，然后能够搭配DropdownMenu来做下拉菜单。菜单的特色便是能够枚举完一切的项。并且这些项在手机屏幕的展现范围之类，假设需求展现的项过多，则需求菜单支撑滑动的方法。

2.完结可滑动的菜单列表

在很多时候，列表中的项会十分多，例如通讯录，短信，音乐列表等，咱们需求滑动列表来检查一切内容，咱们能够经过给Column的Modifier增加verticalScroll()方法来让列表完结滑动。这儿需求留意的是，当展现的内容变多时，咱们不能再用Column组件了，因为Column组件会将一切的数据全部加载，这十分的耗内存和功用，这儿选用的是LazyColumn组件，这个组件加载数据时是懒加载。即运用届时才加载数据。

Android Jetpack Compose之列表的使用

效果如上图所示。代码也很简略，如下：

@Composable
fun SimpleColumn() {
    Surface(border = BorderStroke(2.dp,Color.Gray),
        modifier = Modifier
            .padding(5.dp)
            .height(80.dp)
            .width(70.dp)
    ) {
        val scrollState = rememberScrollState()
        Column(modifier = Modifier.verticalScroll(scrollState)) {
            Text(text = "增加老友", style = MaterialTheme.typography.subtitle1)
            Text(text = "替换布景", style = MaterialTheme.typography.subtitle1)
            Text(text = "隐私协议", style = MaterialTheme.typography.subtitle1)
            Text(text = "增加老友", style = MaterialTheme.typography.subtitle1)
            Text(text = "替换布景", style = MaterialTheme.typography.subtitle1)
            Text(text = "隐私协议", style = MaterialTheme.typography.subtitle1)
            Text(text = "增加老友", style = MaterialTheme.typography.subtitle1)
            Text(text = "替换布景", style = MaterialTheme.typography.subtitle1)
            Text(text = "隐私协议", style = MaterialTheme.typography.subtitle1)
            Text(text = "增加老友", style = MaterialTheme.typography.subtitle1)
            Text(text = "替换布景", style = MaterialTheme.typography.subtitle1)
            Text(text = "隐私协议", style = MaterialTheme.typography.subtitle1)
        }
    }
}

3.完结一个可滑动并且能快速滑动到指定方位的列表

当咱们的列表的项特别多时，咱们引入了可滑动的列表，让用户能够经过滑动来检查更多的信息，但是有时候用户滑到最底下时，想要快速回到第一项，或者用户想要快速看最终一项的内容，这时候就需求咱们完结能快速滑动到列表的最终一项或者是从最终一项快速滑动到第一项的功用。效果如下所示：

即用户既能够滑动检查内容，也能够经过点击对应的按钮快速滑动到指定的Item,代码如下所示：

@Composable
fun ScrollingList() {
    val scrollState = rememberLazyListState()
    val listSize = 100;
    val coroutineScope = rememberCoroutineScope()
    Column {
        Row {
            Button(
                onClick = {
                    coroutineScope.launch {
                        scrollState.animateScrollToItem(0)
                    }
                },
                modifier = Modifier.weight(1f)
            ) {
                Text(text = "scroll to top")
            }
            Button(
                onClick = {
                    coroutineScope.launch {
                        scrollState.animateScrollToItem(listSize - 1)
                    }
                },
                modifier = Modifier.weight(1f)
            ) {
                Text(text = "scroll to end")
            }
        }
        LazyColumn(state = scrollState) {
            items(listSize) {
                ImageListItem(index = it)
            }
        }
    }
}

ImageListItem代码如下：

@Composable
fun ImageListItem(index: Int) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(
            painter = rememberImagePainter(data = "图片链接"),
            contentDescription = "",
            modifier = Modifier.size(50.dp)
        )
    }
    Spacer(modifier = Modifier.size(10.dp))
    Box(modifier = Modifier
        .fillMaxWidth()
        .height(40.dp)
        .background(color = Color.Red)){
        Text(text = "Item $index", style = MaterialTheme.typography.subtitle1)
    }
}

留意：展现图片这儿需求引入一个库：implementation('io.coil-kt:coil-compose:1.3.0') 如上面的代码所示，这儿完结快速滑动到列表指定的项的功用主要是经过scrollState.animateScrollToItem(0) api完结的。代码量也少，比较于传统的ListView和RecycleView，Compose ui的代码量更少，更容易读。并且不用再写Adapter适配器和xml的布局了。感觉真的超级好。

留意：运用scrollState.animateScrollToItem(0) API时需求搭配协程运用

总结

本文主要是介绍了怎么运用Compose UI去展现一些列表数据，主要分为不行翻滚的列表，能够用于做菜单;可翻滚的列表 ,能够用于展现很多的数据；还有能快速定位到指定项的列表，用于便利用户快速翻滚到需求检查的项。完结列表有两种方法，一种是Column,适合用于数据量比较少的场景，还有另外一种是懒加载的方法LazyColumn,适合数据量大的场景。列表在UI展现是比较重要的，期望读者能够牢牢把握。