Jetpack Compose中的列表

VIP文章川峰

已于 2023-10-30 20:06:45 修改

阅读量1.6k

点赞数 4

分类专栏： Jetpack Compose 文章标签： android Jetpack Compose 列表 LazyList StaggeredGrid

于 2023-01-05 07:30:00 首次发布

本文链接：https://blog.csdn.net/lyabc123456/article/details/128510336

版权

Cloumn 和 Row

如果是普通的不是特别长的列表，可以直接使用 Column 和 Row 组件，默认 Column 和 Row 组件是不支持滚动的，如果需要支持滚动可以在 Column 和 Row 组件上使用 Modifier.verticalScroll() 和Modifier.horizontalScroll() 修饰符

@Composable
fun ColumnList(list: List<String>) {
   
    Box {
   
        Column(Modifier.verticalScroll(rememberScrollState())) {
   
            list.forEach {
   
                Text(it)
                Divider()
            }
        }
    }
}

@Composable
fun RowList(list: List<String>) {
   
    Box {
   
        Row(Modifier.horizontalScroll(rememberScrollState())) {
   
            list.forEach {
   
                Text(it)
                Divider(Modifier.width(1.dp).fillMaxHeight(), thickness = 1.dp)
            }
        }
    }
}

Column 的 verticalArrangement 参数可以指定item在主轴不同的排列方式：

@Composable
fun ColumnExample() {
   
    Column(
        modifier = Modifier.border(1.dp, Color.Blue),
        // verticalArrangement = Arrangement.Top // 默认是Top
    ) {
   
        Text("默认效果", Modifier.background(Color.Green))
        Text("默认效果", Modifier.background(Color.Green))
        Text("默认效果", Modifier.background(Color.Green))
    }
}

@Composable
fun ColumnExample2() {
   
    Column(
        modifier = Modifier.border(1.dp, Color.Blue),
        verticalArrangement = Arrangement.Center
    ) {
   
        Text("Arrangement.Center", Modifier.background(Color.Green))
        Text("Arrangement.Center", Modifier.background(Color.Green))
        Text("Arrangement.Center", Modifier.background(Color.Green))
    }
}

@Composable
fun ColumnExample201() {
   
    Column(
        modifier = Modifier.border(1.dp, Color.Blue),
        verticalArrangement = Arrangement.SpaceAround
    ) {
   
        Text("Arrangement.SpaceAround", Modifier.background(Color.Green))
        Text("Arrangement.SpaceAround", Modifier.background(Color.Green))
        Text("Arrangement.SpaceAround", Modifier.background(Color.Green))
    }
}

@Composable
fun ColumnExample202() {
   
    Column(
        modifier = Modifier.border(1.dp, Color.Blue),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
   
        Text("Arrangement.SpaceBetween", Modifier.background(Color.Green))
        Text("Arrangement.SpaceBetween", Modifier.background(Color.Green))
        Text("Arrangement.SpaceBetween", Modifier.background(Color.Green))
    }
}

@Composable
fun ColumnExample203() {
   
    Column(
        modifier = Modifier.border(1.dp, Color.Blue),
        verticalArrangement = Arrangement.SpaceEvenly
    ) {
   
        Text("Arrangement.SpaceEvenly", Modifier.background(Color.Green))
        Text("Arrangement.SpaceEvenly", Modifier.background(Color.Green))
        Text("Arrangement.SpaceEvenly", Modifier.background(Color.Green))
    }
}

@Composable
fun ColumnExample204() {
   
    Column(
        modifier = Modifier.border(1.dp, Color.Blue),
        verticalArrangement = Arrangement.spacedBy(10.dp)
    ) {
   
        Text("Arrangement.spacedBy(10.dp)", Modifier.background(Color.Green))
        Text("Arrangement.spacedBy(10.dp)", Modifier.background(Color.Green))
        Text("Arrangement.spacedBy(10.dp)", Modifier.background(Color.Green))
    }
}

@Composable
fun ColumnExample205() {
   
    Column(
        modifier = Modifier.border(1.dp, Color.Blue),
        verticalArrangement = Arrangement.Bottom
    ) {
   
        Text("Arrangement.Bottom", Modifier.background(Color.Green))
        Text("Arrangement.Bottom", Modifier.background(Color.Green))
        Text("Arrangement.Bottom", Modifier.background(Color.Green))
    }
}

