如何在Jeptack compose中删除Appbar的开始填充

Question

我正在使用 Jetpack Compose 为我的应用程序开发自定义 TopAppBar，并且遇到了一个问题，即出现了一个我似乎无法删除的意外开始填充。我尝试调整 TopAppBar 及其内容上的填充和修饰符，但填充仍然存在。

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

       setContent {
           VoxTheme {

               // A surface container using the 'background' color from the theme
                   Scaffold(topBar = {
                       CustomBar()
                   },
                   ) { it ->
                       Surface(
                           modifier = Modifier.fillMaxSize(),
                           color = MaterialTheme.colorScheme.background
                       ) {
                           Box(
                               modifier = Modifier
                                   .fillMaxSize()
                                   .background(Color.Red),
                               contentAlignment = Alignment.Center,
                           ) {
                               Text(text = "Hello, App!")
                           }
                       }

                   }


           }
       }
   }
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomBar() {
   TopAppBar(
       modifier = Modifier
           .fillMaxWidth()
           .background(Color.Green)
           .padding(0.dp),
   title = {
       Row(
           modifier = Modifier
               .fillMaxSize()
               .background(Color.Blue)
                           ,
           verticalAlignment = Alignment.CenterVertically,
       ) {

               Text(
                   text = "App",
                   maxLines = 1,
                   overflow = TextOverflow.Ellipsis,
               )

       }
   },
   )
}

但它产生了某种我无法删除的开始填充

到目前为止我尝试过的： 调整 TopAppBar 及其子元素上的 Modifier.padding 设置。

查看 TopAppBar 文档以了解我可能需要覆盖的任何默认填充。

问题：

如何删除开始内边距以使 TopAppBar 的绿色背景填充整个屏幕宽度？

TopAppBar 是否有特定的修饰符或属性来控制此填充？

任何建议或见解将不胜感激。

Answer 1

材质库中的可组合项遵循材质设计指南，并非所有参数都可以调整，因此有时您必须创建自己的可组合项或进行修改。

您无法使用修饰符 (

TopAppBar(Modifier.background(Color.Green)

) 设置 TopBar 的背景 - 这不起作用，因为该修饰符应用于

Surface

并被其

color

参数覆盖。要更改顶部应用栏的颜色，您必须更改

colors

参数：

TopAppBar(
    colors = TopAppBarDefaults.topAppBarColors(
        containerColor = Color.Green,
    )
)

由于 TopAppBar 占据整个屏幕宽度，这个绿色背景实际上也会填充整个屏幕宽度，所以你可能已经完成了。

如果您也需要

Row

内部的

title

来填充整个宽度，则必须进行一些修改，因为该填充已应用于

TopAppBarLayout

中，并且您无法更改它。这是

TopAppBarTitleInset 

和

TopAppBarHorizontalPadding

。

如果你想破解它，你可以这样做：

TopAppBar(
    modifier = Modifier.fillMaxWidth(),
    title = {
        Row(
            modifier = Modifier
                .fillMaxSize()
                .layout { measurable, constraints ->
                    val paddingCompensation = 16.dp.toPx().roundToInt()
                    val adjustedConstraints = constraints.copy(
                        // not a good idea inside horizontal scroll view,
                        // but I guess we can assume that's not the case here
                        maxWidth = constraints.maxWidth + paddingCompensation
                    )
                    val placeable = measurable.measure(adjustedConstraints)
                    layout(placeable.width, placeable.height) {
                        placeable.place(-paddingCompensation / 2, 0)
                    }
                }
                .background(Color.Blue),
            verticalAlignment = Alignment.CenterVertically,
        ) {
        }
    },
)

这显然不太好，因为库可以更新并且值可以更改，这会破坏您的布局......但它现在可以工作。