标签: android-jetpack-compose-material3

在使用edge2edge显示应用程序时，我遇到了一种情况scaffold，根据官方文档，脚手架填充值用于偏移顶部和底部栏（如果存在）。事实证明，当我使用脚手架而不提供顶部/底部参数时，脚手架的内容会自动在顶部和底部填充空白

topBar如果我为或提供参数bottomBar，则另一个参数会自动填充空格。

Catch ：WindowCompat.setDecorFitsSystemWindows(window, false)这仅在使用时发生

代码片段：

WindowCompat.setDecorFitsSystemWindows(window, false) //commenting this line of code gives desired results but defeates the E2E display

    setContent {
        TestTheme {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Cyan)
            ) {
                Scaffold(
                    modifier = Modifier
                        .fillMaxSize(0.8f)
                        .align(Alignment.Center),

                    ) { paddingValues ->

                    Box(
                        modifier = Modifier
                            .padding(paddingValues)
                            .fillMaxSize()
                            .background(Color.White)
                    ) {

                        Log.d("scaffold", "padding values = $paddingValues")

                        Text("Android")
                    }

                }
            }

        }
    }

未评论： ------ 评论：

-----

问：请问，这种行为的原因是什么？如何在不添加不必要的填充的情况下使用脚手架实现有效的 …

最近，我一直在尝试将 Material3 与 Jetpack Compose 结合使用，并且我的一个屏幕中需要一个抽屉和一个支架。遗憾的是ScaffoldMaterial3中还没有支持抽屉，但幸运的是ModalNavigationDrawer可以找到替代品。但是，使用 ModalNavigationDrawer 时，抽屉打开时抽屉的内容始终覆盖整个屏幕，并且我找不到任何参数将其宽度设置为正确的值，例如屏幕宽度的一半。我有什么办法可以解决这个问题吗？我的 compose 版本是1.2.0-beta02，material3 版本是1.0.0-alpha12。

今天我发现 MaterialTheme 对文本颜色应用了 alpha 值。正如您从所附示例中看到的，当我更改背景颜色时，文本的颜色似乎有所不同，因为它具有透明度值。我可以强制设置颜色 ( Text(color = MaterialTheme.colors.onBackground, ....)) 并且这可以正常工作，但我不想对每个文本都执行此操作。

MaterialTheme 为什么要这样做？我该如何覆盖这种行为？

Compose 和 Material Compose Material 版本：1.2.1

@Preview
@Composable
private fun Preview_Playground() {
    MaterialTheme {
        Box(Modifier.background(Color.Green)) {
            Text("Test", fontWeight = FontWeight.ExtraBold, modifier = Modifier.alpha(1f))
        }
    }
}

我开始学习 Jetpack Compose，如何使用 Material3 依赖项实现一个简单的小吃栏看起来令人困惑。

文档显示我需要一个脚手架，并且它需要带有填充的内容（？）。我需要将屏幕可组合放在 lambda 脚手架中吗？如何将消息文本传递到 Snackbar？我有一个简单的流收集器，用于来自视图模型的事件，我想将错误文本传递到小吃栏。

Test()
LaunchedEffect(Unit) {
    viewModel.loginEvent.collect {
        when (it) {
            is LoginViewModel.LoginEvent.Error -> {
             // show snackbar with it.error
            }
       
            is LoginViewModel.LoginEvent.Success -> {
              // 
            }
        }
    }
}

@Composable
fun Test() {
    Box(modifier = Modifier.fillMaxSize()) {
//my composable screen
}

我试图让这个下拉菜单变得动态。当我在文本字段中输入内容时，我希望列表能够更新（根据用户输入的内容进行过滤），并且用户可以从过滤后的下拉列表中进行选择。

我在这里检查了开发文档中的示例代码 https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ExposeDropdownMenuBox(kotlin.Boolean,kotlin.Function1,androidx.compose .ui.修饰符,kotlin.Function1)

我发现材质 3 下拉菜单在展开状态下会阻止用户输入。如果用户开始输入并且我们说

onValueChange = { 
        selectedOptionText = it
        expanded = true
}

用户被阻止进一步输入，因为展开的 ExposedDropdownMenu 会阻止用户输入

如何使文本字段动态打开下拉菜单，并根据用户输入更新列表？并且列表项是可选的

为了添加更多上下文，我知道如果我们说properties = PopupProperties(focusable = false)，DropdownMenu不会阻止用户输入

DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            properties = PopupProperties(focusable = false)
        )

