前言

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)
            )
        }
    }
}

效果图

FlowRow瀑布流效果

代码：

@Preview(widthDp = 1280, heightDp = 720)
@Composable
fun textList() {
    FlowRow(
        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((50..150).random().dp)//宽度度使用了随机值，模拟瀑布流效果
                    .height(100.dp)
                    .background(color = Color.LightGray)
            )
        }
    }
}

效果图

FlowColumn的滚动

添加了horizontalScroll才会有滚动效果

代码

@Preview(widthDp = 1280, heightDp = 720)
@Composable
fun textList() {
    FlowColumn(
        modifier = Modifier
            //FlowColumn一定是使用horizontalScroll横向滚动才有item填充满的效果
            .horizontalScroll(rememberScrollState()) 
            .fillMaxSize()
            .padding(15.dp)
        ,
        mainAxisSpacing = 8.dp,
        crossAxisSpacing = 8.dp
    ) {
        repeat(150) {
            Text(
                text = it.toString(),
                fontSize = 30.sp,
                textAlign = TextAlign.Center,
                color = Color.Black,
                modifier = Modifier
                    .padding(10.dp)
                    .width(100.dp)
                    .height(100.dp)
                    .background(color = Color.LightGray)
            )
        }
    }
}

效果图

FlowRow的滚动

代码

@Preview(widthDp = 1280, heightDp = 720)
@Composable
fun textList() {
    FlowRow(
        modifier = Modifier
            //FlowRow一定是使用verticalScroll横向滚动才有item填充满的效果
            .verticalScroll(rememberScrollState())
            .fillMaxSize()
            .padding(15.dp)
        ,
        mainAxisSpacing = 8.dp,
        crossAxisSpacing = 8.dp
    ) {
        repeat(150) {
            Text(
                text = it.toString(),
                fontSize = 30.sp,
                textAlign = TextAlign.Center,
                color = Color.Black,
                modifier = Modifier
                    .padding(10.dp)
                    .width(100.dp)
                    .height(100.dp)
                    .background(color = Color.LightGray)
            )
        }
    }
}

效果图