Kotlin

Aufbau der Chat-Schnittstelle

Um chatten zu können, müssen Sie eine neue Ansicht für die Chat-Schnittstelle erstellen. Der Einfachheit halber fügen wir einen neuen zusammensetzbaren Bildschirm hinzu, um die Chat-Oberfläche anzuzeigen, und einen dritten zusammensetzbaren Bildschirm, um den Wechsel zwischen den beiden Ansichten zu verwalten.

In Ihrem MainActivity.kt hinzufügen:

@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")
            }
        }
    }
}

Dies ist die grundlegende Benutzeroberfläche einer Chat-Anwendung, mit LazyColumn die die Nachrichten anzeigt, eine TextField zur Eingabe einer Nachricht und eines Sende Button um die Nachricht zu senden.

Als Nächstes erstellen wir die Composable, die das Umschalten zwischen den beiden UI-Ansichten verwalten wird. Fügen Sie die folgende Composable zu Ihrer 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
    }
}

Damit wird der aktuelle Zustand der isLoggedIn Flagge und die richtige Benutzeroberfläche anzeigt, wird auch eine Toast wenn ein Fehler aufgetreten ist.

Aktualisieren Sie schließlich Ihre MainActivity Klasse zum Aufruf der ApplicationSwitcher anstelle der LoginScreen:

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

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