Jetpack Compose TopBar 和 BottomBar Default Elevation 内容未填满其容器答案

【问题标题】：Jetpack Compose TopBar and BottomBar Default Elevation content doesn't fill its containerJetpack Compose TopBar 和 BottomBar Default Elevation 内容未填满其容器
【发布时间】：2021-08-27 00:14:18
【问题描述】：

如何修复顶部栏和底部栏未填满其容器。 topbar 和 bottombar 分别使用默认的 Elevation

您可以看到顶部栏没有填充最大宽度并且有阴影，而底部栏有自己的文字

Scaffold(
        topBar = {
            TopAppBar(
                title = { Text( text = "TEST" ) },
                actions = {
                    IconButton(
                        onClick = { },
                    ) {
                        Icon(
                            imageVector = Icons.Filled.AccountCircle,
                            contentDescription = null
                        )
                    }
                },
            )
        },
        bottomBar = {
           BottomNavigation
            {
                val navBackStackEntry by bottomAppBarNavController.currentBackStackEntryAsState()
                val currentDestination = navBackStackEntry?.destination

                bottomBarItems.forEach { mainRoute ->
                    BottomNavigationItem(
                        selected = currentDestination?.hierarchy?.any { it.route == mainRoute.route } == true,
                        icon = {
                            Icon(
                                imageVector = mainRoute.icon,
                                contentDescription = stringResource(id = mainRoute.resourceId),
                            )
                        },
                        label = { Text( text = stringResource(id = mainRoute.resourceId), ) },
                        onClick = { },
                        alwaysShowLabel = false // This hides the title for the unselected items
                    )

                }
            }
        }
    ){

    }

【问题讨论】：

标签： android kotlin android-jetpack-compose android-elevation android-jetpack-compose-scaffold

【解决方案1】：

发生这种情况是因为 TopAppBar 和 BottomNavigation 默认具有高度，并且因为您在主题中使用 半透明颜色 作为 primary 颜色.

你可以：

删除海拔：TopAppBar(elevation = 0.dp)
使用纯色背景色
尝试将半透明颜色转换为非透明颜色，例如： TopAppBar(backgroundColor = Color(0xD9FFFFFF).compositeOver(Color.White))

【讨论】：