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

Super12138 · Feb 5, 2025 · 70da0be · 70da0be
1 parent 1a123c6
commit 70da0be
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 48 deletions.
diff --git a/app/src/main/kotlin/cn/super12138/todo/ui/pages/settings/components/RowSettingsItem.kt b/app/src/main/kotlin/cn/super12138/todo/ui/pages/settings/components/RowSettingsItem.kt
@@ -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
+        )
+    }
+}
diff --git a/app/src/main/kotlin/cn/super12138/todo/ui/pages/settings/components/palette/PaletteItem.kt b/app/src/main/kotlin/cn/super12138/todo/ui/pages/settings/components/palette/PaletteItem.kt
@@ -39,7 +39,6 @@ fun PaletteItem(
     modifier: Modifier = Modifier
 ) {
     val context = LocalContext.current
-    // 单个主题最外层布局
     Column(
         modifier = Modifier
             .width(90.dp)

diff --git a/app/src/main/kotlin/cn/super12138/todo/ui/pages/settings/components/palette/PalettePicker.kt b/app/src/main/kotlin/cn/super12138/todo/ui/pages/settings/components/palette/PalettePicker.kt
@@ -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)
-                    }
-                )
-            }
         }
     }
 }