Compose横向列表和网格列表

列表和网格列表"/>

Compose横向列表和网格列表

横向列表LazyRow

LazyRow和LazyColumn使用类似。

/*** 横向列表LazyRow*/
@Composable
fun LazyRowTest() {val context = LocalContext.currentval dataList = arrayListOf<Int>()for (index in 1..50) {dataList.add(index)}LazyRow {items(dataList) { data ->Box(modifier = Modifier.fillMaxHeight().padding(start = 1.dp).background(Color.White).clickable {Toast.makeText(context, "$data", Toast.LENGTH_SHORT).show()}.padding(10.dp),) {Text(text = "第${data}条数据",modifier = Modifier.align(Alignment.Center), // 设置上下居中)}}}
}

垂直网格布局LazyVerticalGrid

垂直网格布局使用LazyVerticalGrid组件，GridCells.Adaptive以最小宽度设置横向排列数量，GridCells.Fixed直接设置横向排列数量。

/*** 垂直网格布局（纵向滑动）*/
@Composable
fun LazyVerticalGridTest() {val photos = arrayListOf<Int>()for (index in 0..50) {photos.add(R.drawable.img)}LazyVerticalGrid(//以最小宽度设置横向排列数量
//        columns = GridCells.Adaptive(minSize = 120.dp)//直接设置横向排列数量columns = GridCells.Fixed(count = 3)) {items(photos) { photo ->Image(painter = painterResource(photo),"",modifier = Modifier.padding(2.dp))}}
}

水平网格布局LazyHorizontalGrid

 水平网格布局和垂直网格布局类似，只是纵向滑动变成了横向滑动，属性值和垂直网格布局相反。

/*** 水平网格布局（横向滑动）*/
@Composable
fun LazyHorizontalGridTest() {val photos = arrayListOf<Int>()for (index in 0..50) {photos.add(R.drawable.img)}LazyHorizontalGrid(//以最小大小设置纵向排列数量rows = GridCells.Adaptive(minSize = 120.dp)//设置纵向排列数量
//        rows = GridCells.Fixed(count = 6)) {items(photos) { photo ->Image(painter = painterResource(photo),"",modifier = Modifier.padding(5.dp))}}
}