This commit is contained in:
coco
2026-07-15 16:57:36 +08:00
parent 723ce1af5c
commit 95aa018b8b
314 changed files with 8910 additions and 0 deletions
@@ -0,0 +1,53 @@
<!---
This is the API of version 1.2.0
-->
# BoxWithConstraints
BoxWithConstraints is a layout similar to the [Box](../../../layout/box) layout, but it has the advantage that you can get the minimum/maximum available width and height for the Composable on the screen.
You can use it to show a different content depending on the available space.
Inside the scope of BoxWithConstraints you have access to the BoxWithConstraintsScope. With it you can get the **minWidth**, **maxWidth**, **minHeight**, **maxHeight** in dp and **constraints** in pixels.
## Example:
<p align="center">
<img src ="../{{ site.images }}/foundation/layout/boxwithconstraints/boxwithconstraints.png" height=100 width=300 />
</p>
```kotlin
@Composable
fun BoxWithConstraintsDemo() {
Column {
Column {
MyBoxWithConstraintsDemo()
}
Text("Here we set the size to 150.dp", modifier = Modifier.padding(top = 20.dp))
Column(modifier = Modifier.size(150.dp)) {
MyBoxWithConstraintsDemo()
}
}
}
@Composable
private fun MyBoxWithConstraintsDemo() {
BoxWithConstraints {
val boxWithConstraintsScope = this
//You can use this scope to get the minWidth, maxWidth, minHeight, maxHeight in dp and constraints
Column {
if (boxWithConstraintsScope.maxHeight >= 200.dp) {
Text(
"This is only visible when the maxHeight is >= 200.dp",
style = TextStyle(fontSize = 20.sp)
)
}
Text("minHeight: ${boxWithConstraintsScope.minHeight}, maxHeight: ${boxWithConstraintsScope.maxHeight}, minWidth: ${boxWithConstraintsScope.minWidth} maxWidth: ${boxWithConstraintsScope.maxWidth}")
}
}
}
```
## See also:
* [Official Docs]({{ site.composedoc }}/foundation/layout/package-summary#BoxWithConstraints(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1))
* [Full Example Code]({{ site.samplefolder }}/foundation/layout/BoxWithConstraintsExample.kt)
@@ -0,0 +1,28 @@
<!---
This is the API of version 1.2.0
-->
# Spacer
Spacer is a Composable that can be used when you want to add an additional space between Composables
<p align="center">
<img src ="../{{ site.images }}/foundation/layout/spacer/spacer.png" height=50 width=50 style="border: 1px solid black;" />
</p>
## Example
```kotlin
@Composable
fun SpacerDemo() {
Column {
Text("Hello")
Spacer(modifier = Modifier.size(30.dp))
Text("World")
}
}
```
## See also:
* [Full Example Code]({{ site.samplefolder }}/foundation/layout/SpacerDemo.kt)