kotlin 为什么jetpack撰写文本的颜色看起来与预览不同?

egdjgwm8  于 2023-05-01  发布在  Kotlin
关注(0)|答案(2)|浏览(187)

我是Jetpack作曲的新手。我是按照教程和问题是,根据教程的文本颜色是黑色的预览以及在真实的的设备(在教程)

在我的预览中,我也看到颜色是黑色的,然而,当我在我的两个不同的设备上运行应用程序时,我看到颜色是白色的。
我错过了什么?

UPD

package com.example.composableexmp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composableexmp.ui.theme.ComposableExmpTheme

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

@Composable
fun MyApp(content: @Composable () -> Unit) {
    ComposableExmpTheme {
        Surface(
            color = MaterialTheme.colors.background
        ) {
            content()
        }
    }
}

@Preview
@Composable
fun TopHeader(totalPerPerson: Double = 0.0) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .height(150.dp)
            .clip(shape = RoundedCornerShape(corner = CornerSize(12.dp))),
        color = Color(color = 0xFFE9D7F7)
    ) {
        Column(
            modifier = Modifier.padding(12.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
             val total = "%.2f".format(totalPerPerson)

            Text(
                text = "Total Per Person",
                style = MaterialTheme.typography.h5
            )

            Text(
                text = "$$total",
                style = MaterialTheme.typography.h4,
                fontWeight = FontWeight.ExtraBold
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposableExmpTheme {
        MyApp {
            Text(text = "Hello Again")
        }
    }
}
kulphzqa

kulphzqa1#

颜色会根据您的主题进行更改。你应该检查一下主题。在ui.theme文件夹中的kt。

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40

    /* Other default colors to override
    background = Color(0xFFFFFBFE),
    surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
    onSecondary = Color.White,
    onTertiary = Color.White,
    onBackground = Color(0xFF1C1B1F),
    onSurface = Color(0xFF1C1B1F),
    */
)

以及这些颜色是如何选择的

@Composable
fun MyTheme(
    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 {
            (view.context as Activity).window.statusBarColor = colorScheme.primary.toArgb()
            ViewCompat.getWindowInsetsController(view)?.isAppearanceLightStatusBars = darkTheme
        }
    }

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

On Surface是Surface提供的Text的颜色。根据您的主题,它可以是设置为这些颜色的值。

g2ieeal7

g2ieeal72#

可能是因为您的设备低于Android 12?
Theme.kt中生成的Composable具有以下签名

@Composable
fun ComposableExmpTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
…

使应用程序在可用时使用动态配色方案。
IDE预览将使用dynamicDarkColorScheme(context)dynamicLightColorScheme(context)显示,在某种程度上模拟Android 12+设备的行为。而您的物理设备(如果它们的Android〈12)使用您的DarkColorSchemeLightColorScheme
为了快速修复,只需使用您的主题:

ComposableExmpTheme(dynamicColor = false) {
    …
}

或者查看Theme.kt中的代码并根据需要进行调整。
遗憾的是,使用@Preview(apiLevel = Build.VERSION_CODES.R)对预览中显示的配色方案没有任何影响。

相关问题