Programmiererforum

@Preview(showBackground = true, widthDp = 320, heightDp = 320)
@Composable
private fun ModuleGrid() {
val modules = ModuleRegistry.getModulesList().toMutableList()
Box(
contentAlignment = Alignment.Center) {
LazyVerticalGrid(
modifier = Modifier.fillMaxHeight().widthIn(120.dp),
columns = GridCells.Adaptive(minSize = 96.dp),
horizontalArrangement = Arrangement.Center,
verticalArrangement = Arrangement.Center
) {

items(modules,
key = { it.namedTag }
) {
Card(
colors = CardDefaults.cardColors(
containerColor = Color.Transparent
),
modifier = Modifier
.size(120.dp)
.background(Color.Transparent)
.clickable {
launchModule(it)
}
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
it.displayIcon?.let { icon ->
Image(
painter = painterResource(id = icon),
contentDescription = it.displayName,
contentScale = ContentScale.Fit,
modifier = Modifier
.size(96.dp)
.padding(4.dp)
.align(Alignment.CenterHorizontally)
)
}
Text(text = it.displayName, modifier = Modifier
.align(Alignment.CenterHorizontally))
}
}
}
}
}
}

Ich versuche, ein faultes Netz in Jetpack zu implementieren, damit die Elemente horizontal und vertikal ausgerichtet sind. Unten ist mein Code < /p>
[code]@Preview(showBackground = true, widthDp = 320, heightDp = 320)
@Composable
private fun ModuleGrid() {
val modules = ModuleRegistry.getModulesList().toMutableList()
Box(
contentAlignment = Alignment.Center) {
LazyVerticalGrid(
modifier = Modifier.fillMaxHeight().widthIn(120.dp),
columns = GridCells.Adaptive(minSize = 96.dp),
horizontalArrangement = Arrangement.Center,
verticalArrangement = Arrangement.Center
) {

items(modules,
key = { it.namedTag }
) {
Card(
colors = CardDefaults.cardColors(
containerColor = Color.Transparent
),
modifier = Modifier
.size(120.dp)
.background(Color.Transparent)
.clickable {
launchModule(it)
}
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
it.displayIcon?.let { icon ->
Image(
painter = painterResource(id = icon),
contentDescription = it.displayName,
contentScale = ContentScale.Fit,
modifier = Modifier
.size(96.dp)
.padding(4.dp)
.align(Alignment.CenterHorizontally)
)
}
Text(text = it.displayName, modifier = Modifier
.align(Alignment.CenterHorizontally))
}
}
}
}
}
}
[/code]
Das Ausgabeergebnis ist Screenshot
Dieses Element sollte in der Mitte des Bildschirms angezeigt werden. src = "https://i.static.net/dc3ed.png"/>
Ich habe versucht, das horizontale Raster zu verwenden, aber schließlich ein ähnliches Ergebnis erhalten.