前言

  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.Start

FlowMainAxisAlignment.Center

FlowMainAxisAlignment.End

FlowMainAxisAlignment.SpaceEvenly  

放置子节点，使它们在主轴上的间隔均匀，包括第一个子节点之前和最后一个子节点之后的空闲空间。

FlowMainAxisAlignment.SpaceBetween

放置子节点，使它们在主轴上均匀地间隔，在第一个子节点之前或最后一个子节点之后没有空闲空间。

FlowMainAxisAlignment.SpaceAround

放置子节点，使它们在主轴上均匀间隔，包括第一个子节点之前和最后一个子节点之后的空闲空间，但在两个连续的子节点之间存在一半的空间。

mainAxisSpacing 当前方向主轴间距

crossAxisAlignment: FlowCrossAxisAlignment = FlowCrossAxisAlignment.Start,

crossAxisSpacing: Dp = 0.dp,

lastLineMainAxisAlignment: FlowMainAxisAlignment = mainAxisAlignment,

End