danvics/VerveDo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(settings): 将横向滚动设置项组件化

Browse source
This commit is contained in:
Super12138 2025-02-05 11:17:44 +08:00
parent 1a123c6549
commit 70da0be4f1
3 changed files with 101 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
app/src/main/kotlin/cn/super12138/todo/ui/pages/settings/components/RowSettingsItem.kt Normal file
View file

@ -0,0 +1,85 @@
package cn.super12138.todo.ui.pages.settings.components
import androidx.compose.foundation.gestures.FlingBehavior
import androidx.compose.foundation.gestures.ScrollableDefaults
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Composable
fun RowSettingsItem(
title: String,
description: String? = null,
shape: Shape = MaterialTheme.shapes.large,
modifier: Modifier = Modifier,
state: LazyListState = rememberLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
horizontalArrangement: Arrangement.Horizontal =
if (!reverseLayout) Arrangement.Start else Arrangement.End,
verticalAlignment: Alignment.Vertical = Alignment.Top,
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
content: LazyListScope.() -> Unit
) {
Column(
modifier = modifier
.fillMaxWidth()
.wrapContentHeight()
.clip(shape)
.padding(horizontal = 24.dp, vertical = 20.dp),
) {
Text(
text = title,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = MaterialTheme.typography.titleLarge.copy(
color = MaterialTheme.colorScheme.onSurface,
fontSize = 20.sp
)
)
description?.let {
Text(
text = it,
// maxLines = 2,
overflow = TextOverflow.Ellipsis,
style = MaterialTheme.typography.bodyMedium.copy(
color = MaterialTheme.colorScheme.onSurfaceVariant
)
)
}
Spacer(Modifier.size(8.dp))
LazyRow(
modifier = Modifier.fillMaxWidth(),
state = state,
contentPadding = contentPadding,
reverseLayout = reverseLayout,
horizontalArrangement = horizontalArrangement,
verticalAlignment = verticalAlignment,
flingBehavior = flingBehavior,
userScrollEnabled = userScrollEnabled,
content = content
)
}
}

1
app/src/main/kotlin/cn/super12138/todo/ui/pages/settings/components/palette/PaletteItem.kt
View file

@ -39,7 +39,6 @@ fun PaletteItem(
modifier: Modifier = Modifier
) {
val context = LocalContext.current
// 单个主题最外层布局
Column(
modifier = Modifier
.width(90.dp)

63
app/src/main/kotlin/cn/super12138/todo/ui/pages/settings/components/palette/PalettePicker.kt
View file

@ -1,28 +1,17 @@
package cn.super12138.todo.ui.pages.settings.components.palette
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import cn.super12138.todo.R
import cn.super12138.todo.constants.Constants
import cn.super12138.todo.ui.pages.settings.components.RowSettingsItem
import cn.super12138.todo.ui.pages.settings.state.rememberPrefIntState
import cn.super12138.todo.ui.theme.PaletteStyle
@ -36,43 +25,23 @@ fun PalettePicker(
Constants.PREF_PALETTE_STYLE_DEFAULT
)
Column(
modifier = modifier
.fillMaxWidth()
.wrapContentHeight()
.clip(MaterialTheme.shapes.large)
.padding(horizontal = 24.dp, vertical = 20.dp),
val paletteOptions = remember {
PaletteStyle.entries.toList()
}
RowSettingsItem(
title = stringResource(R.string.pref_palette_style),
horizontalArrangement = Arrangement.spacedBy(5.dp)
) {
Text(
text = stringResource(R.string.pref_palette_style),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = MaterialTheme.typography.titleLarge.copy(
color = MaterialTheme.colorScheme.onSurface,
fontSize = 20.sp
items(items = paletteOptions, key = { it.id }) { paletteStyle ->
PaletteItem(
paletteStyle = paletteStyle,
selected = PaletteStyle.fromId(paletteState) == paletteStyle,
onSelect = {
paletteState = paletteStyle.id
onPaletteChange(paletteStyle)
}
)
)
Spacer(Modifier.size(8.dp))
val paletteOptions = remember {
PaletteStyle.entries.toList()
}
LazyRow(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(5.dp)
) {
items(items = paletteOptions, key = { it.name }) { paletteStyle ->
PaletteItem(
paletteStyle = paletteStyle,
selected = PaletteStyle.fromId(paletteState) == paletteStyle,
onSelect = {
paletteState = paletteStyle.id
onPaletteChange(paletteStyle)
}
)
}
}
}
}