Browse Source

Update README.md with TextFieldScroller

pull/5132/head
KunMinX 3 months ago committed by GitHub
parent
commit
ba904d7481
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 32
      tutorials/Desktop_Components/README.md

32
tutorials/Desktop_Components/README.md

@ -172,6 +172,38 @@ fun TextBox(text: String = "Item") {
<img alt="Lazy component" src="lazy_scrollbar.gif" height="412" />
## 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()
)
}
}
```
<img alt="TextFieldScrollbars" src="TextFieldScrollbar.gif" height="350" />
## Tooltips
You can add tooltip to any components using `TooltipArea`. `TooltipArea` is similar to a `Box`, but with the ability to show a tooltip.

Loading…
Cancel
Save