En Jetpack Compose , podemos crear funciones para crear cualquier tipo de elemento de interfaz de usuario. Supongamos que creamos una función para crear un botón, podemos usarla varias veces para crear varios botones. Mientras creamos varios botones, podemos agregarles funcionalidad para realizar cualquier tarea determinada, a lo que llamamos evento al hacer clic. Entonces, en este artículo, le mostraremos cómo puede crear una función de este tipo y pasar un evento de clic a otra función en Android usando Jetpack Compose. Siga los pasos a continuación una vez que el IDE esté listo.
Implementación paso a paso
Paso 1: crea un nuevo proyecto en Android Studio
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Al elegir la plantilla, seleccione Actividad de composición vacía . Si no encuentra esta plantilla, intente actualizar Android Studio a la última versión. Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.
Paso 2: trabajar con el archivo MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
package com.geeksforgeeks.jcpassonclicktofunction import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.* import androidx.compose.material.* import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { // Calling the composable function // to display element and its contents MainContent() } } } // Creating a composable // function to display Top Bar @Composable fun MainContent(){ Scaffold( topBar = {TopAppBar( title = {Text( "GFG | Change Button Size", color = Color.White)}, backgroundColor = Color(0xff0f9d58) ) }, content = { MyContent()} ) } // Creating a composable function to create // three buttons and add functionality to them // to add or subtract from the counter value // Calling this function as content in the above function @Composable fun MyContent() { // Declaring a value to store the counter value // Initially this value is set to 0 val mCounter = remember { mutableStateOf(0)} Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { // Displaying the mCounter value as Text Text(text = mCounter.value.toString(), fontSize = 50.sp) // Adding a space of 50dp Spacer(modifier = Modifier.height(50.dp)) // Calling CreateButton function to create a button, // on click will increase counter value by 5 CreateButton(text = "Add 5") { mCounter.value += 5 } // Adding a space of 50dp Spacer(modifier = Modifier.height(50.dp)) // Calling CreateButton function to create a button, // on click will increase counter value by 10 CreateButton(text = "Add 10") { mCounter.value += 10 } Spacer(modifier = Modifier.height(50.dp)) // Calling CreateButton function to create a button, // on click will decrease counter value by 5 CreateButton(text = "Subtract 5") { mCounter.value -= 5 } } } // Creating a composable // function to create a button @Composable fun CreateButton(text:String, onClick: ()-> Unit){ Button( onClick = onClick, colors = ButtonDefaults.buttonColors(backgroundColor = Color(0XFF0F9D58)) ){ Text(text = text, color = Color.White) } } // For displaying preview in the // Android Studio IDE emulator @Preview(showBackground = true) @Composable fun DefaultPreview() { MainContent() }
Producción:
El siguiente video es el funcionamiento de nuestra aplicación. Puede ver que Todos los botones son funcionales y cambiar el valor del Contador al hacer clic.
Publicación traducida automáticamente
Artículo escrito por aashaypawar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA