Kotlin

Construir la interfaz de chat

Para poder chatear, necesitaremos crear una nueva Vista para la interfaz de chat. Para simplificar añadiremos una nueva pantalla componible para mostrar la UI del chat, y una tercera componible para gestionar el cambio entre las dos vistas.

En su MainActivity.kt añadir:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ChatScreen() {
    var text by remember { mutableStateOf("") }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Bottom
    ) {
        LazyColumn(
            modifier = Modifier.fillMaxWidth()
        ) {
            
        }
        Row(){
            TextField(
                value = text,
                onValueChange = { text = it },
                label = { Text("Message") }
            )
            Button(onClick = { }) {
                Text("Send")
            }
        }
    }
}

Esta es la interfaz de usuario básica de una aplicación de chat, con LazyColumn que mostrará los mensajes, un TextField para introducir un mensaje y un enviar Button para enviar el mensaje.

A continuación vamos a crear el Composable que gestionará el cambio entre las dos vistas de la interfaz de usuario. Añade el siguiente Composable a tu MainActivity.kt:

@Composable
fun ApplicationSwitcher() {
    val vm = LocalChatState.current
    val error = vm.error
    if (vm.isLoggedIn) {
        ChatScreen()
    } else {
        LoginScreen()
    }
    if(vm.isError){
        Toast.makeText(LocalContext.current, error, Toast.LENGTH_LONG).show()
        vm.isError = false
    }
}

Esto comprobará el estado actual del isLoggedIn y mostrará la interfaz de usuario correcta, también mostrará un icono Toast cuando se captura un error.

Por último, actualice su MainActivity para llamar a la clase ApplicationSwitcher en lugar del LoginScreen:

class MainActivity : ComponentActivity() {
    private val chatState by viewModels<ChatViewModel>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            CompositionLocalProvider(LocalChatState provides chatState) {
                ApplicationSwitcher()
            }
        }
    }
}