Jetpack Compose 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
                    )

                }
            }
        }
    ){

    }

解决方法

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

您可以：

• 移除高程：TopAppBar(elevation = 0.dp)
• 使用纯色背景
• 尝试将半透明颜色转换为非透明颜色，如下所示： TopAppBar(backgroundColor = Color(0xD9FFFFFF).compositeOver(Color.White))