TopAppBar имеет неизвестное дополнение при использовании вложенного Scaffold с помощью Compose Navigation
У меня есть Scaffold на корневом уровне приложения, где я размещаю навигацию. Этот каркас не имеет верхней панели приложений и содержит только FAB. Затем в одном из мест назначения я использую другой Scaffold, у которого есть верхняя панель приложений.
Теперь, когда вы переходите в этот пункт назначения, верхняя панель приложения имеет какое-то неизвестное/дополнительное дополнение сверху. Я не указал никаких дополнительных отступов, используя Modifier. На следующем скриншоте это показано:
Как вы можете видеть выше, у нас есть некоторые дополнительные отступы, что является неожиданным. Как я могу решить эту проблему? Имеет ли это какое-либо отношение к вложенным Scaffold и рекомендуется ли это делать или нет?
Ответы 2
Вам следует сделать часть Scaffold каждого экрана, а не размещать ее на корневом уровне. Это дает вам больше контроля над тем, как выглядит и ведет себя каждый экран. Если экрану не нужен Scaffold, вы можете его опустить.
Что-то похожее на это:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
NavLearnTheme {
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "top") {
composable("top") { TopScreen( /* ... */ ) }
composable("another") { AnotherScreen( /* ... */ ) }
// Add more destinations similarly.
}
}
}
}
}
@Composable
fun TopScreen() {
Scaffold(
floatingActionButton = { /* fab code here */ },
// other content
) { innerPadding ->
// content here
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AnotherScreen() {
Scaffold(
floatingActionButton = { /* fab code here */ },
topBar = {
TopAppBar(title = { /*TODO*/ })
}
// other content
) { innerPadding ->
// content here
}
}
Это нормально сделать в Compose. Вы не предоставили никакого кода, поэтому я не могу сказать, почему вы видите дополнительное дополнение.
Я до сих пор не знаю причину дополнительного заполнения, но решил проблему следующим образом.
Я выбрал верхний уровень
Scaffold, как в примере приложения JetNews, в котором просто FAB. Я также проигнорировалPaddingValues.Внутри этого эшафота я поместил свой
NavHost, а внутри него — разные экраны.У каждого экрана был свой собственный Scaffold, который содержал верхнюю панель приложений, а также использовал
PaddingValuesдля учета верхней панели приложений.
Проблема заключалась в том, что, поскольку я не использовал PaddingValues в Scaffold на уровне приложения, NavHost занимал всю ширину строки состояния и панели навигации, как я вызывал enableEdgeToEdge.
Итак, я решил эту проблему, рассмотрев отступы строки состояния, как указано в примере приложения, то есть применив отступы к верхней панели приложения с помощью Modifier.statusBarsPadding().
Я не знаю точной причины дополнительного заполнения, но, скорее всего, это было как-то связано с PaddingValues внутри компонуемой функции contentScaffold. В моем исходном коде я использовал их как в Scaffold верхнего уровня, так и на уровне экрана. Возможно, из-за этого Scaffold внутреннего уровня использовал вставки/отступы верхнего уровня. Пожалуйста, поправьте меня, если я ошибаюсь. 😊
Раньше я не использовал Jetpack Compose. В представлениях у нас была одна MainActivity с одной панелью приложения. Итак, я подумал, что мы могли бы использовать
Scaffoldна верхнем уровне, как и «Просмотры». Когда я использую Scaffold внутри Scaffold без NavHost, дополнительные отступы не видны. Хотелось бы узнать, почему это происходит сNavHosts.