Android Jetpack Compose 中使用LazyColumn+Row实现 DataTables

前言

从网络中查询回来的数据的数据量和数据的属性有点多，所以想像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])
            }
        }
    }
}

实现预览

实际在手机使用时可以通过向右滑动来查看第五列的数据，向下滑动来查看更多的数据。

总结

有一说一，是真的丑，建议能使用卡片布局就不要用这种数据表格。如果有更好的实现也可以分享一下。