jetpack compose 宫格列表,请给出代码
时间: 2024-09-14 21:15:57 浏览: 67
Jetpack Compose入门到精通
Jetpack Compose 中的宫格列表通常使用 `Grid` 或 `Column` 结构配合 `Row` 组件来创建,每个单元格可以是一个 `Box` 或者 `Modifier.fillMaxSize()` 等自适应组件。这里有一个简单的例子展示如何使用 `Grid` 创建一个两列的宫格列表:
```kotlin
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
@Composable
fun GridViewExample() {
Column(
modifier = Modifier.fillMaxWidth()
.padding(16.dp)
) {
Grid(
columns = 2,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxHeight()
) {
for (i in 0 until 4) {
Row(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.size(150.dp).weight(1f)
) {
Box(modifier = Modifier.size(70.dp)) {
Text(text = "Item $i", color = MaterialTheme.colors.onSurface)
}
Box(modifier = Modifier.size(80.dp)) {
Text(text = "Another item", color = MaterialTheme.colors.onSurface)
}
}
}
}
}
}
```
这个例子中,我们创建了一个两列的网格,每一行有两个 `Box` 元素,分别代表宫格中的两个元素。你可以根据需要替换 `Text` 成其他 UI 组件。
阅读全文