Android Compose中Scaffold内Text初始显示异常问题求助

在小米Pocophone F1（Android 10.0，API 29）设备调试时，使用Compose Material3的Scaffold组件出现以下异常：

• 应用初始启动时，Scaffold内的Text组件显示为白色（几乎不可见）
• 旋转手机后文本恢复正常黑色
• 跳转至第二个Activity再返回后文本也正常，但第三次往返后问题复现且无法恢复
• 怀疑与ExperimentalMaterial3Api有关，但不确定

复现代码 #

package com.test.pricejournal

import android.app.Activity
import android.content.Intent
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.test.pricejournal.ui.theme.PriceJournalTheme

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

    private fun navigateToSecondActivity() {
        val intent = Intent(this, AddShopActivity::class.java)
        startActivity(intent)
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun MainUI() {
        val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

        Scaffold(
            modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
            topBar = {
                CenterAlignedTopAppBar(
                    colors = TopAppBarDefaults.topAppBarColors(
                        containerColor = MaterialTheme.colorScheme.primaryContainer,
                        titleContentColor = MaterialTheme.colorScheme.primary,
                    ),
                    title = {
                        Text(
                            "Price Journal",
                            maxLines = 1,
                            overflow = TextOverflow.Ellipsis
                        )
                    },
                    scrollBehavior = scrollBehavior,
                )
            },
        ) { innerPadding ->
            Column(
                modifier = Modifier.padding(innerPadding),
                verticalArrangement = Arrangement.spacedBy(16.dp),
            ) {
                Text(
                    color = Color.Black,
                    modifier = Modifier.padding(8.dp),
                    text =
                    """
                    This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.

                    It also contains some basic inner content, such as this text.
                """.trimIndent()
                )
                OutlinedButton(
                    onClick = { navigateToSecondActivity() },
                    modifier = Modifier.padding(8.dp)
                ) {
                    Text("Add Shop")
                }
            }
        }
    }

    @Preview(showBackground = true)
    @Composable
    fun DefaultPreview() {
        MainUI()
    }
}

1. 替换硬编码颜色为主题适配色 #

硬设置Color.Black会忽略主题的颜色适配逻辑，当系统或主题的背景色发生变化时，可能出现文本与背景色对比度极低的情况。改用Material3主题提供的onSurface颜色，会自动根据当前背景色选择合适的文本对比色：

Text(
    color = MaterialTheme.colorScheme.onSurface, // 替换Color.Black
    modifier = Modifier.padding(8.dp),
    text = """
        This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.

        It also contains some basic inner content, such as this text.
    """.trimIndent()
)

2. 确保主题完整应用 #

原代码中MainUI未包裹在PriceJournalTheme内部，导致MaterialTheme.colorScheme的上下文可能不完整。修改setContent部分：

setContent {
    PriceJournalTheme {
        MainUI()
    }
}

3. 升级Material3到稳定版 #

早期ExperimentalMaterial3Api标记的组件存在状态恢复类bug，升级到稳定版后（如material3:1.1.0及以上），CenterAlignedTopAppBar、Scaffold等组件已脱离实验状态，可避免生命周期交互时的异常。

4. 优化ScrollBehavior的状态管理 #

将scrollBehavior的创建包裹在remember中，确保配置变化和Activity重建时状态正确恢复：

val scrollBehavior = remember {
    TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
}

应用以上修改后，重新测试启动、屏幕旋转、多次Activity往返场景，即可解决文本颜色异常问题。

内容的提问来源于stack exchange，提问作者Remend