first picture
Look at the code again
package com.xiayiye5.composefirst.components
import android.widget.Toast
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.GridCells
import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
/*
* Copyright (c) 2022, [email protected] All Rights Reserved.
* # #
* # _oo0oo_ #
* # o8888888o #
* # 88" . "88 #
* # (| -_- |) #
* # 0\ = /0 #
* # ___/`---'\___ #
* # .' \\| |# '. #
* # / \\||| : |||# \ #
* # / _||||| -:- |||||- \ #
* # | | \\\ - #/ | | #
* # | \_| ''\---/'' |_/ | #
* # \ .-\__ '-' ___/-. / #
* # ___'. .' /--.--\ `. .'___ #
* # ."" '< `.___\_<|>_/___.' >' "". #
* # | | : `- \`.;`\ _ /`;.`/ - ` : | | #
* # \ \ `_. \_ __\ /__ _/ .-` / / #
* # =====`-.____`.___ \_____/___.-`___.-'===== #
* # `=---=' #
* # ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ #
* # #
* # 佛祖保佑 永无BUG #
* # #
*/
/**
* @author 下一页5(轻飞扬)
* 创建时间:2022/5/3 10:51
* 个人小站:http://yhsh.wap.ai(已挂)
* 最新小站:http://www.iyhsh.icoc.in
* 联系作者:企鹅 13343401268
* 博客地址:http://blog.csdn.net/xiayiye5
* 项目名称:ComposeFirst
* 文件包名:com.xiayiye5.composefirst.components
* 文件说明:LazyVerticalGrid网格布局基本用法
*/
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyVerticalGridSamples() {
val gridList = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
val mContext = LocalContext.current
//设置最大为100dp
LazyVerticalGrid(cells = GridCells.Adaptive(80.dp)) {
//设置为3列显示
// LazyVerticalGrid(cells = GridCells.Fixed(3)) {
items(gridList) {
Card(modifier = Modifier.clickable {
Toast.makeText(mContext, "点击了$it", Toast.LENGTH_SHORT).show()
}) {
Text(
text = "网格布局$it", Modifier.padding(8.dp),
textAlign = TextAlign.Center
)
}
}
}
}
@Preview
@Composable
fun LazyVerticalGridSamplesPreview() {
LazyVerticalGridSamples()
}