TopAppBar имеет неизвестное дополнение при использовании вложенного Scaffold с помощью Compose Navigation

У меня есть Scaffold на корневом уровне приложения, где я размещаю навигацию. Этот каркас не имеет верхней панели приложений и содержит только FAB. Затем в одном из мест назначения я использую другой Scaffold, у которого есть верхняя панель приложений.

Теперь, когда вы переходите в этот пункт назначения, верхняя панель приложения имеет какое-то неизвестное/дополнительное дополнение сверху. Я не указал никаких дополнительных отступов, используя Modifier. На следующем скриншоте это показано:

Как вы можете видеть выше, у нас есть некоторые дополнительные отступы, что является неожиданным. Как я могу решить эту проблему? Имеет ли это какое-либо отношение к вложенным Scaffold и рекомендуется ли это делать или нет?

0
0
50
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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
    }
}

Раньше я не использовал Jetpack Compose. В представлениях у нас была одна MainActivity с одной панелью приложения. Итак, я подумал, что мы могли бы использовать Scaffold на верхнем уровне, как и «Просмотры». Когда я использую Scaffold внутри Scaffold без NavHost, дополнительные отступы не видны. Хотелось бы узнать, почему это происходит с NavHosts.

Kahan Bhalani 02.09.2024 16:18

Это нормально сделать в Compose. Вы не предоставили никакого кода, поэтому я не могу сказать, почему вы видите дополнительное дополнение.

Abdo21 02.09.2024 18:10

Я до сих пор не знаю причину дополнительного заполнения, но решил проблему следующим образом.

  1. Я выбрал верхний уровень Scaffold, как в примере приложения JetNews, в котором просто FAB. Я также проигнорировал PaddingValues.

  2. Внутри этого эшафота я поместил свой NavHost, а внутри него — разные экраны.

  3. У каждого экрана был свой собственный Scaffold, который содержал верхнюю панель приложений, а также использовал PaddingValues для учета верхней панели приложений.

Проблема заключалась в том, что, поскольку я не использовал PaddingValues в Scaffold на уровне приложения, NavHost занимал всю ширину строки состояния и панели навигации, как я вызывал enableEdgeToEdge.

Итак, я решил эту проблему, рассмотрев отступы строки состояния, как указано в примере приложения, то есть применив отступы к верхней панели приложения с помощью Modifier.statusBarsPadding().

Я не знаю точной причины дополнительного заполнения, но, скорее всего, это было как-то связано с PaddingValues внутри компонуемой функции contentScaffold. В моем исходном коде я использовал их как в Scaffold верхнего уровня, так и на уровне экрана. Возможно, из-за этого Scaffold внутреннего уровня использовал вставки/отступы верхнего уровня. Пожалуйста, поправьте меня, если я ошибаюсь. 😊

Другие вопросы по теме