mirror of
https://github.com/jlengrand/compose-multiplatform.git
synced 2026-03-10 08:11:20 +00:00
Update Compose
This commit is contained in:
Igor Demin
@@ -9,7 +9,6 @@ In this tutorial, we will show you how to use desktop-specific components of Com
|
||||
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
|
||||
import androidx.compose.desktop.Window
|
||||
import androidx.compose.foundation.HorizontalScrollbar
|
||||
import androidx.compose.foundation.VerticalScrollbar
|
||||
import androidx.compose.foundation.background
|
||||
@@ -29,49 +28,53 @@ import androidx.compose.foundation.verticalScroll
|
||||
import androidx.compose.material.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.ExperimentalComposeUiApi
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.unit.IntSize
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.window.WindowState
|
||||
import androidx.compose.ui.window.singleWindowApplication
|
||||
|
||||
@OptIn(ExperimentalComposeUiApi::class)
|
||||
fun main() = singleWindowApplication(
|
||||
title = "Scrollbars",
|
||||
state = WindowState(width = 250.dp, height = 400.dp)
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier.fillMaxSize()
|
||||
.background(color = Color(180, 180, 180))
|
||||
.padding(10.dp)
|
||||
) {
|
||||
val stateVertical = rememberScrollState(0)
|
||||
val stateHorizontal = rememberScrollState(0)
|
||||
|
||||
fun main() {
|
||||
Window(title = "Scrollbars", size = IntSize(250, 400)) {
|
||||
Box(
|
||||
modifier = Modifier.fillMaxSize()
|
||||
.background(color = Color(180, 180, 180))
|
||||
.padding(10.dp)
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.verticalScroll(stateVertical)
|
||||
.padding(end = 12.dp, bottom = 12.dp)
|
||||
.horizontalScroll(stateHorizontal)
|
||||
) {
|
||||
val stateVertical = rememberScrollState(0)
|
||||
val stateHorizontal = rememberScrollState(0)
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.verticalScroll(stateVertical)
|
||||
.padding(end = 12.dp, bottom = 12.dp)
|
||||
.horizontalScroll(stateHorizontal)
|
||||
) {
|
||||
Column {
|
||||
for (item in 0..30) {
|
||||
TextBox("Item #$item")
|
||||
if (item < 30) {
|
||||
Spacer(modifier = Modifier.height(5.dp))
|
||||
}
|
||||
Column {
|
||||
for (item in 0..30) {
|
||||
TextBox("Item #$item")
|
||||
if (item < 30) {
|
||||
Spacer(modifier = Modifier.height(5.dp))
|
||||
}
|
||||
}
|
||||
}
|
||||
VerticalScrollbar(
|
||||
modifier = Modifier.align(Alignment.CenterEnd)
|
||||
.fillMaxHeight(),
|
||||
adapter = rememberScrollbarAdapter(stateVertical)
|
||||
)
|
||||
HorizontalScrollbar(
|
||||
modifier = Modifier.align(Alignment.BottomStart)
|
||||
.fillMaxWidth()
|
||||
.padding(end = 12.dp),
|
||||
adapter = rememberScrollbarAdapter(stateHorizontal)
|
||||
)
|
||||
}
|
||||
VerticalScrollbar(
|
||||
modifier = Modifier.align(Alignment.CenterEnd)
|
||||
.fillMaxHeight(),
|
||||
adapter = rememberScrollbarAdapter(stateVertical)
|
||||
)
|
||||
HorizontalScrollbar(
|
||||
modifier = Modifier.align(Alignment.BottomStart)
|
||||
.fillMaxWidth()
|
||||
.padding(end = 12.dp),
|
||||
adapter = rememberScrollbarAdapter(stateHorizontal)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -96,7 +99,6 @@ fun TextBox(text: String = "Item") {
|
||||
You can use scrollbars with lazy scrollable components, for example, `LazyColumn`.
|
||||
|
||||
```kotlin
|
||||
import androidx.compose.desktop.Window
|
||||
import androidx.compose.foundation.VerticalScrollbar
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Box
|
||||
@@ -112,13 +114,21 @@ import androidx.compose.foundation.rememberScrollbarAdapter
|
||||
import androidx.compose.material.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.ExperimentalComposeUiApi
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.unit.IntSize
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.window.Window
|
||||
import androidx.compose.ui.window.application
|
||||
import androidx.compose.ui.window.rememberWindowState
|
||||
|
||||
fun main() {
|
||||
Window(title = "Scrollbars", size = IntSize(250, 400)) {
|
||||
@OptIn(ExperimentalComposeUiApi::class)
|
||||
fun main() = application {
|
||||
Window(
|
||||
onCloseRequest = ::exitApplication,
|
||||
title = "Scrollbars",
|
||||
state = rememberWindowState(width = 250.dp, height = 400.dp)
|
||||
) {
|
||||
LazyScrollable()
|
||||
}
|
||||
}
|
||||
@@ -170,7 +180,6 @@ Scrollbars support themes to change their appearance. The example below shows ho
|
||||
|
||||
```kotlin
|
||||
import androidx.compose.desktop.DesktopTheme
|
||||
import androidx.compose.desktop.Window
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.fillMaxHeight
|
||||
@@ -188,13 +197,21 @@ import androidx.compose.foundation.verticalScroll
|
||||
import androidx.compose.material.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.ExperimentalComposeUiApi
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.IntSize
|
||||
import androidx.compose.ui.window.Window
|
||||
import androidx.compose.ui.window.application
|
||||
import androidx.compose.ui.window.rememberWindowState
|
||||
|
||||
fun main() {
|
||||
Window(title = "Scrollbars", size = IntSize(280, 400)) {
|
||||
@OptIn(ExperimentalComposeUiApi::class)
|
||||
fun main() = application {
|
||||
Window(
|
||||
onCloseRequest = ::exitApplication,
|
||||
title = "Scrollbars",
|
||||
state = rememberWindowState(width = 250.dp, height = 400.dp)
|
||||
) {
|
||||
MaterialTheme {
|
||||
DesktopTheme {
|
||||
Box(
|
||||
@@ -250,11 +267,10 @@ fun TextBox(text: String = "Item") {
|
||||
You can add tooltip to any components using `BoxWithTooltip`. Basically `BoxWithTooltip` is a `Box` with the ability to show a tooltip, and has the same arguments and behavior as `Box`.
|
||||
The main arguments of the `BoxWithTooltip` function:
|
||||
- tooltip - composable content representing tooltip
|
||||
- tooltipPlacement - describes how to place tooltip. You can specify an anchor (the mouse cursor or the component), an offset and an alignment
|
||||
- delay - time delay in milliseconds after which the tooltip will be shown (default is 500 ms)
|
||||
- offset - tooltip offset, the default position of the tooltip is under the mouse cursor
|
||||
|
||||
```kotlin
|
||||
import androidx.compose.desktop.Window
|
||||
import androidx.compose.foundation.BoxWithTooltip
|
||||
import androidx.compose.foundation.TooltipPlacement
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
@@ -266,41 +282,51 @@ import androidx.compose.material.Button
|
||||
import androidx.compose.material.Surface
|
||||
import androidx.compose.material.Text
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.ExperimentalComposeUiApi
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.shadow
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.DpOffset
|
||||
import androidx.compose.ui.unit.IntSize
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.window.Window
|
||||
import androidx.compose.ui.window.application
|
||||
import androidx.compose.ui.window.rememberWindowState
|
||||
|
||||
fun main() = Window(title = "Tooltip Example", size = IntSize(300, 300)) {
|
||||
val buttons = listOf("Button A", "Button B", "Button C", "Button D", "Button E", "Button F")
|
||||
Column(Modifier.fillMaxSize(), Arrangement.spacedBy(5.dp)) {
|
||||
buttons.forEachIndexed { index, name ->
|
||||
// wrap button in BoxWithTooltip
|
||||
BoxWithTooltip(
|
||||
modifier = Modifier.padding(start = 40.dp),
|
||||
tooltip = {
|
||||
// composable tooltip content
|
||||
Surface(
|
||||
modifier = Modifier.shadow(4.dp),
|
||||
color = Color(255, 255, 210),
|
||||
shape = RoundedCornerShape(4.dp)
|
||||
) {
|
||||
Text(
|
||||
text = "Tooltip for ${name}",
|
||||
modifier = Modifier.padding(10.dp)
|
||||
)
|
||||
}
|
||||
},
|
||||
delay = 600, // in milliseconds
|
||||
tooltipPlacement = TooltipPlacement(
|
||||
anchor = TooltipPlacement.Anchor.Pointer,
|
||||
alignment = Alignment.BottomEnd,
|
||||
offset = if (index % 2 == 0) DpOffset(-16.dp, 0.dp) else DpOffset.Zero // tooltip offset
|
||||
)
|
||||
) {
|
||||
Button(onClick = {}) { Text(text = name) }
|
||||
@OptIn(ExperimentalComposeUiApi::class)
|
||||
fun main() = application {
|
||||
Window(
|
||||
onCloseRequest = ::exitApplication,
|
||||
title = "Tooltip Example",
|
||||
state = rememberWindowState(width = 300.dp, height = 300.dp)
|
||||
) {
|
||||
val buttons = listOf("Button A", "Button B", "Button C", "Button D", "Button E", "Button F")
|
||||
Column(Modifier.fillMaxSize(), Arrangement.spacedBy(5.dp)) {
|
||||
buttons.forEachIndexed { index, name ->
|
||||
// wrap button in BoxWithTooltip
|
||||
BoxWithTooltip(
|
||||
modifier = Modifier.padding(start = 40.dp),
|
||||
tooltip = {
|
||||
// composable tooltip content
|
||||
Surface(
|
||||
modifier = Modifier.shadow(4.dp),
|
||||
color = Color(255, 255, 210),
|
||||
shape = RoundedCornerShape(4.dp)
|
||||
) {
|
||||
Text(
|
||||
text = "Tooltip for ${name}",
|
||||
modifier = Modifier.padding(10.dp)
|
||||
)
|
||||
}
|
||||
},
|
||||
delay = 600, // in milliseconds
|
||||
tooltipPlacement = TooltipPlacement(
|
||||
anchor = TooltipPlacement.Anchor.Pointer,
|
||||
alignment = Alignment.BottomEnd,
|
||||
offset = if (index % 2 == 0) DpOffset(-16.dp, 0.dp) else DpOffset.Zero // tooltip offset
|
||||
)
|
||||
) {
|
||||
Button(onClick = {}) { Text(text = name) }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user