github
/
compose-jb
mirror of https://gitee.com/github-sync-mirror/compose-jb.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Fix Content menu tutorial

redirect
Igor Demin 3 years ago committed by GitHub
parent
22da8d9529
commit
1375acf8cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 106
      tutorials/Context_Menu/README.md

106
tutorials/Context_Menu/README.md
Unescape View File

@ -11,7 +11,6 @@ There is out-of-the box context menu support for TextField and Selectable text.
To enable standard context menu for a TextField you just need to put it inside DesktopMaterialTheme: To enable standard context menu for a TextField you just need to put it inside DesktopMaterialTheme:
```kotlin ```kotlin
import androidx.compose.desktop.DesktopMaterialTheme
import androidx.compose.material.Text import androidx.compose.material.Text
import androidx.compose.material.TextField import androidx.compose.material.TextField
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
@ -21,14 +20,12 @@ import androidx.compose.ui.window.singleWindowApplication
@OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class) @OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class)
fun main() = singleWindowApplication(title = "Context menu") { fun main() = singleWindowApplication(title = "Context menu") {
DesktopMaterialTheme { //it is mandatory for Context Menu val text = remember { mutableStateOf("Hello!") }
val text = remember {mutableStateOf("Hello!")} TextField(
TextField( value = text.value,
value = text.value, onValueChange = { text.value = it },
onValueChange = { text.value = it }, label = { Text(text = "Input") }
label = { Text(text = "Input") } )
)
}
} }
``` ```
@ -37,7 +34,6 @@ Standard context menu for TextField contains the following items based on text s
Enabling standard context menu for a Text component is similar - you just need to make it selectable: Enabling standard context menu for a Text component is similar - you just need to make it selectable:
```kotlin ```kotlin
import androidx.compose.desktop.DesktopMaterialTheme
import androidx.compose.foundation.text.selection.SelectionContainer import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material.Text import androidx.compose.material.Text
import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.ExperimentalComposeUiApi
@ -45,11 +41,9 @@ import androidx.compose.ui.window.singleWindowApplication
@OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class) @OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class)
fun main() = singleWindowApplication(title = "Context menu") { fun main() = singleWindowApplication(title = "Context menu") {
DesktopMaterialTheme { //it is mandatory for Context Menu SelectionContainer {
SelectionContainer { Text("Hello World!")
Text("Hello World!") }
}
}
} }
``` ```
Context menu for text contains just Copy action. Context menu for text contains just Copy action.
@ -58,7 +52,6 @@ Context menu for text contains just Copy action.
To enable additional context menu items for TextField and Text components, ContextMenuDataProvider and ContextMenuItem elements are used: To enable additional context menu items for TextField and Text components, ContextMenuDataProvider and ContextMenuItem elements are used:
```kotlin ```kotlin
import androidx.compose.desktop.DesktopMaterialTheme
import androidx.compose.foundation.ContextMenuDataProvider import androidx.compose.foundation.ContextMenuDataProvider
import androidx.compose.foundation.ContextMenuItem import androidx.compose.foundation.ContextMenuItem
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
@ -76,28 +69,26 @@ import androidx.compose.ui.window.singleWindowApplication
@OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class) @OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class)
fun main() = singleWindowApplication(title = "Context menu") { fun main() = singleWindowApplication(title = "Context menu") {
DesktopMaterialTheme { //it is mandatory for Context Menu val text = remember { mutableStateOf("Hello!") }
val text = remember {mutableStateOf("Hello!")} Column {
Column { ContextMenuDataProvider(
ContextMenuDataProvider( items = {
items = { listOf(
listOf( ContextMenuItem("User-defined Action") {/*do something here*/ },
ContextMenuItem("User-defined Action") {/*do something here*/}, ContextMenuItem("Another user-defined action") {/*do something else*/ }
ContextMenuItem("Another user-defined action") {/*do something else*/}
)
}
) {
TextField(
value = text.value,
onValueChange = { text.value = it },
label = { Text(text = "Input") }
) )
}
) {
TextField(
value = text.value,
onValueChange = { text.value = it },
label = { Text(text = "Input") }
)
Spacer(Modifier.height(16.dp)) Spacer(Modifier.height(16.dp))
SelectionContainer { SelectionContainer {
Text("Hello World!") Text("Hello World!")
}
} }
} }
} }
@ -109,48 +100,27 @@ In this example Text/TextField context menus will be extended with two additiona
There is a possibility to create a context menu for an arbitrary application window area. This is implemented using ContextMenuArea API that is There is a possibility to create a context menu for an arbitrary application window area. This is implemented using ContextMenuArea API that is
similar to ContextMenuDataProvider. similar to ContextMenuDataProvider.
```kotlin ```kotlin
import androidx.compose.foundation.ContextMenuDataProvider import androidx.compose.foundation.ContextMenuArea
import androidx.compose.foundation.ContextMenuItem import androidx.compose.foundation.ContextMenuItem
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.text.selection.SelectionContainer import androidx.compose.foundation.layout.width
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.singleWindowApplication import androidx.compose.ui.window.singleWindowApplication
@OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class) @OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class)
fun main() = singleWindowApplication(title = "Context menu") { fun main() = singleWindowApplication(title = "Context menu") {
MaterialTheme { //it is mandatory for Context Menu ContextMenuArea(items = {
val text = remember {mutableStateOf("Hello!")} listOf(
Column { ContextMenuItem("User-defined Action") {/*do something here*/},
ContextMenuDataProvider( ContextMenuItem("Another user-defined action") {/*do something else*/}
items = { )
listOf( }) {
ContextMenuItem("User-defined Action") {/*do something here*/}, Box(modifier = Modifier.background(Color.Blue).height(100.dp).width(100.dp))
ContextMenuItem("Another user-defined action") {/*do something else*/}
)
}
) {
TextField(
value = text.value,
onValueChange = { text.value = it },
label = { Text(text = "Input") }
)
Spacer(Modifier.height(16.dp))
SelectionContainer {
Text("Hello World!")
}
}
}
} }
} }
``` ```

Write Preview
Loading…
Cancel
Save