android - 如何使用 Firebase 和 Kotlin 在文本 (Jetpack Compose) 中显示当前用户名？

Question

所以，我有一个带有用户名的 Firebase 实时数据库。应用应检索尝试登录的用户的用户名。

Firebase Realtime Database

我需要使用 Jetpack Compose 在 Text() 中显示当前用户的“名称”。到下图中&username的地方。

Where to put user's name

这是我试过的:

private val rootRef = FirebaseDatabase.getInstance().reference
private val uid = FirebaseAuth.getInstance().currentUser!!.uid
private val uidRef = rootRef.child("users").child(uid)

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        MyPassTheme {
            initFirebase()
            WelcomeScreen()

            uidRef.get().addOnCompleteListener { task ->
                if (task.isSuccessful) {
                    val snapshot = task.result
                    val username = snapshot?.child("name")?.getValue(String::class.java)
                    Toast.makeText(baseContext, "$username",
                        Toast.LENGTH_SHORT).show()
                }
            }

但是在 WelcomeScreen() 中，我无法从 addOnCompleteListener 更新 $username。

@Composable
private fun WelcomeScreen() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(blue69),
    )
    Column(
        modifier = Modifier
            .height(605.dp)
            .fillMaxSize()
            .padding(5.dp),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Card(
            shape = RoundedCornerShape(20.dp),
            elevation = 10.dp,
            modifier = paddingModifier
                .height(2.dp)
        ) {
            Text(text = widthOnTopBar, modifier = paddingModifier)
        }
    }
    Column(
        modifier = Modifier
            .padding(30.dp)
            .width(1500.dp)
            .height(270.dp)
            .fillMaxWidth()
            .wrapContentSize(Alignment.BottomCenter)
    ) {
        Text(
            modifier = Modifier,
            text = "&username",
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.h4.copy(
                shadow = Shadow(
                    offset = Offset(2f, 2f),
                    blurRadius = 1f
                ),
                color = Color.White,
                fontSize = 45.sp,
                fontFamily = montserrat_bold
            )
        )
    }

我想有一些关于数据类和 OOP 的东西，但我不知道该怎么做。

Answer 1

不确定这是否可行，但您可以尝试一下。

我们添加了一个 userName 状态，它将从您的 addOnCompleteListener 回调中更新，当它发生变化时，它将更新您的 WelcomeScreen

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        MyPassTheme {

            var userName by remember { mutableStateOf("") }
            ...
            WelcomeScreen(userName)

            uidRef.get().addOnCompleteListener { task ->
                if (task.isSuccessful) {
                    val snapshot = task.result
                    userName = snapshot?.child("name")?.getValue(String::class.java)
                    Toast.makeText(
                        baseContext, "$username",
                        Toast.LENGTH_SHORT
                    ).show()
                }
            }
        }
    }
}

和你修改过的WelcomeScreen

@Composable
private fun WelcomeScreen(userName: String) {

    ...

    Column(
         ...
    ) {
        Text(
            ...
            text = userName,
            ...
        )
    }
}