JetpackCompose 按钮在深色和浅色模式下的文本颜色问题

Question

我是移动开发新手，编写了我的第一个自己的程序。我制作了简单的计算器应用程序，如果您更改手机模式，它的颜色就会改变。一切似乎都工作正常，但有一件事，当我单击“AC”按钮更改为“C”时，在插入一些数字后，即使我的手机处于深色模式，该按钮的文本也会更改为白色，因此它应该是黑色的。这是我的主要活动

setContent {
            CalculatorTheme  {
                Surface {
                    val context = LocalContext.current
                    CalcApp(viewModel, context = context)
                }
            }
        }

这是我的 CalcApp 函数，直到这个按钮：

@SuppressLint("MutableCollectionMutableState", "CoroutineCreationDuringComposition")
@Composable
fun CalcApp(
    viewModel: viewModel,
    context: Context,
) {

    val scope = rememberCoroutineScope()
    var currentValue by rememberSaveable {
        mutableStateOf("")
    }
    var timesClicked by rememberSaveable {
        mutableIntStateOf(0)
    }



    fun getTextAC (length: Int): String{
        return if (length != 0){
            "C"
        } else {
            "AC"
        }
    }



        Column () {
            Spacer(modifier = Modifier.weight(9f))
            Text(
                fontWeight = FontWeight.W300,
                maxLines = 1,
                color = MaterialTheme.colorScheme.primary,
                text = currentValue,
                fontSize = getFontSize(timesClicked),
                modifier = Modifier
                    .align(Alignment.End)
                    .padding(end = 10.dp, start = 10.dp)
            )
            Row (
                modifier = Modifier
                    .padding(start = 6.dp)
            ) {
                Column (
                    modifier = Modifier.padding(start = 7.5.dp)
                ) {
                    Row {
                        Column () {
                            Button(
                                contentPadding = PaddingValues.Absolute(),
                                colors = ButtonDefaults.outlinedButtonColors(
                                    containerColor = MaterialTheme.colorScheme.tertiaryContainer
                                 )
                                onClick = {
                                    currentValue = ""
                                    timesClicked = 0
                                },
                                modifier = Modifier
                                    .size(80.dp)
                            // Toggle enabled state based on acIsPressed
                            ) {
                                Text(
                                    maxLines = 1,
                                    text = getTextAC(currentValue.length),
                                    fontWeight = FontWeight.W300,
                                    fontSize = 40.sp,
                                    color = LocalContentColor.current
                                )
                            }
                            Spacer(modifier = Modifier.height(15.dp))
                        }
                        Spacer(modifier = Modifier.width(15.dp))
                    }

这是我的主题：

package com.example.calculator.ui.theme

import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat

private val DarkColorScheme = darkColorScheme(
    background = Color.Black,
    onBackground = Color.White,
    primary = Color.White,
    primaryContainer = Color.DarkGray,
    secondary = Color.White,
    secondaryContainer = Color(0xFFEB9828),
    tertiary = Color.Black,
    tertiaryContainer = Color.LightGray,

)

private val LightColorScheme = lightColorScheme(
    background = Color.White,
    onBackground = Color.Black,
    primary = Color.Black,
    primaryContainer = Color.LightGray,
    secondary = Color.Black,
    secondaryContainer = Color(0xFFE69339),
    tertiary = Color.White,
    tertiaryContainer = Color.Gray,
    )

@Composable
fun CalculatorTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

我已经尝试使用 viewModel 设置颜色，它应该根据手机模式更新颜色，每次更改后，我尝试使用主题设置这些颜色，但每次我按“AC”按钮时，文本颜色都会混乱这个按钮，如果我将模式更改为浅色试图解决这个问题，我的其他颜色就会与它一起混乱。

Answer 1

您的计算器应用程序似乎结合使用了 Jetpack Compose 和 Material3 库。您可以尝试使用 Modifier.background 属性根据主题设置背景颜色，而不是直接在按钮中处理按钮颜色。

尝试这样：

Button(
    onClick = {
        currentValue = ""
        timesClicked = 0
    },
    modifier = Modifier
        .size(80.dp)
        .background(MaterialTheme.colorScheme.tertiaryContainer)
) {
    Text(
        maxLines = 1,
        text = getTextAC(currentValue.length),
        fontWeight = FontWeight.W300,
        fontSize = 40.sp,
        color = MaterialTheme.colorScheme.primary
    )
}