在这里插入图片描述

下面的动图总结了不同垂直排列方式的效果：

在这里插入图片描述

同样，通过 horizontalAlignment 参数可以指定item在交叉轴（横轴）上的排列方式：

@Composable
fun ColumnExample3() {
   
    Column(
        modifier = Modifier.border(1.dp, Color.Blue),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
   
        Text("ffff", Modifier.background(Color.Green))
        Text("Alignment.CenterHorizontally", Modifier.background(Color.Green))
    }
}

@Composable
fun ColumnExample4() {
   
    Column(
        modifier = Modifier.border(1.dp, Color.Blue),
        horizontalAlignment = Alignment.End
    ) {
   
        Text("kkk", Modifier.background(Color.Green))
        Text("Alignment.End", Modifier.background(Color.Green))
    }
}

在这里插入图片描述

Row 组件也可以通过 horizontalArrangement 参数指定item在水平方向的排列方式:

@Composable
fun RowExample() {
   
    val modifier = Modifier
        .padding(5.dp)
        .clip(RoundedCornerShape(35))
        .background(Color.Green)
    val modifier2 = modifier
        .width(50.dp)
        .padding(5.dp)
    Column {
   
        Divider()
        Text("Equal Weight")
        Row {
   
            Box(modifier
                .weight(1f)
                .padding(5.dp)) {
   
                Text(text = "A", Modifier.align(Alignment.Center))
            }
            Box(modifier
                .weight(1f)
                .padding(5.dp)) {
   
                Text(text = "B", Modifier.align(Alignment.Center))
            }
            Box(modifier
                .weight(1f)
                .padding(5.dp)) {
   
                Text(text = "C", Modifier.align(Alignment.Center))
            }
        }
        Divider()
        Text("Arrangement.Start")
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Start
        ) {
   
            Box(modifier2) {
   
                Text(text = "A", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "B", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "C", Modifier.align(Alignment.Center))
            }
        }
        Divider()
        Text("Arrangement.Center")
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center
        ) {
   
            Box(modifier2) {
   
                Text(text = "A", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "B", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "C", Modifier.align(Alignment.Center))
            }
        }
        Divider()
        Text("Arrangement.End")
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.End
        ) {
   
            Box(modifier2) {
   
                Text(text = "A", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "B", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "C", Modifier.align(Alignment.Center))
            }
        }
        Divider()
        Text("Arrangement.SpaceBetween")
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
   
            Box(modifier2) {
   
                Text(text = "A", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "B", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "C", Modifier.align(Alignment.Center))
            }
        }
        Divider()
        Text("Arrangement.SpaceAround")
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceAround
        ) {
   
            Box(modifier2) {
   
                Text(text = "A", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "B", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "C", Modifier.align(Alignment.Center))
            }
        }
        Divider()
        Text("Arrangement.SpaceEvenly")
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
   
            Box(modifier2) {
   
                Text(text = "A", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "B", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "C", Modifier.align(Alignment.Center))
            }
        }
        Divider()
        Text("Arrangement.spacedBy(20.dp)")
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(20.dp)
        ) {
   
            Box(modifier2) {
   
                Text(text = "A", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "B", Modifier.align(Alignment.Center))
            }
            Box(modifier2) {
   
                Text(text = "C", Modifier.align(Alignment.Center))
            }
        }
        Divider()
    }
}

在这里插入图片描述

下面的动图总结了不同水平排列方式的效果：

在这里插入图片描述

LazyColumn 和 LazyRow

这两个是支持惰性加载的列表组件，只有屏幕显示的部分才会真正被加载，对标传统View中的RecyclerView

@Composable
fun LazyColumnList() {
   
    LazyColumn(
        Modifier
            .fillMaxSize()

最低0.47元/天解锁文章

川峰

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
Jetpack Compose中的列表

通常，延迟列表包含许多项，并且这些项所占空间大于滚动容器的大小。不过，如果列表中填充的项很少，那么在设计中，您可以对这些项在视口中的位置做出更具体的要求。
复制链接

扫一扫

专栏目录

Jetpack Compose中的列表

Cloumn 和 Row

LazyColumn 和 LazyRow

“相关推荐”对你有帮助么？