0
131
ViewsJetpack Compose fila inclinada con botones
Estoy desarrollando una aplicación para Android en Jetpack Compose, que es básicamente un formulario grande. Quería agregarle un poco de estilo con botones personalizados, pero realmente no sé cómo hacerlos.
Lo que estoy tratando de lograr:
En ese diseño habrá 2 botones con un campo de texto en el medio. ¿Cómo puedo inclinarlos para que se vea como la imagen?
2 answers
Answer question0
Puedes construir una forma personalizada como esta:
class ParallelogramShape(private val angle: Float): Shape { override fun createOutline( size: Size, layoutDirection: LayoutDirection, density: Density, ) = Outline.Generic( Path().apply { val width = size.width - size.height / tan(angle) moveTo(size.width - width, 0f) lineTo(size.width, 0f) lineTo(width, size.height) lineTo(0f, size.height) lineTo(size.width - width, 0f) } ) }Y utilízalo así:
val border = BorderStroke(1.dp, Color.Black) val shape = ParallelogramShape(45f) Row( verticalAlignment = Alignment.CenterVertically, modifier = Modifier .padding(10.dp) .border(border, shape = shape) ) { var counter by remember { mutableStateOf(10) } TextButton( onClick = { counter -= 1 }, shape = shape, border = border, modifier = Modifier .height(45.dp) .width(100.dp) ) { Text("-") } Text(counter.toString()) TextButton( onClick = { counter += 1 }, shape = shape, border = border, modifier = Modifier .height(45.dp) .width(100.dp) ) { Text("+") } }Resultado:
0
Esto es lo que pude lograr.
Necesita dos IconButton o Image para incrementar y disminuir el valor del número en TextField .
Utilice Row para organizar los elementos horizontalmente.
Declare un Int para realizar un seguimiento del valor que sigue cambiando con rememberSaveable .
var numberValue: Int by rememberSaveable { mutableStateOf(15) }Ahora finalmente todos los elementos dentro de una fila.
Row( Modifier.background(color = Color.LightGray), verticalAlignment = Alignment.CenterVertically ) { IconButton(onClick = { numberValue - 1 }) { Icon( imageVector = Icons.Rounded.KeyboardArrowDown, tint = Color.Black, contentDescription = null ) } TextField( value = "$numberValue", onValueChange = { numberValue = it.toInt() }, singleLine = true, keyboardOptions = KeyboardOptions( keyboardType = KeyboardType.Number, ), maxLines = 1, modifier = Modifier .width(60.dp) .background(Color.Gray, RectangleShape) .border(1.dp, Color.Gray, RectangleShape), ) IconButton(onClick = { numberValue + 1 }) { Icon( imageVector = Icons.Rounded.KeyboardArrowUp, tint = Color.Black, contentDescription = null ) } } Reemplace los íconos que he usado en ambos IconButton con los suyos. Tome tomar para comprender todos los atributos en TextField .