Jetpack compose学习笔记之列表（布局）

一，简介

Jetpack compose中的布局主要分为Column，Row，Box。

二，Column创建的列表

Column创建list时，不管内容是在屏幕内还是屏幕外，都会将list的内容全部创建。当list内容很多时，性能不好。

@Composable
fun SimpleList() {
    // 记录滑动的位置
    val scrollState = rememberScrollState()

    // Column默认情况下只能显示屏幕内的内容
    // 如果未设置Modifier.verticalScroll(scrollState)，list则不能滑动
    Column(Modifier.verticalScroll(scrollState)) {
        repeat(100) {
            Text("Item #$it")
        }
    }
}

三，Lazy list

LazyColumn只会生成屏幕内的内容，相比于Column性能好，也不需要设置scroll modifier。

LazyColumn相当于Android中的RecyclerView。

@Composable
fun LazyList() {
    // 记录滑动状态
    val scrollState = rememberLazyListState()

    LazyColumn(state = scrollState) {
        items(100) {
            Text("Item #$it")
        }
    }
}

四，利用LazyColumn创建一个list

效果

1. 创建list item

因为list item的图片来自网络，所以先添加coil库来简化获取图片的流程

// build.gradle
implementation 'io.coil-kt:coil-compose:1.3.0'

添加网络权限

<!-- AndroidManifest.xml -->
<uses-permission android:name="android.permission.INTERNET" />

创建item

@Composable
// Modifier可以装饰Composable，包括行为（如clickable），外观（如padding）以及信息等
// 设置可选的modifier可以使方法更灵活，Modifier为默认值，什么也不会做
fun PhotographerCard(index: Int, modifier: Modifier = Modifier) {
    Row(
        modifier
            // 相当于match_parent，否则效果为wrap_content
            .fillMaxWidth()
            .padding(8.dp)
            .clip(RoundedCornerShape(4.dp))
            .background(MaterialTheme.colors.surface)
            // clickable和padding的顺序不同，意义会不一样
            // 先clickable再padding，click的范围是包括padding的，反之则不包括
            .clickable(onClick = {})
            .padding(16.dp)) {
        // 设置图片的占位符（placeholder），图片加载完成后也不会消失
        Surface(
            modifier = Modifier.size(50.dp),
            shape = CircleShape,
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
        ) {
            Image(
                painter = rememberImagePainter(
                    data = "https://developer.android.google.cn/images/brand/Android_Robot.png"
                ),
                contentDescription = "LOGO",
                modifier = Modifier.size(50.dp)
            )
        }
        Column(
            modifier = Modifier
                // 设置图片和文字直接的间距
                .padding(start = 8.dp)
                // 文字内容垂直居中
                .align(Alignment.CenterVertically)
        ) {
            Text("Android #$index", fontWeight = FontWeight.Bold)
            // LocalContentAlpha定义孩子View的透明度
            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
                Text("kotlin", style = MaterialTheme.typography.body2)
            }
        }
    }
}

2. 用list item创建列表

@Composable
fun ScrollingList() {
    val listSize = 100
    val scrollState = rememberLazyListState()

    LazyColumn(state = scrollState) {
        items(listSize) {
            // 将item index传递，0-99
            PhotographerCard(it)
        }
    }
}

3. 创建Button

@Composable
fun ScrollingList() {
    val listSize = 100
    val scrollState = rememberLazyListState()
    // 为了在滑动过程中不影响list的描绘，animateScrollToItem方法被设计为suspend方法，所以需要在协程中执行
    val coroutineScope = rememberCoroutineScope()

    Column {
        Row {
            Button(onClick = {
                coroutineScope.launch {
                    // 跳转到list的第一项
                    scrollState.animateScrollToItem(0)
                }
            }) {
                Text("回到顶部")
            }

            Button(onClick = {
                coroutineScope.launch {
                    // 跳转到list的最后一项
                    scrollState.animateScrollToItem(listSize - 1)
                }
            }) {
                Text("回到底部")
            }
        }
        LazyColumn(state = scrollState) {
            items(listSize) {
                PhotographerCard(it)
            }
        }
    }
}

更多内容请查询：

Layouts in Jetpack Compose (google.cn)