Kotlin

チャットインターフェースの構築

チャットができるようにするには、チャットインターフェイス用の新しいビューを作成する必要があります。簡単にするために、チャット UI を表示する新しいコンポーザブルスクリーンを追加し、2 つのビューの切り替えを管理する 3 番目のコンポーザブルを追加します。

あなたの MainActivity.kt を追加した：

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

これは基本的なチャットアプリケーションのUIです。 LazyColumn メッセージを表示する TextField でメッセージを入力し Button を送信する。

次に、2つのUIビューの切り替えを管理するコンポーザブルを作成しましょう。以下のコンポーザブルを 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
    }
}

の現在の状態をチェックする。 isLoggedIn フラグを立て、正しいUIを表示させる。 Toast エラーが発生した場合

最後に MainActivity クラスを呼び出す。 ApplicationSwitcher の代わりに LoginScreen:

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

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