Как правильно применить значения отступов из вложенных скаффолдов в Compose? ⇐ Android

[Anonymous]

Я работаю с Compose Multiplatform, и у меня вопрос о правильном шаблоне для вложенных макетов Scaffold.
Мой корневой составной (AppContent) имеет Scaffold, который предоставляет TopAppBar и передает его InternalPadding своим дочерним элементам.
Один из моих дочерних экранов (InventoryScreen) также необходимо использовать свой собственный Scaffold для отображения FloatingActionButton (FAB), который генерирует свои собственные new отступы.
Моя проблема в том, что мой контент внутри InventoryScreen (например, мой OutlinedTextField) теперь имеет чрезмерное верхнее дополнение, как если бы отступ из TopAppBar и дочерний Scaffold объединяются неправильно.
Каков правильный способ применить InnerPadding из родительского Scaffold (для TopAppBar) и также применить paddingValues из дочернего Scaffold (для FAB) без этого чрезмерного интервала?
Мой родительский эшафот:
) {
Scaffold(
topBar = {
CenterAlignedTopAppBar(
title = {
Text(
stringResource(activeItem.label),
style = MaterialTheme.typography.titleMedium
)
},
navigationIcon = {
IconButton(onClick = { scope.launch { drawerState.open() } }) {
Icon(
painter = painterResource(KasirinIcons.menu),
contentDescription = "Menu"
)
}
}
)
},
) { innerPadding ->
Children(
stack = stack,
) { child ->
when (val instance = child.instance) {
is RootComponent.Child.Dashboard -> DashboardScreen(instance.component)
is RootComponent.Child.Inventory -> InventoryScreen(
instance.component,
modifier = Modifier.padding(innerPadding)
)

is RootComponent.Child.Reports -> ReportsScreen(instance.component)
is RootComponent.Child.Settings -> SettingsScreen(instance.component)
is RootComponent.Child.Account -> AccountScreen(instance.component)
is RootComponent.Child.Cashier -> CashierScreen(instance.component)
}
}
}
}
}

Эшафот моего ребенка:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun InventoryScreen(
component: InventoryComponent,
modifier: Modifier = Modifier
) {
val state by component.uiState.collectAsState()
InventoryScreenContent(
state = state,
onAddProduct = component::onAddProductClicked,
onEditProduct = component::onEditProductClicked,
onDeleteProduct = component::onDeleteProductClicked,
onDismissDialog = component::onDismissDialog,
onSaveProduct = component::onSaveProductClicked,
onSearchQueryChanged = component::onSearchQueryChanged,
onCategorySelected = component::onCategorySelected,
modifier = modifier
)
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun InventoryScreenContent(
state: InventoryUiState,
onAddProduct: () -> Unit,
onEditProduct: (Product) -> Unit,
onDeleteProduct: (Product) -> Unit,
onDismissDialog: () -> Unit,
onSaveProduct: (name: String, price: String, stock: String) -> Unit,
onSearchQueryChanged: (String) -> Unit,
onCategorySelected: (String?) -> Unit,
modifier: Modifier = Modifier
) {
Scaffold(
modifier = modifier.fillMaxSize(),
floatingActionButton = {
FloatingActionButton(onClick = onAddProduct) {
Icon(Icons.Default.Add, contentDescription = "Tambah Produk")
}
}
) { paddingValues ->
Column(
modifier = Modifier
.fillMaxSize()
.padding(paddingValues),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
OutlinedTextField(
value = state.searchQuery,
onValueChange = onSearchQueryChanged,
label = { Text("Cari produk...") },
leadingIcon = { Icon(Icons.Default.Search, contentDescription = "Search") },
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
singleLine = true
)

LazyRow(
modifier = Modifier
.fillMaxWidth(),
contentPadding = PaddingValues(horizontal = 16.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
item {
FilterChip(
selected = state.selectedCategoryId == null,
onClick = { onCategorySelected(null) },
label = { Text("Semua") }
)
}

items(state.categories, key = { it.id }) { category -> // Ambil dari UiState
FilterChip(
selected = state.selectedCategoryId == category.id,
onClick = { onCategorySelected(category.id) },
label = { Text(category.name) }
)
}
}

LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(horizontal = 16.dp),
contentPadding = PaddingValues(bottom = 16.dp),
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
items(state.products, key = { it.id }) { product ->
val productDisplay = ProductDisplay(
id = product.id,
imageUrl = product.imageUrl,
name = product.name,
price = product.sellingPrice,
stock = product.stockQuantity
)

ProductCard(
product = productDisplay,
onClick = { onEditProduct(product) }
)
}
}
}
}

if (state.showProductDialog) {
AddEditProductDialog(
editingProduct = state.editingProduct,
onDismiss = onDismissDialog,
onSave = onSaveProduct
)
}
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... in-compose