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) } } } }
更多内容请查询: