Inicio » Blog » Kotlin

25 abril, 2024

¿Cómo sumar en Android con Kotlin JetPack Compose?

Aquí te muestro un ejemplo de cómo sumar dos números ingresados por el usuario en dos campos de texto en Jetpack Compose:

¿Cómo sumar en Android con Kotlin JetPack Compose?

Suscríbete a nuestro canal en Youtube

Suscríbirse

En Jetpack Compose, la forma de manejar la UI es bastante diferente a la tradicional con XML y las clases de actividad en Android. En lugar de manipular directamente los elementos de la interfaz de usuario en el código de la actividad, defines la interfaz de usuario mediante funciones y composables en Kotlin.

package codea.app.sumar

import android.os.Bundle
import android.widget.TextView
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import codea.app.sumar.ui.theme.SumarTheme
import java.util.Locale

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
           suma()
        }
    }
}


@Composable
fun suma() {
    var numero1 by remember {
        mutableStateOf("")
    }
    var numero2 by remember {
        mutableStateOf("")
    }
    var total by remember {
        mutableStateOf(0.0)
    }
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center

    ) {
        texto(title = "Numero 1", text = numero1, onValueChange = {numero1 = it} )
        Spacer(modifier = Modifier.height(20.dp))
        texto(title = "Numero 2", text = numero2, onValueChange = {numero2 = it} )
        Spacer(modifier = Modifier.height(20.dp))
        Button(onClick = {
            total = numero1.toDouble() + numero2.toDouble()
        }) {
            Text(text = "Calcular")
        }
        Spacer(modifier = Modifier.height(20.dp))
        Text(
            text = " ${String.format(Locale.US,"%.2f",total)}"
        )
    }

}
@Composable
fun texto(
    title :String,
    text:String,    
    onValueChange:(String)->Unit
){
    TextField(
        value = text, 
        onValueChange = onValueChange,
        label = {
            Text(text = title)
        }
    )
}

Leido 419 veces

Compartir link del tutorial con tus amigos


Kotlin Desarrollo de una App para Bazar Kotlin Desarrollo de una App para Bazar

Curso de Kotlin aprende a desarrollar una App básica para un Bazar

Descarga del código fuente

USD 50.00

Aprende más sobre Kotlin

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023