android compose LazyHorizontalGrid水平滚动的网格布局 使用

android compose LazyHorizontalGrid水平滚动的网格布局 使用

/**
 * Author : wn
 * Email : maoning20080809@163.com
 * Date : 2026/1/9 22:16
 * Description : LazyHorizontalGrid滚动的水平网格
 */
class LazyHorizontalGridActivity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            testLazyHorizontalGrid()
        }
    }

    @Preview
    @Composable
    private fun testLazyHorizontalGrid(){
        val list = (1..100).toList()
        Column() {
            Spacer(modifier = Modifier.height(20.dp))
            Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center){
                Text(text = "LazyHorizontalGrid左右滚动的水平网格", fontSize = 20.sp, color = Color.Red)
            }
            Spacer(modifier = Modifier.height(20.dp))
            Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center){
                Text(text = "排列从上到下(左边开始)", fontSize = 30.sp)
            }

            LazyHorizontalGrid(GridCells.Fixed(4), contentPadding = PaddingValues(16.dp), content = {
                items(list){item ->
                    Box(
                        modifier = Modifier.size(80.dp).padding(start = 6.dp, end = 6.dp)
                            .background(Color.Red), contentAlignment = Alignment.Center, content = {
                            Text(text = item.toString())
                        }
                    )
                }
            })

        }

    }
}