From 1375acf8cc7100bd15fb9cc0d7bbb55254a68b71 Mon Sep 17 00:00:00 2001 From: Igor Demin Date: Tue, 8 Mar 2022 22:24:44 +0300 Subject: [PATCH] Fix Content menu tutorial --- tutorials/Context_Menu/README.md | 112 +++++++++++-------------------- 1 file changed, 41 insertions(+), 71 deletions(-) diff --git a/tutorials/Context_Menu/README.md b/tutorials/Context_Menu/README.md index 35f1ac91d7..645685810a 100644 --- a/tutorials/Context_Menu/README.md +++ b/tutorials/Context_Menu/README.md @@ -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: ```kotlin -import androidx.compose.desktop.DesktopMaterialTheme import androidx.compose.material.Text import androidx.compose.material.TextField import androidx.compose.runtime.mutableStateOf @@ -21,15 +20,13 @@ import androidx.compose.ui.window.singleWindowApplication @OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class) fun main() = singleWindowApplication(title = "Context menu") { - DesktopMaterialTheme { //it is mandatory for Context Menu - val text = remember {mutableStateOf("Hello!")} - TextField( - value = text.value, - onValueChange = { text.value = it }, - label = { Text(text = "Input") } - ) - } -} + val text = remember { mutableStateOf("Hello!") } + TextField( + value = text.value, + onValueChange = { text.value = it }, + label = { Text(text = "Input") } + ) +} ``` Standard context menu for TextField contains the following items based on text selection: Copy, Cut, Paste, Select All. @@ -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: ```kotlin -import androidx.compose.desktop.DesktopMaterialTheme import androidx.compose.foundation.text.selection.SelectionContainer import androidx.compose.material.Text import androidx.compose.ui.ExperimentalComposeUiApi @@ -45,12 +41,10 @@ import androidx.compose.ui.window.singleWindowApplication @OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class) fun main() = singleWindowApplication(title = "Context menu") { - DesktopMaterialTheme { //it is mandatory for Context Menu - SelectionContainer { - Text("Hello World!") - } - } -} + SelectionContainer { + Text("Hello World!") + } +} ``` 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: ```kotlin -import androidx.compose.desktop.DesktopMaterialTheme import androidx.compose.foundation.ContextMenuDataProvider import androidx.compose.foundation.ContextMenuItem import androidx.compose.foundation.layout.Column @@ -76,32 +69,30 @@ import androidx.compose.ui.window.singleWindowApplication @OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class) fun main() = singleWindowApplication(title = "Context menu") { - DesktopMaterialTheme { //it is mandatory for Context Menu - val text = remember {mutableStateOf("Hello!")} - Column { - ContextMenuDataProvider( - items = { - listOf( - ContextMenuItem("User-defined Action") {/*do something here*/}, - ContextMenuItem("Another user-defined action") {/*do something else*/} - ) - } - ) { - TextField( - value = text.value, - onValueChange = { text.value = it }, - label = { Text(text = "Input") } + val text = remember { mutableStateOf("Hello!") } + Column { + ContextMenuDataProvider( + items = { + listOf( + ContextMenuItem("User-defined Action") {/*do something here*/ }, + 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)) + Spacer(Modifier.height(16.dp)) - SelectionContainer { - Text("Hello World!") - } + SelectionContainer { + Text("Hello World!") } } } -} +} ``` In this example Text/TextField context menus will be extended with two additional items. @@ -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 similar to ContextMenuDataProvider. ```kotlin -import androidx.compose.foundation.ContextMenuDataProvider +import androidx.compose.foundation.ContextMenuArea import androidx.compose.foundation.ContextMenuItem -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.height -import androidx.compose.foundation.text.selection.SelectionContainer -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.foundation.layout.width import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp import androidx.compose.ui.window.singleWindowApplication @OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class) fun main() = singleWindowApplication(title = "Context menu") { - MaterialTheme { //it is mandatory for Context Menu - val text = remember {mutableStateOf("Hello!")} - Column { - ContextMenuDataProvider( - items = { - listOf( - ContextMenuItem("User-defined Action") {/*do something here*/}, - 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!") - } - } - } + ContextMenuArea(items = { + listOf( + ContextMenuItem("User-defined Action") {/*do something here*/}, + ContextMenuItem("Another user-defined action") {/*do something else*/} + ) + }) { + Box(modifier = Modifier.background(Color.Blue).height(100.dp).width(100.dp)) } } ```