Browse Source

Tutorials. Fix Scrollbars examples

pull/361/head
Igor Demin 4 years ago
parent
commit
dc4910c2b6
  1. 21
      tutorials/Scrollbars/README.md

21
tutorials/Scrollbars/README.md

@ -6,7 +6,7 @@ In this tutorial, we will show you how to add scrollbars to scrollable lists usi
## Scrollbars applying ## Scrollbars applying
You can apply scrollbars to scrollable components. The scrollbar and scrollable components share a common state to synchronize with each other. For example, VerticalScrollbar can be attached to ScrollableColumn, and LazyColumnFor and HorizontalScrollbar can be attached to ScrollableRow and LazyRowFor. You can apply scrollbars to scrollable components. The scrollbar and scrollable components share a common state to synchronize with each other. For example, VerticalScrollbar can be attached to Modifier.verticalScroll, and LazyColumnFor and HorizontalScrollbar can be attached to Modifier.horizontalScroll and LazyRowFor.
```kotlin ```kotlin
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
@ -53,7 +53,7 @@ fun main() {
) { ) {
Column { Column {
for (item in 0..30) { for (item in 0..30) {
TextBox("Item in ScrollableColumn #$item") TextBox("Item #$item")
if (item < 30) { if (item < 30) {
Spacer(modifier = Modifier.height(5.dp)) Spacer(modifier = Modifier.height(5.dp))
} }
@ -138,7 +138,7 @@ fun LazyScrollable() {
LazyColumn(Modifier.fillMaxSize().padding(end = 12.dp), state) { LazyColumn(Modifier.fillMaxSize().padding(end = 12.dp), state) {
items(itemCount) { x -> items(itemCount) { x ->
TextBox("Item in ScrollableColumn #$x") TextBox("Item #$x")
Spacer(modifier = Modifier.height(5.dp)) Spacer(modifier = Modifier.height(5.dp))
} }
} }
@ -173,7 +173,7 @@ fun TextBox(text: String = "Item") {
Scrollbars support themes to change their appearance. The example below shows how to use the DesktopTheme appearance for the scrollbar. Scrollbars support themes to change their appearance. The example below shows how to use the DesktopTheme appearance for the scrollbar.
``` kotlin ```kotlin
import androidx.compose.desktop.DesktopTheme import androidx.compose.desktop.DesktopTheme
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
import androidx.compose.foundation.background import androidx.compose.foundation.background
@ -186,9 +186,10 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.rememberScrollbarAdapter import androidx.compose.foundation.rememberScrollbarAdapter
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.ScrollableColumn
import androidx.compose.material.Text import androidx.compose.material.Text
import androidx.compose.foundation.VerticalScrollbar import androidx.compose.foundation.VerticalScrollbar
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.MaterialTheme import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
@ -208,12 +209,14 @@ fun main() {
) { ) {
val state = rememberScrollState(0f) val state = rememberScrollState(0f)
ScrollableColumn( Column(
modifier = Modifier.fillMaxSize().padding(end = 12.dp), modifier = Modifier
scrollState = state .verticalScroll(state)
.fillMaxSize()
.padding(end = 12.dp)
) { ) {
for (item in 0..30) { for (item in 0..30) {
TextBox("Item in ScrollableColumn #$item") TextBox("Item #$item")
if (item < 30) { if (item < 30) {
Spacer(modifier = Modifier.height(5.dp)) Spacer(modifier = Modifier.height(5.dp))
} }

Loading…
Cancel
Save