diff --git a/tutorials/Desktop_Components/README.md b/tutorials/Desktop_Components/README.md index 8fe0ea905ce..b604d7f39c8 100644 --- a/tutorials/Desktop_Components/README.md +++ b/tutorials/Desktop_Components/README.md @@ -172,6 +172,38 @@ fun TextBox(text: String = "Item") { Lazy component +## TextField with Scrollbar + +You can use scrollbars with TextField. + +> Tip: Please use `TextFieldVerticalScrollState`, passing it to the `scrollState` parameter of `TextField`/`BasicTextField`. This parameter is currently an experimental feature and requires adding `@OptIn(ExperimentalFoundationApi::class)` to the function. +> +> Do not use `ScrollState` and pass it to the `Modifier.verticalScroller`, otherwise it will affect the internal `TextFieldVerticalScrollState` of the `TextField`. As a result, when the cursor goes out of bounds, the `TextField` will not automatically update and scroll up, causing the content of the line where the cursor is located to not appear in the visible area. + +```kotlin +@OptIn(ExperimentalFoundationApi::class) +fun main() = singleWindowApplication { + Box(modifier = Modifier.fillMaxSize()) { + val scrollState = rememberTextFieldVerticalScrollState() + var text by remember { mutableStateOf("Text\n".repeat(100)) } + BasicTextField( + value = text, + onValueChange = { text = it }, + modifier = Modifier.fillMaxSize(), + scrollState = scrollState + ) + + VerticalScrollbar( + adapter = rememberScrollbarAdapter(scrollState), + modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight() + ) + } +} +``` + +TextFieldScrollbars + + ## Tooltips You can add tooltip to any components using `TooltipArea`. `TooltipArea` is similar to a `Box`, but with the ability to show a tooltip. diff --git a/tutorials/Desktop_Components/TextFieldScrollbar.gif b/tutorials/Desktop_Components/TextFieldScrollbar.gif new file mode 100644 index 00000000000..3c3f81066b7 Binary files /dev/null and b/tutorials/Desktop_Components/TextFieldScrollbar.gif differ