anandbose/anand-bose.github.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement scroll

Browse source
This commit is contained in:
Anand Bose 2024-12-31 11:48:39 +05:30
parent cc5d19a405
commit 00d8318818
Signed by: anandbose
GPG key ID: 69698042BA46B2B5
2 changed files with 90 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
composeApp/src/commonMain/kotlin/dev/anandbose/ui/app/App.kt
View file

@ -9,6 +9,7 @@ import anandbose.composeapp.generated.resources.social_medium
import anandbose.composeapp.generated.resources.social_twitter import anandbose.composeapp.generated.resources.social_twitter
import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
@ -19,6 +20,7 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.GridItemSpan
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
@ -58,41 +60,50 @@ fun App() {
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.TopCenter, contentAlignment = Alignment.TopCenter,
) { ) {
//val scrollState = rememberScrollState() val columns = when {
Column( maxWidth > 660.dp -> 3
maxWidth in 440.dp .. 660.dp -> 2
else -> 1
}
LazyVerticalGrid(
modifier = Modifier modifier = Modifier
.widthIn(max = 760.dp) .widthIn(max = 760.dp)
.padding(horizontal = 32.dp), .padding(horizontal = 32.dp),
//.verticalScroll(state = scrollState), columns = GridCells.Fixed(count = columns),
horizontalAlignment = Alignment.CenterHorizontally, horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
item(span = { GridItemSpan(columns) }) {
Box(
modifier = Modifier.padding(top = 32.dp),
contentAlignment = Alignment.Center,
) { ) {
AsyncImage( AsyncImage(
model = "https://avatars.githubusercontent.com/u/64779880?v=4", model = "https://avatars.githubusercontent.com/u/64779880?v=4",
modifier = Modifier modifier = Modifier
.padding(top = 32.dp)
.clip(CircleShape) .clip(CircleShape)
.size(size = 128.dp), .size(size = 128.dp),
contentDescription = null contentDescription = null
) )
}
}
item(span = { GridItemSpan(columns) }) {
Text( Text(
modifier = Modifier.padding(top = 16.dp),
text = "Anand Bose", text = "Anand Bose",
style = MaterialTheme.typography.titleLarge, style = MaterialTheme.typography.titleLarge,
textAlign = TextAlign.Center,
) )
}
item(span = { GridItemSpan(columns) }) {
Text( Text(
modifier = Modifier.padding(top = 8.dp), modifier = Modifier.padding(bottom = 24.dp),
text = "I'm passionate about building software with Kotlin and Compose.", text = "I'm passionate about building software with Kotlin and Compose.",
style = MaterialTheme.typography.labelLarge, style = MaterialTheme.typography.labelLarge,
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
) )
if (this@BoxWithConstraints.maxWidth > 480.dp) { }
LazyVerticalGrid( if (columns > 1) {
modifier = Modifier.padding(top = 32.dp), items(Links) {
columns = GridCells.Adaptive(minSize = 200.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
items(items = Links) {
UrlButtonLarge( UrlButtonLarge(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
icon = painterResource(it.icon), icon = painterResource(it.icon),
@ -100,13 +111,8 @@ fun App() {
url = it.url, url = it.url,
) )
} }
}
} else { } else {
LazyColumn( items(Links) {
modifier = Modifier.padding(top = 32.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
items(items = Links) {
UrlButtonSmall( UrlButtonSmall(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
icon = painterResource(it.icon), icon = painterResource(it.icon),
@ -115,7 +121,7 @@ fun App() {
) )
} }
} }
} item(span = { GridItemSpan(columns) }) {
Text( Text(
modifier = Modifier.padding(vertical = 32.dp), modifier = Modifier.padding(vertical = 32.dp),
text = buildAnnotatedString { text = buildAnnotatedString {
@ -155,6 +161,7 @@ fun App() {
} }
} }
} }
}

2
composeApp/src/commonMain/kotlin/dev/anandbose/ui/widget/UrlButtonLarge.kt
View file

@ -24,7 +24,7 @@ fun UrlButtonLarge(
) { ) {
Button( Button(
modifier = modifier, modifier = modifier,
shape = MaterialTheme.shapes.small, shape = MaterialTheme.shapes.medium,
content = { content = {
Column( Column(
horizontalAlignment = Alignment.CenterHorizontally, horizontalAlignment = Alignment.CenterHorizontally,