29. Compose实现瀑布流 StaggeredGrid

简介

在xml向Compose的迁移过程中遇到的问题，瀑布流没有官方的控件，但在官方的owl demo中看到了自定义的
owl直接自定义操作的Layout，测量和分配位置，最外层要套一层滑动的Column
有些第三方作者写的是利用两个LazyColumn经过改造达到目的
现在体验的效果还是感觉官方的流畅一些，但也存在问题列表大的时候可能会触发OOM ，下拉加载更多要自己想办法实现，不能结合paging来做

附上我学习Compose的代码(demo中有三个实现方案)
github

创建数据

图片的数据需要VPN，来自谷歌的demo图

private val rangeForRandom = (0..100000)data class StaggeredItem(val name: String,val height: Int,val color: Color,val picture: String,
)fun getStaggeredList(): MutableList<StaggeredItem> {val list = mutableListOf<StaggeredItem>()val heightList = listOf(300, 320, 350, 280)repeat(500) {val height = heightList.random()val picture = "https://picsum.photos/seed/${rangeForRandom.random()}/500/$height"list.add(StaggeredItem(name = "name $it",height = height,color = Color(red = (0..255).random(),blue = (0..255).random(),green = (0..255).random()),picture = picture))}return list
}

使用

@Composable
fun ListOne() {val list = getStaggeredList()Column(modifier = Modifier.verticalScroll(rememberScrollState(),flingBehavior = StockFlingBehaviours.smoothScroll())) {StaggeredVerticalGrid(maxColumnWidth = 220.dp,modifier = Modifier.padding(4.dp)) {list.forEachIndexed { _, staggeredItem ->StaggeredItem(staggeredItem)}}}
}

Item


@Composable
fun StaggeredItem(staggeredItem: StaggeredItem) {Box(modifier = Modifier.padding(horizontal = 4.dp, vertical = 4.dp).background(color = staggeredItem.color, shape = RoundedCornerShape(9.dp)).fillMaxWidth().height(staggeredItem.height.dp),contentAlignment = Alignment.Center) {XLogger.d("---->${staggeredItem.picture}")Image(painter = rememberImagePainter(data = staggeredItem.picture),contentDescription = null,contentScale = ContentScale.FillBounds,modifier = Modifier.fillMaxSize().clip(RoundedCornerShape(9.dp)))Text(text = staggeredItem.name,color = Color.White,fontSize = 25.sp,fontWeight = FontWeight.Medium)}
}

StaggeredVerticalGrid


import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.unit.Dp
import kotlin.math.ceil@Composable
fun StaggeredVerticalGrid(modifier: Modifier = Modifier,maxColumnWidth: Dp,content: @Composable () -> Unit
) {Layout(modifier = modifier,content = content,) { measurables, constraints ->check(constraints.hasBoundedWidth) {"Unbounded width not supported"}val columns = ceil(constraints.maxWidth / maxColumnWidth.toPx()).toInt()val columnWidth = constraints.maxWidth / columnsval itemConstraints = constraints.copy(maxWidth = columnWidth)val colHeights = IntArray(columns) { 0 } // track each column's heightval placeables = measurables.map { measurable ->val column = shortestColumn(colHeights)val placeable = measurable.measure(itemConstraints)colHeights[column] += placeable.heightplaceable}val height = colHeights.maxOrNull()?.coerceIn(constraints.minHeight, constraints.maxHeight)?: constraints.minHeightlayout(width = constraints.maxWidth,height = height) {val colY = IntArray(columns) { 0 }placeables.forEach { placeable ->val column = shortestColumn(colY)placeable.place(x = columnWidth * column,y = colY[column])colY[column] += placeable.height}}}
}private fun shortestColumn(colHeights: IntArray): Int {var minHeight = Int.MAX_VALUEvar column = 0colHeights.forEachIndexed { index, height ->if (height < minHeight) {minHeight = heightcolumn = index}}return column
}

29. Compose实现瀑布流 StaggeredGrid相关推荐

用原生JavaScript实现图片瀑布流的浏览效果
学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...
css浮动+应用（瀑布流效果的实现）
首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
30个创意出色的非常实用的jquery框架插件-(视觉大背景，瀑布流效果)
jQuery是在网页设计师和开发者最近的热门话题之一.人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放,视频播放等 ...
ios开发瀑布流框架的封装
一:瀑布流框架封装的实现思路:此瀑布流框架的封装仿照tableView的底层实现,1:每个cell的frame的设置都是找出每列的最大y值,比较每列的最大y值,将下一个cell放在最大y值最小的那一列 ...
JavaScript实现自适应宽度的瀑布流
摘要: 主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和json是滚动 ...
瀑布流ListView
前言终于忙完了一段时间,现在前段时间写的一个瀑布流ListView到想法分享下,这个东西是扩展自Listview,当列表内容拉到最后后触发刷新操作,以便抓取更多到数据. 先贴下整个代码,先有个整体到 ...
js图片加载效果（延迟加载+瀑布流加载）
概述两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果详细代码下载:http://www.demodash ...
JavaScript——原生js实现瀑布流
瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...
CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

29. Compose实现瀑布流 StaggeredGrid

简介

创建数据

使用

Item

StaggeredVerticalGrid

29. Compose实现瀑布流 StaggeredGrid相关推荐

最新文章

热门文章