Pasar un evento de clic a una función en Android Jetpack Compose

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *