前言
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
- 瀑布 FlowColumn Android Jetpack Compose瀑布flowcolumn android jetpack android jetpack compose android jetpack compose动画 android jetpack compose button jetpack_compose android jetpack compose 形状android jetpack compose 颜色android jetpack compose androidview android jetpack compose jetpack_compose navigation jetpack compose页面