0
325
VistasMenú desplegable clips/encoge elementos Jetpack Compose
Estoy creando un menú desplegable donde los elementos contienen un elemento de texto y un ícono (un espaciador en el medio); pero solo el primer texto se muestra completo. El ícono solo es visible cuando hay otro elemento que ocupa más espacio.
@Preview(showSystemUi = true) @Composable fun MyScreen() { Box(Modifier.fillMaxSize(), Alignment.Center) { Box() { var expanded by remember { mutableStateOf(false) } IconButton(onClick = { expanded = !expanded }) { Icon(imageVector = Icons.Default.MoreVert, contentDescription = null) } DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) { MyMenuItem("item 1") // Icon visible MyMenuItem("item 2") // Icon visible MyMenuItem("item 3 long text") // Icon width shrunk to 0 MyMenuItem("item 4 long te") // Icon visible but shrunk } } } } @Composable fun MyMenuItem(text: String) { DropdownMenuItem(onClick = { }) { Text(text) Spacer(modifier = Modifier.weight(1f)) Icon(imageVector = Icons.Default.Check, contentDescription = null) // <-- Icon } }Nota :
- También intenté usar
Row()ySurface()en lugar deDropdownMenuItem()pero el resultado es similar. - Dar ancho a
MyMenuItem()funciona; pero quiero que se dimensione automáticamente según el contenido.
1 Respuestas
Responde la pregunta0
En términos generales, para crear un diseño de este tipo, solo necesita aplicar Modifier.weight(1f) a su Text .
También necesita Modifier.width(IntrinsicSize.Max) para que su Column haga que el ancho sea igual al elemento más ancho, pero en su caso ya está integrado en DropdownMenu .
Pero luego aparece este error , que no le permite dimensionar correctamente su MyMenuItem con el Icon dentro. Pon una estrella para llamar más la atención.
Como solución temporal hasta que se solucione este error, puede especificar el tamaño del icono manualmente, así:
// copied from the source code as it's internal const val MaterialIconDimension = 24f @Composable fun MyMenuItem(text: String) { DropdownMenuItem( onClick = { } ) { Text(text, Modifier.weight(1f)) Icon( imageVector = Icons.Default.Check, contentDescription = null, modifier = Modifier.size(MaterialIconDimension.dp) ) } }Resultado:
