This recalculates the [WindowInsets] based on the size and position.
consumeWindowInsetsWithPaddingSample
@Composable
fun consumeWindowInsetsWithPaddingSample() {
// The outer Box uses padding and properly compensates for it by using consumeWindowInsets()
Box(
Modifier.fillMaxSize()
.padding(10.dp)
.consumeWindowInsets(WindowInsets(10.dp, 10.dp, 10.dp, 10.dp))
) {
Box(Modifier.fillMaxSize().safeContentPadding().background(Color.Blue))
}
}
recalculateWindowInsetsSample
@Composable
fun recalculateWindowInsetsSample() {
var hasFirstItem by remember { mutableStateOf(true) }
var hasLastItem by remember { mutableStateOf(true) }
Column(Modifier.fillMaxSize()) {
if (hasFirstItem) {
Box(Modifier.weight(1f).fillMaxWidth().background(Color.Magenta))
}
Box(
Modifier.fillMaxWidth() // force a fixed size on the content
.recalculateWindowInsets()
.weight(1f)
.background(Color.Yellow)
.safeDrawingPadding()
) {
Button(
onClick = { hasFirstItem = !hasFirstItem },
Modifier.align(Alignment.TopCenter),
) {
val action = if (hasFirstItem) "Remove" else "Add"
Text("$action First Item")
}
Button(
onClick = { hasLastItem = !hasLastItem },
Modifier.align(Alignment.BottomCenter),
) {
val action = if (hasLastItem) "Remove" else "Add"
Text("$action Last Item")
}
}
if (hasLastItem) {
Box(Modifier.weight(1f).fillMaxWidth().background(Color.Cyan))
}
}
}
unconsumedWindowInsetsWithPaddingSample
@Composable
fun unconsumedWindowInsetsWithPaddingSample() {
// This outer Box is representing a 3rd-party layout that you don't control. It has a
// padding, but doesn't properly use consumeWindowInsets()
Box(Modifier.padding(10.dp)) {
// This is the content that you control. You can make sure that the WindowInsets are correct
// so you can pad your content despite the fact that the parent did not
// consumeWindowInsets()
Box(
Modifier.fillMaxSize() // Force a fixed size on the content
.recalculateWindowInsets()
.safeContentPadding()
.background(Color.Blue)
)
}
}