前言
从网络中查询回来的数据的数据量和数据的属性有点多,所以想像excel表格那样展示出来,发现Android官方文档中没有类似的实现,然后在material官网中看见了我想要的实现效果—Data-Tables(需要梯子),但是!!!里面居然没有安卓的实现方法,更不用说存在Compose的实现方法了。android view中有表格布局和网格布局也可以用,但就要使用android view binding了,事情就变得麻烦起来,不好操作。于是乎就自己实现了一个和Material 中DataTables相似的布局。
`
直接上代码
// 测试用数据类
data class ABC(val a: String, val b: String,
val c: String, val d: String, val e: String)
@OptIn(ExperimentalFoundationApi::class)
@Preview
@Composable
fun DataTable() {
// 数据列表
val dataList = ArrayList<ABC>(50)
for (i in 0 until 50) dataList.add(ABC("aaa", "bbb", "ccc", "ddd", "eee"))
// 格子样式
@Composable
fun TableText(text: String?, width: Int) {
Text(
text = text ?: "",
Modifier
.width(width.dp)
.height(50.dp)
.border(1.dp, Color.Black)
.padding(15.dp)
)
}
// 定义列宽
val cellWidthList = arrayListOf(150, 150, 150, 150, 150)
// 使用lazyColumn来解决大数据量时渲染的性能问题
LazyColumn(Modifier.horizontalScroll(rememberScrollState())) {
// 粘性标题
stickyHeader {
Row(Modifier.background(Color.Gray)) {
TableText(text = "列1", width = cellWidthList[0])
TableText(text = "列2", width = cellWidthList[1])
TableText(text = "列3", width = cellWidthList[2])
TableText(text = "列4", width = cellWidthList[3])
TableText(text = "列5", width = cellWidthList[4])
}
}
items(dataList) { data ->
Row {
TableText(text = data.a, width = cellWidthList[0])
TableText(text = data.b, width = cellWidthList[1])
TableText(text = data.c, width = cellWidthList[2])
TableText(text = data.d, width = cellWidthList[3])
TableText(text = data.e, width = cellWidthList[4])
}
}
}
}
实现预览
实际在手机使用时可以通过向右滑动来查看第五列的数据,向下滑动来查看更多的数据。
总结
有一说一,是真的丑,建议能使用卡片布局就不要用这种数据表格。如果有更好的实现也可以分享一下。