Browse Source

Added scrollbar to ImageViewer.

pull/45/head
Roman Sedaikin 4 years ago
parent
commit
70ffa959c2
  1. 5
      examples/imageviewer/build.gradle.kts
  2. 36
      examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/MainScreen.kt
  3. 6
      examples/imageviewer/desktop/src/jvmMain/kotlin/imageviewer/Main.kt

5
examples/imageviewer/build.gradle.kts

@ -1,8 +1,5 @@
buildscript { buildscript {
repositories { repositories {
mavenLocal().mavenContent {
includeModule("org.jetbrains.compose", "compose-desktop-application-gradle-plugin")
}
google() google()
jcenter() jcenter()
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
@ -10,7 +7,7 @@ buildscript {
dependencies { dependencies {
classpath("org.jetbrains.compose:compose-gradle-plugin:0.1.0-m1-build57") classpath("org.jetbrains.compose:compose-gradle-plugin:0.1.0-m1-build57")
classpath("org.jetbrains.compose:compose-desktop-application-gradle-plugin:0.1.0-SNAPSHOT") classpath("org.jetbrains.compose:compose-desktop-application-gradle-plugin:0.1.0-m1-build57")
classpath("com.android.tools.build:gradle:4.0.1") classpath("com.android.tools.build:gradle:4.0.1")
classpath(kotlin("gradle-plugin", version = "1.4.0")) classpath(kotlin("gradle-plugin", version = "1.4.0"))
} }

36
examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/MainScreen.kt

@ -6,11 +6,6 @@ import androidx.compose.foundation.Text
import androidx.compose.foundation.Image import androidx.compose.foundation.Image
import androidx.compose.foundation.ScrollableColumn import androidx.compose.foundation.ScrollableColumn
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.asImageAsset
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
@ -22,8 +17,13 @@ import androidx.compose.foundation.layout.preferredWidth
import androidx.compose.foundation.layout.preferredSize import androidx.compose.foundation.layout.preferredSize
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.rememberScrollbarAdapter
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.VerticalScrollbar
import androidx.compose.material.Surface import androidx.compose.material.Surface
import androidx.compose.material.CircularProgressIndicator import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.MaterialTheme import androidx.compose.material.MaterialTheme
@ -32,9 +32,14 @@ import androidx.compose.material.Card
import androidx.compose.material.Divider import androidx.compose.material.Divider
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.asImageAsset
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.TextUnit
import example.imageviewer.model.AppState import example.imageviewer.model.AppState
import example.imageviewer.model.Picture import example.imageviewer.model.Picture
import example.imageviewer.model.ScreenType import example.imageviewer.model.ScreenType
@ -186,7 +191,7 @@ fun setMiniatureUI(
val infoButtonHover = remember { mutableStateOf(false) } val infoButtonHover = remember { mutableStateOf(false) }
Card( Card(
backgroundColor = if (cardHover.value) MiniatureHoverColor else MiniatureColor, backgroundColor = if (cardHover.value) MiniatureHoverColor else MiniatureColor,
modifier = Modifier.padding(start = 10.dp, end = 10.dp).preferredHeight(70.dp) modifier = Modifier.padding(start = 10.dp, end = 18.dp).preferredHeight(70.dp)
.fillMaxWidth() .fillMaxWidth()
.hover(onEnter = { .hover(onEnter = {
cardHover.value = true cardHover.value = true
@ -199,8 +204,7 @@ fun setMiniatureUI(
.clickable { .clickable {
content.setMainImage(picture) content.setMainImage(picture)
}, },
shape = RectangleShape, shape = RectangleShape
elevation = 20.dp
) { ) {
Row(modifier = Modifier.padding(end = 30.dp)) { Row(modifier = Modifier.padding(end = 30.dp)) {
Clickable( Clickable(
@ -265,8 +269,12 @@ fun setMiniatureUI(
@Composable @Composable
fun setScrollableArea(content: ContentState) { fun setScrollableArea(content: ContentState) {
Box(
ScrollableColumn { modifier = Modifier.fillMaxSize()
.padding(end = 8.dp)
) {
val stateVertical = rememberScrollState(0f)
ScrollableColumn(scrollState = stateVertical) {
var index = 1 var index = 1
Column { Column {
for (picture in content.getMiniatures()) { for (picture in content.getMiniatures()) {
@ -279,6 +287,12 @@ fun setScrollableArea(content: ContentState) {
} }
} }
} }
VerticalScrollbar(
modifier = Modifier.align(Alignment.CenterEnd)
.fillMaxHeight(),
adapter = rememberScrollbarAdapter(stateVertical)
)
}
} }
@Composable @Composable

6
examples/imageviewer/desktop/src/jvmMain/kotlin/imageviewer/Main.kt

@ -1,6 +1,8 @@
package example.imageviewer package example.imageviewer
import androidx.compose.desktop.DesktopTheme
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import example.imageviewer.utils.getPreferredWindowSize import example.imageviewer.utils.getPreferredWindowSize
import example.imageviewer.view.BuildAppUI import example.imageviewer.view.BuildAppUI
@ -18,6 +20,10 @@ fun main() {
val content = ContentState.applyContent( val content = ContentState.applyContent(
"https://spvessel.com/iv/images/fetching.list" "https://spvessel.com/iv/images/fetching.list"
) )
MaterialTheme {
DesktopTheme {
BuildAppUI(content) BuildAppUI(content)
} }
}
}
} }

Loading…
Cancel
Save