我知道Material 3中的TopAppBar
有一个16 dp的左/右填充。但是我想知道在源代码中定义了什么?例如,TopAppBar构造函数看起来像这样-没有提示默认的左/右填充。
@ExperimentalMaterial3Api
@Composable
fun TopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
) {
SingleRowTopAppBar(
modifier = modifier,
title = title,
titleTextStyle = MaterialTheme.typography.fromToken(TopAppBarSmallTokens.HeadlineFont),
centeredTitle = false,
navigationIcon = navigationIcon,
actions = actions,
windowInsets = windowInsets,
colors = colors,
scrollBehavior = scrollBehavior
)
}
是否有任何常量可以用来将这个填充应用到其他组件,或者我必须硬编码16 dp?我希望TopAppBar
下面的东西具有相同的左/右填充,否则它看起来不一致。
1条答案
按热度按时间yks3o0rb1#
它在
TopAppBarLayout
组合中的调用链中进一步定义,在titlePlaceable.placeRelative
部分中。下面是相关的代码部分
这是上面代码中使用的值
这些被定义为库的一部分,所以它们基本上是常量,并且不太可能在版本之间改变。即使它们发生了变化,您也可以控制何时更新库,并且在那时您也可以更新您的填充以再次匹配。
因此,当顶部应用栏不显示导航图标时,
start
侧的填充是12.dp
,然后是标题Box
,它有自己的填充4.dp
,总共有16.dp
的填充。当顶部栏确实显示导航图标时,
start
侧的填充为0.dp
,然后导航图标Box
跟随,其具有其自己的填充4.dp
,总共有4.dp
的填充。通常,导航图标是通过使用IconButton
并将Icon
作为内容添加到其中来添加的。IconButton
的(触摸)大小为48.dp
(在IconButton
组合中定义),默认的Icon
大小是24.dp
。这意味着即使实际的填充是4.dp,“视觉”填充到Icon
的一侧是4.dp + (48.dp / 2 - 24.dp / 2) = 4.dp + 12.dp
=16.dp
。在
end
侧,操作图标所在的位置或标题结束的位置(当没有操作图标时)也是类似的。因此,在这两种情况下(只要你使用默认的图标大小),“视觉”填充是相同的
16.dp
。因此,如果你决定为你的内容使用16.dp
的填充,布局将看起来对齐。请注意,所有这些都假设左/右
windowInsets
为0,这可能不是所有设备和所有方向的情况。因此,为了确保布局在所有情况下看起来都对齐,您还需要在布局中考虑
windowInsets
。如果您已经这样做了,那么当您添加16.dp
的填充时,事情应该正确对齐。如果您没有,然后你需要将windowInsets
应用于你(父)可组合的(这应该是最简单的选择)或者您需要通过调用calculateLeftPadding
和calculateRightPadding
将windowInsets
添加到基于LayoutDirection
的正确侧的计算中。