为什么 Medium TopAppBar（和 Large）在 compose 中显示两个 TextField？答案

【问题标题】：Why is MediumTopAppBar (and Large) showing two TextField in compose?为什么 Medium TopAppBar（和 Large）在 compose 中显示两个 TextField？
【发布时间】：2023-02-13 20:43:41
【问题描述】：

我正在尝试使屏幕标题可编辑。

MediumTopAppBar(
    title = {
        val name: String? = "Some Title"
        var input by remember { mutableStateOf(name ?: "") }
        when (state.isEditingTitle) {
            true ->
                TextField(
                    value = input,
                    onValueChange = { input = it },
                    keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
                    keyboardActions = KeyboardActions(onDone = {
                        callbacks.onEditTitleChange(editTitle = false, updatedTitle = input)
                    })
                )
            false -> {
                Text(
                    modifier = Modifier.clickable { callbacks.onEditTitleChange(true, null) },
                    text = name ?: "(No Title)"
                )
            }
        }
    },
... more app bar parameters
}

当我单击标题 Text(...) 并且视图被重新组合时，AppBar 显示两个 TextFields

如何忽略最上面的一个，只显示底部的一个，比如 Text() 只显示在底部？

（仅供参考：两个 TextInputs 有自己的记忆状态，并用各自的值调用回调）

奖励问题：如何处理记忆状态“输入”，以便在每次触发onDone 键盘操作时重置？而不是val name: String? = "Some Title"，它当然会是val name: String? = state.stateModel.title行中的东西

【问题讨论】：

这有帮助吗？ stackoverflow.com/a/72637567/5513788
它没有帮助，不，我没有 .material 作为依赖项，除了图标。排版中没有设置颜色。
您是否也在使用 M3 主题？
是的，创建了 AppTheme @Composable。它几乎是 Android Studio 创建的标准类。我无法访问 M2，因为我没有导入它

标签： android-jetpack-compose compose-recomposition

【解决方案1】：

我发现了它为什么这样做，但我不知道如何解决它（除了只是提出我自己的观点并将其放在附近）

查看 MediumTopBar 的函数时很容易看出

// androidx.compose.material3.AppBar.kt

@ExperimentalMaterial3Api
@Composable
fun MediumTopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
) {
    TwoRowsTopAppBar(
        modifier = modifier,
        title = title,
        titleTextStyle = MaterialTheme.typography.fromToken(TopAppBarMediumTokens.HeadlineFont),
        smallTitleTextStyle = MaterialTheme.typography.fromToken(TopAppBarSmallTokens.HeadlineFont),
        titleBottomPadding = MediumTitleBottomPadding,
        smallTitle = title, // <- this thing, right here
        navigationIcon = navigationIcon,
        actions = actions,
        colors = colors,
        windowInsets = windowInsets,
        maxHeight = TopAppBarMediumTokens.ContainerHeight,
        pinnedHeight = TopAppBarSmallTokens.ContainerHeight,
        scrollBehavior = scrollBehavior
    )
}

有一些内部状态恶作剧在进行，可能是在检查第二个 TopAppBarLayout 中显示的 Text（需要更多挖掘才能找到），但不会检查任何其他视图。

TwoRowsTopAppBar和TopAppBarLayout不公开，不能直接使用。

这解释了原因，但看看如何解决它会很有趣（仍然使用中型或大型 -TopAppBar）

【讨论】：

【解决方案2】：

这是开发人员忽视的愚蠢的事情，至少应该被警告。答案是不要为您的 Typography TextStyles 提供默认颜色。

private val BodySmall = TextStyle(
    fontSize = 10.sp,
    lineHeight = 12.sp,
    fontWeight = FontWeight.SemiBold,
    fontFamily = Manrope,
    color = Color.Black // REMOVE THIS
)

val OurTypography = Typography(
    ...
    bodySmall = BodySmall
)

【讨论】：