使用 Mdc3Theme 将 XML 主题应用到 Composable

Pat*_*ang 9 android mdc-components android-jetpack-compose

我正在尝试将应用程序从 XML 布局迁移到 jetpack compose。由于该应用程序允许设置不同的用户主题,因此我想使用 XML 主题,直到所有文件都迁移完毕。但是,我就是无法让它发挥作用。

基本上我正在按照 https://material-components.github.io/material-components-android-compose-theme-adapter/#compose-material-3中的描述进行操作

我有一个带有定义的可组合项的简单活动:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import at.example.myapp.ui.composables.about.About
import com.google.android.material.composethemeadapter3.Mdc3Theme

class AboutActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        setTheme(MainActivity.getUserTheme(this))
        super.onCreate(savedInstanceState)
    
        setContent {
            // Use MdcTheme instead of MaterialTheme
            // Colors, typography, and shape have been read from the
            // View-based theme used in this Activity
    
            Mdc3Theme {
                About()
            }
        }
    }

}
Run Code Online (Sandbox Code Playgroud)

setTheme(...) 正确加载主题,最顶部的颜色被正确设置,但没有其他。所有其他颜色、样式和字体均未在可组合项中设置。About() 可组合项本身没有什么特别的,只有一些文本、图像和一张卡片。

我正在导入以下版本:

    //JETPACK COMPOSE
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.4.0'
    // Compose Material Design
    implementation 'androidx.compose.material:material:1.1.1'
    // Animations
    implementation 'androidx.compose.animation:animation:1.1.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.1.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.1.1'
    // Theme compatibility with XML
    implementation "com.google.android.material:compose-theme-adapter-3:1.0.6"
Run Code Online (Sandbox Code Playgroud)

所以 compose-theme-adapter-3 实际上应该完成这项工作(如果我正确理解文档的话)。我尝试了 Mdc3Theme { ... } 的不同组合和参数,但没有成功,颜色不会加载。

在资源中,我按照材质 3 的预期定义了颜色:

<resources>
    <!-- Base application theme. -->
    <style name="Theme.MyApp" parent="Theme.Material3.Light.NoActionBar">
        <item name="colorPrimary">@color/md_theme_light_primary</item>
        <item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
        <item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
        <item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
        <item name="colorSecondary">@color/md_theme_light_secondary</item>         ...
Run Code Online (Sandbox Code Playgroud)

由于我找不到其他示例,我希望基本上加载主题是正确的,如下所示:

setContent {
// Use MdcTheme instead of MaterialTheme
// Colors, typography, and shape have been read from the
// View-based theme used in this Activity

            Mdc3Theme {
                About()
            }
        }
Run Code Online (Sandbox Code Playgroud)

使用 compose-theme-adapter(针对 Material 2)也没有帮助。我真的被困在这里了。有没有人可以提供帮助或提供有关如何从 XML 正确应用 Mdc3 主题的示例?

编辑:为了完成,这里还有 About() 可组合项:


@Composable
fun About() {

    val defaultPadding = 8.dp
    val widePadding = 16.dp

    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            ImageVector.vectorResource(id = R.drawable.ic_babyfootsteps),
            null,
            modifier = Modifier
                .padding(widePadding)
                .size(100.dp, 100.dp)
                .background(Color(0xFFFF0077))
        )
        Text(
            stringResource(id = R.string.app_name),
            fontSize = 24.sp,
            modifier = Modifier.padding(defaultPadding),
        )
        Text(stringResource(id = R.string.about_app_version, BuildConfig.VERSION_NAME, BuildConfig.VERSION_CODE))
        Text(stringResource(id = R.string.about_app_codename, BuildConfig.versionCodename))

        Spacer(modifier = Modifier.padding(defaultPadding))
...
Run Code Online (Sandbox Code Playgroud)