Android开发 Jetpack Compose FlowColumn与FlowRow瀑布流布局

发布时间 2023-04-01 14:02:53作者: 观心静

前言

  FlowColumn与FlowRow是Jetpack提供的辅助库accompanist的一员,以提供那些在Jetpack Compose sdk中目前还没有的功能API。因为默认库中的Column、Row、LazyVerticalGrid、LazyHorizontalGrid都无法满足流瀑布布局的需求,而且类似这种网格布局LazyVerticalGrid、LazyHorizontalGrid还有无法禁用滚动的问题。所以Jetpack通过辅助库accompanist提供了FlowColumn与FlowRow。

依赖

//流瀑布
implementation "com.google.accompanist:accompanist-flowlayout:0.28.0"

FlowColumn瀑布流效果

代码

@Preview(widthDp = 1280, heightDp = 720)
@Composable
fun textList() {
    FlowColumn(
        modifier = Modifier
            .fillMaxSize()
            .padding(15.dp)
        ,
        mainAxisSpacing = 8.dp,
        crossAxisSpacing = 8.dp
    ) {
        repeat(30) {
            Text(
                text = it.toString(),
                fontSize = 30.sp,
                textAlign = TextAlign.Center,
                color = Color.Black,
                modifier = Modifier
                    .padding(10.dp)
                    .width(100.dp)
                    .height((50..150).random().dp)//高度使用了随机值,模拟瀑布流效果
                    .background(color = Color.LightGray)
            )
        }
    }
}

效果图

 

参数解释

mainAxisSize: SizeMode = SizeMode.Wrap,

mainAxisAlignment: FlowMainAxisAlignment = FlowMainAxisAlignment.Start,

mainAxisSpacing 当前方向主轴间距

crossAxisAlignment: FlowCrossAxisAlignment = FlowCrossAxisAlignment.Start,

crossAxisSpacing: Dp = 0.dp,

lastLineMainAxisAlignment: FlowMainAxisAlignment = mainAxisAlignment,

 

 

 

End