Guía Jetpack Compose. Jetpack compose sigue una declaración … | Autor: Samrat Garai | Septiembre de 2021

Modificador – Una colección ordenada e inmutable de elementos de decoración, que se utiliza para decorar o agregar comportamiento a los elementos de la interfaz de usuario de Compose. P.ej, antecedentes, relleno con Oyente de eventos de clic y muchos más. Todos los elementos componibles implementan modificadores.

Modifier
.clickable(onClick = onClick)
.padding(padding)
.fillMaxWidth()

La ondulación en la que se puede hacer clic aquí agrega relleno.

Si cambiamos el orden de las funciones en el modificador, el elemento lo cambiará.

Modifier
.padding(padding)
.clickable(onClick = onClick)
.fillMaxWidth()

4. Botón () –

Button(onClick =  will execute on click , contentPadding = PaddingValues(12.dp)) 
Text(text = "Click here") 

Un caso de uso, queremos cambiar el texto del botón en tiempo de ejecución mostrando el número de veces que se ha hecho clic en el botón.

val text = remember 
mutableStateOf("A test button")

val count = remember 
mutableStateOf(0)

Button(onClick =  text.value = "Clicked $count.value++" , contentPadding = PaddingValues(12.dp)) 
Text(text = text.value,)

¿Por qué recordar?

Antes de comprender, recuerde que debemos comprender la combinación y la recombinación.

trabaja: Una descripción de la interfaz de usuario que crea Jetpack Compose al ejecutar elementos componibles.

Reorganización: Vuelva a ejecutar el combinable para actualizar el combo cuando cambien los datos.

Compose es declarativo, por lo que la única forma de actualizarlo es llamar al mismo componible con nuevos parámetros. Estos parámetros son una representación del estado de la interfaz de usuario.Actualizar un estado en cualquier momento Reorganización ocurrir.

Recuerde, se puede combinar para almacenar un solo objeto en la memoria.Un valor calculado remember Almacenado en Composición durante la combinación inicial y devolvió el valor almacenado durante la recombinación.

remember Almacene el objeto en Composition y olvídelo al llamar a Composable remember Retirar de la combinación. Esto también significa que el estado de la memoria se perderá en el entretenimiento activo.Entonces aquí deberíamos usar rememberSaveable.

5. TextField (): es un texto de edición. Si queremos un texto de edición con contorno, hay otro elemento combinable llamado OutlinedTextField.Requerido para el campo de texto value con onValueChange Como parámetro obligatorio.

TextField(
value = "The initial value to be shown",
onValueChange = 
)// For password
val passwordState = remember  mutableStateOf("") 
Box(modifier = Modifier.fillMaxSize().background(color = Color.White))
TextField(
value = passwordState.value,
onValueChange = 
passwordState.value = it
,
placeholder = ,
visualTransformation = PasswordVisualTransformation(),
)

6. Box () – ¿Qué sucede si solo queremos agregar una vista, por ejemplo, no es una vista de texto o un separador? Por cierto, para separadores como vistas, Divider () se puede combinar. Box es como Stack. Cada nuevo artículo combinable en el rango de la caja se dibujará sobre el artículo combinable anterior.

Box(
modifier = Modifier
.width(52.dp)
.height(26.dp)
.border(
width = 1.dp, color = Color.White, shape = RoundedCornerShape(
topEnd = 10f,
bottomStart = 10f,
)
)
) Box(
modifier = Modifier
.background(
color = Color.White, shape = RoundedCornerShape(
topEnd = 10f,
bottomStart = 10f,
)
)
.width(26.dp)
.height(26.dp)
.align(Alignment.TopEnd),
)

7. Scaffold (): esta es una forma muy sencilla de crear páginas de aplicaciones estándar.Tiene TopAppBar, BottomAppBar, FloatingActionButton, con Drawer. mediante el uso Scaffold, Es fácil asegurarse de que estos componentes estén colocados correctamente.

Scaffold(
drawerContent =  /*...*/ ,
topBar =  /*...*/ ,
content =  /*...*/ 
)