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/material/alertdialog.md
+68
View File
@@ -0,0 +1,68 @@
<!---
This is the API of version 1.2.0
-->
# AlertDialog
Alert dialog is a Dialog which interrupts the user with urgent information, details or actions.
<p align="center">
<img src ="{{ site.images }}/material/alertdialog/AlertDialogSample.png" height=100 width=300/>
</p>
```kotlin
@Composable
fun AlertDialogSample() {
MaterialTheme {
Column {
val openDialog = remember { mutableStateOf(false) }
Button(onClick = {
openDialog.value = true
}) {
Text("Click me")
}
if (openDialog.value) {
AlertDialog(
onDismissRequest = {
// Dismiss the dialog when the user clicks outside the dialog or on the back
// button. If you want to disable that functionality, simply use an empty
// onCloseRequest.
openDialog.value = false
},
title = {
Text(text = "Dialog Title")
},
text = {
Text("Here is a text ")
},
confirmButton = {
Button(
onClick = {
openDialog.value = false
}) {
Text("This is the Confirm Button")
}
},
dismissButton = {
Button(
onClick = {
openDialog.value = false
}) {
Text("This is the dismiss Button")
}
}
)
}
}
}
}
```
## See also:
* [Full Example Code]({{ site.samplefolder }}/material/alertdialog/AlertDialogSample.kt)
Jetpack-Compose-Playground/docs/material/badgedbox.md
+36
View File
@@ -0,0 +1,36 @@
# BadgeBox
A `BadgeBox` is used to decorate content with a badge that can contain dynamic information, such as the presence of a new notification or a number of pending requests. Badges can be icon only or contain short text.
A common use case is to display a badge with bottom navigation items. For more information, see Bottom Navigation
A simple icon with badge example looks like:
<p align="left">
<img src ="{{ site.images }}/material/badgebox/img.png" />
</p>
```kotlin
@OptIn(ExperimentalMaterialApi::class)
@Preview
@Composable
fun BadgeBoxDemo() {
BottomNavigation {
BottomNavigationItem(
icon = {
BadgedBox(badge = { Badge { Text("8") } }) {
Icon(
Icons.Filled.Favorite,
contentDescription = "Favorite"
)
}
},
selected = false,
onClick = {})
}
}
```
### See also:
* [Full Example Code]({{ site.samplefolder }}/material/badgebox/BadgeBoxDemo.kt)
Jetpack-Compose-Playground/docs/material/button.md
+58
View File
@@ -0,0 +1,58 @@
<!---
This is the API of version 1.2.0
-->
# Button
A [Button](https://developer.android.com/reference/kotlin/androidx/ui/material/package-summary#button) has a onClick-Function. You can add a Text-Composable or any other Composables as child elements of the Button.
<p align="left">
<img src ="{{ site.images }}/material/button/buttonExample.png" />
</p>
```kotlin
@Composable
fun ButtonExample() {
Button(onClick = { /* Do something! */ }, colors = ButtonDefaults.textButtonColors(
backgroundColor = Color.Red
)) {
Text("Button")
}
}
```
# OutlinedButton
<p align="left">
<img src ="{{ site.images }}/material/outlinedbutton/outlinedbutton.png" />
</p>
```kotlin
@Composable
fun OutlinedButtonExample() {
OutlinedButton(onClick = { /* Do something! */ }) {
Text("I'm an Outlined Button")
}
}
```
# TextButton
<p align="left">
<img src ="{{ site.images }}/material/textbutton/textbutton.png" />
</p>
```kotlin
@Composable
fun TextButtonExample() {
TextButton(onClick = { /* Do something! */ }) {
Text("I'm a Text Button")
}
}
```
<hr>
### See also:
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.material.ButtonElevation,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.BorderStroke,androidx.compose.material.ButtonColors,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1))
* [Full Example Code]({{ site.samplefolder }}/material/button/ButtonExample.kt)
Jetpack-Compose-Playground/docs/material/card.md
+52
View File
@@ -0,0 +1,52 @@
<!---
This is the API of version 1.2.0
-->
# Card
Card is the equivalent of a CardView in Compose
<p align="center">
<img src ="{{ site.images }}/material/card/card.png" />
</p>
``` kotlin
@Composable
fun CardDemo() {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(15.dp)
.clickable{ },
elevation = 10.dp
) {
Column(
modifier = Modifier.padding(15.dp)
) {
Text(
buildAnnotatedString {
append("welcome to ")
withStyle(style = SpanStyle(fontWeight = FontWeight.W900, color = Color(0xFF4552B8))
) {
append("Jetpack Compose Playground")
}
}
)
Text(
buildAnnotatedString {
append("Now you are in the ")
withStyle(style = SpanStyle(fontWeight = FontWeight.W900)) {
append("Card")
}
append(" section")
}
)
}
}
}
```
## See also:
* [Material.io](https://material.io/components/cards)
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#card)
* [Full Example Code]({{ site.samplefolder }}/material/card/CardDemo.kt)
Jetpack-Compose-Playground/docs/material/checkbox.md
+24
View File
@@ -0,0 +1,24 @@
<!---
This is the API of version 1.2.0
-->
# Checkbox
<p align="left">
<img src ="{{ site.images }}/material/checkbox/CheckboxDemo.png" height=100 width=300 />
</p>
```kotlin
@Composable
fun CheckBoxDemo() {
val checkedState = remember { mutableStateOf(true) }
Checkbox(
checked = checkedState.value,
onCheckedChange = { checkedState.value = it }
)
}
```
<hr>
## See also:
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#checkbox)
* [Full Example Code]({{ site.samplefolder }}/material/checkbox/CheckBoxDemo.kt)
Jetpack-Compose-Playground/docs/material/circularprogressindicator.md
+76
View File
@@ -0,0 +1,76 @@
<!---
This is the API of version 1.2.0
-->
# CircularProgressIndicator
A CircularProgressIndicator can be used to display a progress in circular shape.
There are two kinds:
**Indeterminate**
```kotlin
CircularProgressIndicator()
```
When you use the CircularProgressIndicator without the **progress** parameter, it will run forever.
**Determinate**
```kotlin
CircularProgressIndicator(progress = 0.5f)
```
<p align="left">
<img src ="{{ site.images }}/material/circularprogressindicator/progresshalf.png" />
</p>
When you set a value to the **progress** parameter, the indicator will be shown with that progress.
E.g. a progress of 0.5f will fill it to the half.
# Example
<div>
<video height="500" align="center" controls>
<source src="{{ site.images }}/material/circularprogressindicator/circularprogress.mp4" type="video/mp4" align="center">
</video>
</div>
```kotlin
@Composable
fun CircularProgressIndicatorSample() {
var progress by remember { mutableStateOf(0.1f) }
val animatedProgress = animateFloatAsState(
targetValue = progress,
animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
).value
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Spacer(Modifier.height(30.dp))
Text("CircularProgressIndicator with undefined progress")
CircularProgressIndicator()
Spacer(Modifier.height(30.dp))
Text("CircularProgressIndicator with progress set by buttons")
CircularProgressIndicator(progress = animatedProgress)
Spacer(Modifier.height(30.dp))
OutlinedButton(
onClick = {
if (progress < 1f) progress += 0.1f
}
) {
Text("Increase")
}
OutlinedButton(
onClick = {
if (progress > 0f) progress -= 0.1f
}
) {
Text("Decrease")
}
}
}
```
## See also:
* [Material.io](https://material.io/components/progress-indicators#circular-progress-indicators)
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#circularprogressindicator)
* [Full Example Code]({{ site.samplefolder }}/material/circularprogress/CircularProgressIndicatorSample.kt)
Jetpack-Compose-Playground/docs/material/divider.md
+25
View File
@@ -0,0 +1,25 @@
<!---
This is the API of version 1.2.0
-->
# Divider
A divider is a thin line that groups content in lists and layouts.
<p align="center">
<img src ="{{ site.images }}/material/divider/divider.png" />
</p>
``` kotlin
@Composable
fun DividerExample(){
Column {
Text("Foo")
Divider(startIndent = 8.dp, thickness = 1.dp, color = Color.Black)
Text("Bar")
}
}
```
## See also:
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#divider)
* [Full Example Code]({{ site.samplefolder }}/material/divider/DividerDemo.kt)
Jetpack-Compose-Playground/docs/material/dropdownmenu.md
+67
View File
@@ -0,0 +1,67 @@
<!---
This is the API of version 1.2.0
-->
# DropdownMenu
The DropdownMenu Composable can be used to create DropdownMenu.
<p align="center">
<img src ="{{ site.images }}/material/dropdownmenu/dropdown.png" />
</p>
```kotlin
fun DropdownMenu(
expanded: Boolean,
onDismissRequest: () -> Unit,
modifier: Modifier = Modifier,
offset: DpOffset = DpOffset(0.dp, 0.dp),
properties: PopupProperties = PopupProperties(focusable = true),
content: @Composable ColumnScope.() -> Unit
)
```
**expanded**
If true, the popupmenu with the dropdownContent will be shown
**onDismissRequest**
Called when the menu should be dismiss
```kotlin
@Composable
fun DropdownDemo() {
var expanded by remember { mutableStateOf(false) }
val items = listOf("A", "B", "C", "D", "E", "F")
val disabledValue = "B"
var selectedIndex by remember { mutableStateOf(0) }
Box(modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.TopStart)) {
Text(items[selectedIndex],modifier = Modifier.fillMaxWidth().clickable(onClick = { expanded = true }).background(
Color.Gray))
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
modifier = Modifier.fillMaxWidth().background(
Color.Red)
) {
items.forEachIndexed { index, s ->
DropdownMenuItem(onClick = {
selectedIndex = index
expanded = false
}) {
val disabledText = if (s == disabledValue) {
" (Disabled)"
} else {
""
}
Text(text = s + disabledText)
}
}
}
}
}
```
## See also:
* [Material.io](https://material.io/components/menus#dropdown-menu)
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#dropdownmenu)
* [Full Example Code]({{ site.samplefolder }}/material/dropdown/DropdownDemo.kt)
Jetpack-Compose-Playground/docs/material/floatingactionbutton.md
+39
View File
@@ -0,0 +1,39 @@
<!---
This is the API of version 1.2.0
-->
# FloatingActionButton
```kotlin
fun FloatingActionButtonDemo() {
FloatingActionButton(onClick = { /*do something*/}) {
Text("FloatingActionButton")
}
}
```
<p align="center">
<img src ="{{ site.images }}/material/floatingactionbutton/fab.png" height=100 width=300 />
</p>
## ExtendedFloatingActionButton
```kotlin
@Composable
fun ExtendedFloatingActionButtonDemo() {
ExtendedFloatingActionButton(
icon = { Icon(Icons.Filled.Favorite,"") },
text = { Text("FloatingActionButton") },
onClick = { /*do something*/ },
elevation = FloatingActionButtonDefaults.elevation(8.dp)
)
}
```
<p align="center">
<img src ="{{ site.images }}/material/floatingactionbutton/exfab.png" height=100 width=300 />
</p>
## See also:
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#floatingactionbutton)
* [Full Example Code]({{ site.samplefolder }}/material/floatingactionbutton/FabDemo.kt)
Jetpack-Compose-Playground/docs/material/linearprogressindicator.md
+77
View File
@@ -0,0 +1,77 @@
<!---
This is the API of version 1.2.0
-->
# LinearProgressIndicator
A LinearProgressIndicator can be used to display a progress in linear line, also known as a progress bar.
There are two kinds:
**Indeterminate**
```kotlin
LinearProgressIndicator()
```
When you use the LinearProgressIndicator without the **progress** parameter, it will run forever.
**Determinate**
```kotlin
LinearProgressIndicator(progress = 0.5f)
```
<p align="left">
<img src ="{{ site.images }}/material/linearprogressindicator/progresshalf.png" />
</p>
When you set a value to the **progress** parameter, the indicator will be shown with that progress.
E.g. a progress of 0.5f will fill it to the half.
# Example
<div>
<video height="500" align="center" controls>
<source src="{{ site.images }}/material/linearprogressindicator/linearprogress.mp4" type="video/mp4" align="center">
</video>
</div>
```kotlin
@Composable
fun LinearProgressIndicatorSample() {
var progress by remember { mutableStateOf(0.1f) }
val animatedProgress = animateFloatAsState(
targetValue = progress,
animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
).value
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Spacer(Modifier.height(30.dp))
Text("LinearProgressIndicator with undefined progress")
LinearProgressIndicator()
Spacer(Modifier.height(30.dp))
Text("LinearProgressIndicator with progress set by buttons")
LinearProgressIndicator(progress = animatedProgress)
Spacer(Modifier.height(30.dp))
OutlinedButton(
onClick = {
if (progress < 1f) progress += 0.1f
}
) {
Text("Increase")
}
OutlinedButton(
onClick = {
if (progress > 0f) progress -= 0.1f
}
) {
Text("Decrease")
}
}
}
```
## See also:
* [Material.io](https://material.io/components/progress-indicators#linear-progress-indicators)
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#linearprogressindicator)
* [Full Example Code]({{ site.samplefolder }}/material/linearprogress/LinearProgressIndicatorSample.kt)
Jetpack-Compose-Playground/docs/material/modalbottomsheetlayout.md
+54
View File
@@ -0,0 +1,54 @@
<!---
This is the API of version 1.2.0
-->
# ModalBottomSheetLayout
<p align="center">
<img src ="{{ site.images }}/material/modalbottomsheetlayout/modalbottomsheetlayout.png" height=100 width=300 />
</p>
## Example
```kotlin
@Composable
@OptIn(ExperimentalMaterialApi::class)
fun ModalBottomSheetSample() {
val state = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
val scope = rememberCoroutineScope()
ModalBottomSheetLayout(
sheetState = state,
sheetContent = {
LazyColumn {
items(50) {
ListItem(
text = { Text("Item $it") },
icon = {
Icon(
Icons.Default.Favorite,
contentDescription = "Localized description"
)
}
)
}
}
}
) {
Column(
modifier = Modifier.fillMaxSize().padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Rest of the UI")
Spacer(Modifier.height(20.dp))
Button(onClick = { scope.launch { state.show() } }) {
Text("Click to show sheet")
}
}
}
}
```
## See also:
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#modalbottomsheetlayout)
* [Full Example Code]({{ site.samplefolder }}/material/modalbottomsheetlayout/ModalBottomSheetLayout.kt)
Jetpack-Compose-Playground/docs/material/modaldrawer.md
+57
View File
@@ -0,0 +1,57 @@
<!---
This is the API of version 1.2.0
-->
# ModalDrawer
With a ModalDrawer you can create a navigation drawer.
=== "Default"
<img src ="{{ site.images }}/material/modaldrawer/modaldrawerClosed.png" height=100 width=300 />
=== "With Drawer open"
<img src ="{{ site.images }}/material/modaldrawer/ModaldrawerOpened.png" height=100 width=300 />
```kotlin
@Composable
fun ModalDrawerSample() {
val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalDrawer(
drawerState = drawerState,
drawerContent = {
Column {
Text("Text in Drawer")
Button(onClick = {
scope.launch {
drawerState.close()
}
}) {
Text("Close Drawer")
}
}
},
content = {
Column {
Text("Text in Bodycontext")
Button(onClick = {
scope.launch {
drawerState.open()
}
}) {
Text("Click to open")
}
}
}
)
}
```
## See also:
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#modaldrawerlayout)
* [Full Example Code]({{ site.samplefolder }}/material/modaldrawer/ModalDrawerSample.kt)
Jetpack-Compose-Playground/docs/material/navigationrail.md
+67
View File
@@ -0,0 +1,67 @@
<!---
This is the API of version 1.2.0
-->
# Navigation Rail
"Navigation rails provide ergonomic movement between primary destinations in apps."
# Example
<div>
<video height="500" align="center" controls>
<source src="{{ site.images }}/material/navigationrail/navigationRail.webm" type="video/webm" align="center">
</video>
</div>
``` kotlin
enum class Page(val title:String, val content: String){
HOME("home","Show only icon"),
SEARCH("Search","Show icon with label"),
SETTINGS("Settings","Show icon /Show the label only when selected")
}
@Composable
fun NavigationRailSample() {
var selectedItem by remember { mutableStateOf(0) }
val pages = Page.values()
val icons = listOf(Icons.Filled.Home, Icons.Filled.Search, Icons.Filled.Settings)
Row {
NavigationRail {
pages.forEachIndexed { index, item ->
when(item){
Page.HOME -> {
NavigationRailItem(
icon = { Icon(icons[index], contentDescription = "") },
selected = selectedItem == index,
onClick = { selectedItem = index }
)
}
Page.SEARCH -> {
NavigationRailItem(
label = { Text(item.title) },
icon = { Icon(icons[index], contentDescription = "") },
selected = selectedItem == index,
onClick = { selectedItem = index }
)
}
Page.SETTINGS -> {
NavigationRailItem(
label = { Text(item.title) },
icon = { Icon(icons[index], contentDescription = "") },
selected = selectedItem == index,
onClick = { selectedItem = index },
alwaysShowLabel = false
)
}
}
}
}
Text(pages[selectedItem].content, Modifier.padding(start = 8.dp))
}
}
```
## See also:
* [Material.io](https://material.io/components/navigation-rail)
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#NavigationRail)
* [Full Example Code]({{ site.samplefolder }}/material/navigationrail/NavigationRailSample.kt)
Jetpack-Compose-Playground/docs/material/radiobutton.md
+50
View File
@@ -0,0 +1,50 @@
<!---
This is the API of version 1.2.0
-->
# RadioButton
Radio buttons allow users to select one option from a set.
<p align="left">
<img src ="{{ site.images }}/material/radiobutton/radiobutton.png" height=100 width=300 style="border: 1px solid black;" />
</p>
## Example
```kotlin
@Composable
fun RadioButtonSample() {
val radioOptions = listOf("A", "B", "C")
val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[1] ) }
Column {
radioOptions.forEach { text ->
Row(
Modifier
.fillMaxWidth()
.selectable(
selected = (text == selectedOption),
onClick = {
onOptionSelected(text)
}
)
.padding(horizontal = 16.dp)
) {
RadioButton(
selected = (text == selectedOption),
onClick = { onOptionSelected(text) }
)
Text(
text = text,
style = MaterialTheme.typography.body1.merge(),
modifier = Modifier.padding(start = 16.dp)
)
}
}
}
}
```
## See also:
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#radiobutton)
* [Full Example Code]({{ site.samplefolder }}/material/radiobutton/RadioButtonSample.kt)
Jetpack-Compose-Playground/docs/material/scaffold.md
+81
View File
@@ -0,0 +1,81 @@
<!---
This is the API of version 1.2.0
-->
# Scaffold
A Scaffold is a layout which implements the basic material design layout structure. You can add things like a TopBar, BottomBar, FAB or a Drawer.
```kotlin
@Composable
fun ScaffoldDemo() {
val materialBlue700= Color(0xFF1976D2)
val scaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Open))
Scaffold(
scaffoldState = scaffoldState,
topBar = { TopAppBar(title = {Text("TopAppBar")},backgroundColor = materialBlue700) },
floatingActionButtonPosition = FabPosition.End,
floatingActionButton = { FloatingActionButton(onClick = {}){
Text("X")
} },
drawerContent = { Text(text = "drawerContent") },
content = { Text("BodyContent") },
bottomBar = { BottomAppBar(backgroundColor = materialBlue700) { Text("BottomAppBar") } }
)
}
```
=== "Default"
<img src ="{{ site.images }}/material/scaffold/scaffold.png" height=100 width=300 />
=== "With Drawer open"
<img src ="{{ site.images }}/material/scaffold/scaffoldwithdrawer.png" height=100 width=300/>
## scaffoldState
With the scaffoldState you can set the opening state of the drawer(DrawerState.Opened or DrawerState.Closed)
## topBar
<p align="left">
<img src ="{{ site.images }}/material/scaffold/topappbar.png" />
</p>
Here you can set the part of your layout that should be displayed on top of the screen. You can use it for things like a toolbar. You can set any Composable, but **TopAppBar** is already made for this usecase.
## floatingActionButton
<p align="left">
<img src ="{{ site.images }}/material/scaffold/floatingactionbutton.png" />
</p>
Here you can add FloatingActionButton. You can set any Composable, but **FloatingActionButton** is already made for this usecase
## floatingActionButtonPosition
When you have added a FAB, you can use this specify the position of it. The default position is at the end of your layout.
## drawerContent
Here you can set the content of your drawer.
## Content
This is the primary content of the scaffold. You can add any Composable here.
## bottomBar
<p align="left">
<img src ="{{ site.images }}/material/scaffold/bottomappbar.png" />
</p>
Here you can set the part of your layout is on bottom of the screen. You can set any Composable, but **BottomAppBar** is already made for this usecase.
## Tips
* The bottombar is overlapping the content
Inside the content lambda you have access to the PaddingValues. You can use **calculateBottomPadding()** to get the height of the bottombar and then set an extra padding to your content
## See also:
* [Full Example Code]({{ site.samplefolder }}/material/scaffold/ScaffoldDemo.kt)
Jetpack-Compose-Playground/docs/material/slider.md
+26
View File
@@ -0,0 +1,26 @@
<!---
This is the API of version 1.2.0
-->
# Slider
"Sliders allow users to make selections from a range of values."
<p align="center">
<img src ="{{ site.images }}/material/slider/sliderdemo.png" height=100 width=300 />
</p>
```kotlin
@Composable
fun MySliderDemo() {
var sliderPosition by remember { mutableStateOf(0f) }
Text(text = sliderPosition.toString())
Slider(value = sliderPosition, onValueChange = { sliderPosition = it })
}
```
## See also:
* [Material.io](https://material.io/components/sliders)
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#slider)
* [Full Example Code]({{ site.samplefolder }}/material/slider/MySliderDemo.kt)
Jetpack-Compose-Playground/docs/material/snackbar.md
+44
View File
@@ -0,0 +1,44 @@
<!---
This is the API of version 1.2.0
-->
# Snackbar
"Snackbars provide brief messages about app processes at the bottom of the screen."
<p align="left">
<img src ="{{ site.images }}/material/snackbar/snackbarDemo.png" height=100 width=300 />
</p>
```kotlin
@Composable
fun SnackbarDemo() {
Column {
val (snackbarVisibleState, setSnackBarState) = remember { mutableStateOf(false) }
Button(onClick = { setSnackBarState(!snackbarVisibleState) }) {
if (snackbarVisibleState) {
Text("Hide Snackbar")
} else {
Text("Show Snackbar")
}
}
if (snackbarVisibleState) {
Snackbar(
action = {
Button(onClick = {}) {
Text("MyAction")
}
},
modifier = Modifier.padding(8.dp)
) { Text(text = "This is a snackbar!") }
}
}
}
```
## See also:
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#snackbar)
* [Full Example Code]({{ site.samplefolder }}/material/snackbar/SnackbarDemo.kt)
Jetpack-Compose-Playground/docs/material/surface.md
+30
View File
@@ -0,0 +1,30 @@
<!---
This is the API of version 1.2.0
-->
# Surface
# Example
<p align="left">
<img src ="{{ site.images }}/material/surface/surfacedemo.png" height=100 width=300 />
</p>
```kotlin
@Composable
fun SurfaceDemo() {
Surface(
modifier = Modifier.padding(8.dp),
border = BorderStroke(2.dp, Color.Red),
contentColor = Color.Blue,
elevation = 8.dp,
shape = CircleShape
) {
Text("Hello World", modifier = Modifier.padding(8.dp))
}
}
```
## See also:
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#surface)
* [Full Example Code]({{ site.samplefolder }}/material/surface/SurfaceDemo.kt)
Jetpack-Compose-Playground/docs/material/switch.md
+25
View File
@@ -0,0 +1,25 @@
<!---
This is the API of version 1.2.0
-->
# Switch
<p align="left">
<img src ="{{ site.images }}/material/switch/SwitchDemo.png" height=100 width=300 />
</p>
```kotlin
@Composable
fun SwitchDemo() {
val checkedState = remember { mutableStateOf(true) }
Switch(
checked = checkedState.value,
onCheckedChange = { checkedState.value = it }
)
}
```
## See also:
* [Official Docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#switch)
* [Full Example Code]({{ site.samplefolder }}/material/switch/SwitchDemo.kt)
Jetpack-Compose-Playground/docs/material/textfield.md
+29
View File
@@ -0,0 +1,29 @@
<!---
This is the API of version 1.2.0
-->
# TextField
TextField can be used to insert text. This is the equivalent to **EditText** from the Android View system.
<p align="center">
<img src ="{{ site.images }}/material/textfield/textfield.png" />
</p>
```kotlin
@Composable
fun TextFieldDemo() {
Column(Modifier.padding(16.dp)) {
val textState = remember { mutableStateOf(TextFieldValue()) }
TextField(
value = textState.value,
onValueChange = { textState.value = it }
)
Text("The textfield has this text: " + textState.value.text)
}
}
```
-------------
## See also:
* [Handle changes in a TextField](https://foso.github.io/Jetpack-Compose-Playground/cookbook/textfield_changes/)
* [Full Example Code]({{ site.samplefolder }}/other/TextFieldDemo.kt)
Jetpack-Compose-Playground/docs/material/topappbar.md
+42
View File
@@ -0,0 +1,42 @@
<!---
This is the API of version 1.2.0
-->
# TopAppBar
A TopAppBar displays information and actions relating to the current screen and is placed at the top of the screen.
<p align="center">
<img src ="{{ site.images }}/material/topappbar/topappbar.png" height=100 width=300/>
</p>
```kotlin
@Composable
fun TopAppBarSample(){
Column {
TopAppBar(
elevation = 4.dp,
title = {
Text("I'm a TopAppBar")
},
backgroundColor = MaterialTheme.colors.primarySurface,
navigationIcon = {
IconButton(onClick = {/* Do Something*/ }) {
Icon(Icons.Filled.ArrowBack, null)
}
}, actions = {
IconButton(onClick = {/* Do Something*/ }) {
Icon(Icons.Filled.Share, null)
}
IconButton(onClick = {/* Do Something*/ }) {
Icon(Icons.Filled.Settings, null)
}
})
Text("Hello World")
}
}
```
## See also:
* [Full Example Code]({{ site.samplefolder }}/material/appbar/topappbar/TopAppBarSample.kt)