admin/AndroidJetpack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

得到

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
Jetpack-Compose-Playground/docs/layout/box.md
+23
View File
@@ -0,0 +1,23 @@
<!---
This is the API of version 1.2.0
-->
# Box
The children of the Box layout will be stacked over each other. You can use the align modifier to specify where the composable should be drawn.
<p align="center">
<img src ="{{ site.images }}/layout/box/boxdemo.png" height=100 width=300 />
</p>
```kotlin
--8<-- "layout/BoxExample.kt:func"
```
## Content Alignment
You can use the **align** modifier to set the position of a Composable inside the Box
## See also:
* [Official Docs]({{ site.composedoc }}/foundation/layout/package-summary#Box)
* [Full Example Code]({{ site.samplefolder }}/layout/BoxExample.kt)
Jetpack-Compose-Playground/docs/layout/column.md
+183
View File
@@ -0,0 +1,183 @@
<!---
This is the API of version 1.2.0
-->
# Column
A Column will show each child below the previous children. It's similar to a LinearLayout with vertical orientation.
<p align="left">
<img src ="{{ site.images }}/layout/column/ColumnExample.png" height=100 width=300 />
</p>
```kotlin
@Composable
fun ColumnExample() {
Column {
Text("Hello World!")
Text("Hello World!2")
}
}
```
## Content Alignment
### Horizontal
You can use **horizontalAlignment** to set the horizontal alignment of the content in the Column
=== "Alignment.Start"
<p align="left">
<img src ="{{ site.images }}/layout/column/start.png" height=100 width=300 style="border: 1px solid black;" />
</p>
```kotlin
@Composable
fun ColumnCenterHorizontal() {
Column(horizontalAlignment = Alignment.Start, modifier = Modifier.width(200.dp)) {
Text("Hello World!")
Text("Hello World!2")
}
}
```
=== "Alignment.CenterHorizontally"
<p align="left">
<img src ="{{ site.images }}/layout/column/centerhorizontal.png" height=100 width=300 style="border: 1px solid black;" />
</p>
```kotlin
@Composable
fun ColumnCenterHorizontal() {
Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.width(200.dp)) {
Text("Hello World!")
Text("Hello World!2")
}
}
```
=== "Alignment.End"
<p align="left">
<img src ="{{ site.images }}/layout/column/end.png" height=100 width=300 style="border: 1px solid black;" />
</p>
```kotlin
@Composable
fun ColumnCenterHorizontal() {
Column(horizontalAlignment = Alignment.End, modifier = Modifier.width(200.dp)) {
Text("Hello World!")
Text("Hello World!2")
}
}
```
You can also use the *align* modifier:
=== "Modifier.align(Alignment.Start)"
<p align="left">
<img src ="{{ site.images }}/layout/column/modifierStart.png" height=100 width=300 style="border: 1px solid black;" />
</p>
```kotlin
@Composable
fun ColumnCenterHorizontal() {
Column(modifier = Modifier.width(200.dp)) {
Text("Hello World!")
Text("Hello World!2", modifier = Modifier.align(Alignment.Start))
}
}
```
=== "Modifier.align(Alignment.CenterHorizontally)"
<p align="left">
<img src ="{{ site.images }}/layout/column/modifierCenterH.png" height=100 width=300 style="border: 1px solid black;" />
</p>
```kotlin
@Composable
fun ColumnCenterHorizontal() {
Column(modifier = Modifier.width(200.dp)) {
Text("Hello World!")
Text("Hello World!2",modifier = Modifier.align(Alignment.CenterHorizontally))
}
}
```
=== "Modifier.align(Alignment.End)"
<p align="left">
<img src ="{{ site.images }}/layout/column/modifierEnd.png" height=100 width=300 style="border: 1px solid black;"/>
</p>
```kotlin
@Composable
fun ColumnCenterHorizontal() {
Column(modifier = Modifier.width(200.dp)) {
Text("Hello World!")
Text("Hello World!2",modifier = Modifier.align(Alignment.End))
}
}
```
### Vertical
You can use **verticalArrangement** to set the vertical alignment of the content in the Column
=== "Arrangement.Top"
<p align="left">
<img src ="{{ site.images }}/layout/column/top.png" height=100 width=300 style="border: 1px solid black;"/>
</p>
```kotlin
@Composable
fun ColumnVerticalTop() {
Column(verticalArrangement = Arrangement.Top, modifier = Modifier.height(100.dp).background(Color.LightGray)) {
Text("Hello World!")
Text("Hello World!2")
}
}
```
=== "Arrangement.Center"
<p align="left">
<img src ="{{ site.images }}/layout/column/vcenter.png" height=100 width=300 style="border: 1px solid black;"/>
</p>
```kotlin
@Composable
fun ColumnVerticalCenter() {
Column(verticalArrangement = Arrangement.Center, modifier = Modifier.height(100.dp).background(Color.LightGray)) {
Text("Hello World!")
Text("Hello World!2")
}
}
```
=== "Arrangement.Bottom"
<p align="left">
<img src ="{{ site.images }}/layout/column/vbottom.png" height=100 width=300 style="border: 1px solid black;"/>
</p>
```kotlin
@Composable
fun ColumnVerticalBottom() {
Column(verticalArrangement = Arrangement.Bottom, modifier = Modifier.height(100.dp).background(Color.LightGray)) {
Text("Hello World!")
Text("Hello World!2")
}
}
```
## See also:
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#column)
* [Full Example Code]({{ site.samplefolder }}/layout/ColumnExample.kt)
Jetpack-Compose-Playground/docs/layout/constraintlayout.md
+92
View File
@@ -0,0 +1,92 @@
<!---
This is the API of version 1.2.0
-->
# ConstraintLayout
!!! tip
Remember to add dependencies to build.gradle:
implementation 'androidx.constraintlayout:constraintlayout-compose:1.0.1'
A ConstraintLayout in Compose is similar to a ConstraintLayout from the classic Android View System
## Example:
<p align="left">
<img src ="{{ site.images }}/layout/constraintlayout/constraintlayout.png" height=100 width=300 style="border: 1px solid black;" />
</p>
```kotlin
@Composable
fun ConstraintLayoutDemo() {
ConstraintLayout(modifier = Modifier.size(200.dp)) {
val (redBox, blueBox, yellowBox, text) = createRefs()
Box(modifier = Modifier
.size(50.dp)
.background(Color.Red)
.constrainAs(redBox) {})
Box(modifier = Modifier
.size(50.dp)
.background(Color.Blue)
.constrainAs(blueBox) {
top.linkTo(redBox.bottom)
start.linkTo(redBox.end)
})
Box(modifier = Modifier
.size(50.dp)
.background(Color.Yellow)
.constrainAs(yellowBox) {
bottom.linkTo(blueBox.bottom)
start.linkTo(blueBox.end, 20.dp)
})
Text("Hello World", modifier = Modifier.constrainAs(text) {
top.linkTo(parent.top)
start.linkTo(yellowBox.start)
})
}
}
```
## How to use it?
First add the Constraintlayout dependency to your project (see start of this page)
I will use the example code above, to explain how the boxes are constraint to each other.
Inside the scope of ConstraintLayout you can use createRefs() to create reference objects.
These will be used by ConstraintLayout to know which Composables should be linked to each other.
```kotlin
val (redBox, blueBox, yellowBox, text) = createRefs()
```
Kotlin's destructuring declaration feature is used here to generate reference objects.
Now we need to let ConstraintLayout know which reference objects belongs to which Composable.
To do that you need to use the constrainAs Modifier on your Composable.
```kotlin
.constrainAs(redBox) {})
```
Now ConstraintLayout knows that redBox belongs to the first Box Composable.
We do the same for the blue box, but now we want to link it to the red box.
```kotlin
.constrainAs(blueBox) {
top.linkTo(redBox.bottom)
start.linkTo(redBox.end)
})
```
Inside the scope of **constrainAs** we have access to the ConstrainScope.
We can now link start/end/top/bottom of the Composable to Composables through the reference object.
You can also link to the parent ConstraintLayout with the **parent** object. It's used at the Text Composable.
## See also:
* [Full Example Code]({{ site.samplefolder }}/layout/ConstraintLayoutDemo.kt)
Jetpack-Compose-Playground/docs/layout/row.md
+84
View File
@@ -0,0 +1,84 @@
<!---
This is the API of version 1.2.0
-->
# Row
A Row will show each child next to the previous children. It's similar to a LinearLayout with a horizontal orientation.
<p align="left">
<img src ="{{ site.images }}/layout/row/RowExample.png" height=100 width=300 />
</p>
```kotlin
@Composable
fun RowExample() {
Row {
Text("Hello World!")
Text("Hello World!2")
}
}
```
## Content Arrangement
### Horizontal
You can use **horizontalArrangement** to set the horizontal arrangement of the content in the Row
=== "Arrangement.SpaceEvenly"
<p align="left">
<img src ="{{ site.images }}/layout/row/row_arrangement_space_evenly.png" height=100 width=300 style="border: 1px solid black;" />
</p>
```kotlin
@Composable
fun RowExample() {
Row(horizontalArrangement = Arrangement.SpaceEvenly) {
Text("Hello World!")
Text("Hello World!2")
}
}
```
=== "Arrangement.Center"
<p align="left">
<img src ="{{ site.images }}/layout/row/arrange_center.png" height=100 width=300 style="border: 1px solid black;" />
</p>
```kotlin
@Composable
fun RowExample() {
Row(horizontalArrangement = Arrangement.Center) {
Text("Hello World!")
Text("Hello World!2")
}
}
```
=== "Arrangement.End"
<p align="left">
<img src ="{{ site.images }}/layout/row/arrangement_end.png" height=100 width=300 style="border: 1px solid black;" />
</p>
```kotlin
@Composable
fun RowExample() {
Row(horizontalArrangement = Arrangement.End) {
Text("Hello World!")
Text("Hello World!2")
}
}
```
## See also:
* [Official Docs]({{ site.composedoc }}/foundation/layout/package-summary#row)
* [Full Example Code]({{ site.samplefolder }}/layout/RowExample.kt)