得到

2026-07-15 16:57:36 +08:00
parent 723ce1af5c
commit 95aa018b8b
314 changed files with 8910 additions and 0 deletions
@@ -0,0 +1,69 @@
+<!---
+This is the API of version 1.2.0
+-->
+
+# LazyVerticalGrid
+
+Jetpack Compose provides an API for displaying grid or grid elements.
+
+# Example
+
+To arrange list items in a grid, ``LazyVerticalGrid`` provides a cells parameter that controls how cells are formed into columns.
+The following example displays the items in a grid, using ``GridCells.Adaptive`` to set the width of each column at least 128.dp:
+
+
+
+<p align="left">
+  <img src ="{{ site.images }}/foundation/lazyverticalgrid/lazyverticalgrid.png" height=100 width=300 />
+</p>
+
+```kotlin
+@Composable
+fun LazyVerticalGridDemo(){
+    val list = (1..10).map { it.toString() }
+
+    LazyVerticalGrid(
+        columns = GridCells.Adaptive(128.dp),
+
+        // content padding
+        contentPadding = PaddingValues(
+            start = 12.dp,
+            top = 16.dp,
+            end = 12.dp,
+            bottom = 16.dp
+        ),
+        content = {
+            items(list.size) { index ->
+                Card(
+                    backgroundColor = Color.Red,
+                    modifier = Modifier
+                        .padding(4.dp)
+                        .fillMaxWidth(),
+                    elevation = 8.dp,
+                ) {
+                    Text(
+                        text = list[index],
+                        fontWeight = FontWeight.Bold,
+                        fontSize = 30.sp,
+                        color = Color(0xFFFFFFFF),
+                        textAlign = TextAlign.Center,
+                        modifier = Modifier.padding(16.dp)
+                    )
+                }
+            }
+        }
+    )
+}
+```
+
+Apart from ``GridCells.Adaptive`` there are other types of cells that provide the number of columns per row. As follows
+```
+colums = GridCells.Fixed(2)
+```
+The above code will display 2 columns in 1 row.
+
+
+
+## See also:
+* [Official Docs]({{ site.composedoc }}/foundation/lazy/package-summary#LazyVerticalGrid)
+* [Full Example Code]({{ site.samplefolder }}/foundation/LazyVerticalGridDemo.kt)