android compose LazyVerticalGrid上下滚动的网格布局 使用

android compose LazyVerticalGrid上下滚动的网格布局 使用

/**
 * Author : wn
 * Email : maoning20080809@163.com
 * Date : 2026/1/9 22:00
 * Description : LazyVerticalGrid滚动的网格布局
 */
class LazyVerticalGridActivity : ComponentActivity(){

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

        setContent {
            testLazyVerticalGrid()
        }
    }

    @Preview
    @Composable
    private fun testLazyVerticalGrid(){
        val items = (1..100).toList()
        Column() {
            Spacer(modifier = Modifier.height(20.dp))
            Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center){
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Text(text = "LazyVerticalGrid上下滚动的网格布局", fontSize = 20.sp, color = Color.Green)
                    Spacer(modifier = Modifier.height(20.dp))
                    Text(text = "排列从左到右  -> ", fontSize = 30.sp, color = Color.Black)
                }
            }

            LazyVerticalGrid(GridCells.Fixed(4), contentPadding = PaddingValues(16.dp), content = {
                items(items){ item ->
                    Box(modifier = Modifier.size(50.dp).padding(6.dp)
                        .background(Color.Green), contentAlignment = Alignment.Center, content = {
                        Text(text = item.toString())
                    })
                }
            })
        }

    }
}