但 UI 行为并不相同。我正在寻找 DropdownMenuBox 行为 DropdownMenu 属性 = PopupProperties(focusable = false)

我已将 Material 依赖项从 Material 更改为 Material 3，但我无法导入 androidx.compose.material3.rememberDismissState，因为 google 文档Material 3 组件说任何人都知道为什么它不导入？

已解决：原来是1.1.0版本，还不稳定，所以暂时使用1.1.0-rc01版本。

我在这个视频的帮助下编码，

https://developer.android.com/codelabs/basic-android-kotlin-compose-using-state?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit- 2-pathway-3%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-using-state#1

我写了这个可组合函数，

@Composable
fun EditNumberField() {
    TextField(value = "", onValueChange = {})
}

这个 TextField() 显示红色错误说

This material API is experimental and is likely to change or to be removed in the future

我在代码的开头导入了它，

import androidx.compose.material3.TextField

请给我一些关于如何修复此错误的建议，或者建议一些替代方案（如果它已被其他内容替换）。

当在两个屏幕之间导航时，每个屏幕都有一个带有 TopAppBar 的脚手架，TopAppBar 会以动画方式退出 UI 并返回。（在我的示例中短暂的白色闪烁，就像按钮动画一样）

我想这种行为是预期的，因为 compose 无法知道，这两者应该被视为相同。

有没有什么方法可以防止这种行为，而不将标题状态提升到 MainNavigation 可组合项，以便仅在导航上重绘标题？我认为在 flutter 中几乎所有小部件都有一个名为“key”的属性，jetpack compose 中也有类似的属性吗？

对于这个小例子来说，这很好，但是当有一个更复杂的导航图时，我担心 MainNavigation 会因属于其他地方的语义而过载，例如加载数据以显示项目名称......

代码

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            UnwelcomeNavAnimationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainNavigation()
                }
            }
        }
    }
}


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainNavigation() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "screen1") {
        composable("screen1") {
            Scaffold( …

我正在尝试使用 Scaffold 和 LargeTopAppBar 构建 Jetpack Compose 应用程序。我目前有一个非常简单的 UI，只有 Scaffold 中的 LargeTopAppBar，但是当我运行我的应用程序时，我在屏幕顶部看到两个小标题。

有什么想法为什么会发生这种情况或如何解决它？我的活动代码如下

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : MonetCompatActivity() {

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

        lifecycleScope.launchWhenCreated {
            monet.awaitMonetReady()
            setContent {
                TVTimeTheme(monetCompat = monet) {
                    val decayAnimationSpec = rememberSplineBasedDecay<Float>()
                    val topAppBarScrollState = rememberTopAppBarScrollState()
                    val scrollBehavior = remember(decayAnimationSpec) {
                       TopAppBarDefaults.exitUntilCollapsedScrollBehavior(
                          decayAnimationSpec, topAppBarScrollState
                       )
                    }

                    Scaffold (
                        topBar = {
                            LargeTopAppBar(
                                title = { Text(text = "movies") },
                                scrollBehavior = scrollBehavior
                            )
                        }
                   ) { innerPadding ->
                       Box(modifier = Modifier.padding(innerPadding))
                   }
               }
           } …

我正在尝试compose compiler 1.3.2通过升级到来升级到kotlin 1.7.20，但我不断收到错误消息Caused by: org.gradle.api.internal.artifacts.ivyservice.DefaultLenientConfiguration$ArtifactResolveException: Could not resolve all files for configuration ':app:debugRuntimeClasspath'.

我正在使用 android studio 海豚

如果我恢复我compose compiler to 1.2.0的那么kotlin 1.7.0它工作正常。

根 gradle 文件。

buildscript {
    ext {
        compose_version = '1.3.2'
    }
    dependencies {
        classpath "com.google.dagger:hilt-android-gradle-plugin:2.42"
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.3.0' apply false
    id 'com.android.library' version '7.3.0' apply false
    id 'org.jetbrains.kotlin.android' version '1.7.20' …