优化关于界面显示

2025-11-23 15:34:47 +08:00
parent 5ffcb2f5fe
commit e9ccf3b700
3 changed files with 135 additions and 90 deletions
@@ -3,20 +3,18 @@ package io.legado.app.ui.about
 import android.content.res.Configuration
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
-import androidx.compose.material3.ButtonGroup
-import androidx.compose.material3.ButtonGroupDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.FilledTonalIconButton
@@ -26,7 +24,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.MaterialTheme.colorScheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -35,8 +32,10 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import io.legado.app.R
 import io.legado.app.base.AppTheme
 import io.legado.app.constant.AppConst.appInfo
@@ -61,61 +60,6 @@ fun PreviewAboutScreen() {
    }
 }

-@OptIn(ExperimentalMaterial3ExpressiveApi::class)
-@Composable
-fun ButtonGroup(
-    onOpenUrl: (String) -> Unit,
-    onCheckUpdate: () -> Unit
-) {
-
-    ButtonGroup(
-        modifier = Modifier.fillMaxWidth(),
-        overflowIndicator = { menuState ->
-            ButtonGroupDefaults.OverflowIndicator(menuState = menuState)
-        },
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        clickableItem(
-            onClick = { onOpenUrl("https://example.com") },
-            weight = 1f,
-            icon = {
-                Icon(
-                    painter = painterResource(R.drawable.ic_web_outline),
-                    contentDescription = stringResource(R.string.back),
-                    tint = colorScheme.onSurface
-                )
-            },
-            label = ""
-        )
-
-        clickableItem(
-            onClick = { onOpenUrl("https://github.com/HapeLee/legado-with-MD3") },
-            weight = 1f,
-            icon = {
-                Icon(
-                    painter = painterResource(R.drawable.ic_github),
-                    contentDescription = stringResource(R.string.back),
-                    tint = colorScheme.onSurface
-                )
-            },
-            label = ""
-        )
-
-        clickableItem(
-            onClick = { onCheckUpdate() },
-            weight = 1f,
-            icon = {
-                Icon(
-                    painter = painterResource(R.drawable.ic_import),
-                    contentDescription = stringResource(R.string.back),
-                    tint = colorScheme.onSurface
-                )
-            },
-            label = ""
-        )
-    }
-}
-
@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)
@Composable
 fun AboutScreen(
@@ -148,19 +92,23 @@ fun AboutScreen(
        Column(
            modifier = Modifier
                .padding(padding)
-                .padding(16.dp)
+                .padding(horizontal = 16.dp)
                .verticalScroll(rememberScrollState())
        ) {
            Image(
                painter = painterResource(R.drawable.ic_launcher_foreground),
-                contentDescription = "",
+                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
-                    .fillMaxWidth()
-                    .wrapContentWidth(Alignment.CenterHorizontally)
+                    .height(120.dp)
+                    .width(160.dp)
+                    .align(Alignment.CenterHorizontally)
            )
            Text(
-                text = stringResource(R.string.app_name), style = MaterialTheme.typography.bodyLarge,
+                text = stringResource(R.string.app_name),
+                style = MaterialTheme.typography.bodyLarge,
+                fontSize = 18.sp,
+                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentWidth(Alignment.CenterHorizontally))
@@ -172,12 +120,15 @@ fun AboutScreen(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentWidth(Alignment.CenterHorizontally)
-            )
+                    .padding(vertical = 4.dp))
            Text(
-                text = stringResource(R.string.about_description), style = MaterialTheme.typography.bodyLarge,
+                text = stringResource(R.string.about_description),
+                style = MaterialTheme.typography.bodyLarge,
+                fontSize = 12.sp,
                modifier = Modifier
                    .fillMaxWidth()
-                    .wrapContentWidth(Alignment.CenterHorizontally))
+                    .wrapContentWidth(Alignment.CenterHorizontally)
+                    .padding(bottom = 4.dp))
            Row (modifier = Modifier
                .fillMaxWidth(),
                horizontalArrangement = Arrangement.Center){
@@ -204,51 +155,58 @@ fun AboutScreen(
            }

            SplicedColumnGroup(
-                title = stringResource(R.string.about),
+                title = "",
                content = listOf(
                    {
                        SettingItem(
                            modifier = Modifier.background(colorScheme.surfaceBright),
                            title = stringResource(R.string.contributors),
-                            description = "",
+                            description = null,
+                            option = null,
                            onClick = {
                                onOpenUrl("https://github.com/gedoor/legado/graphs/contributors")
                            }
                        )
                        SettingItem(
                            title = stringResource(R.string.privacy_policy),
-                            description = "",
+                            description = null,
+                            option = null,
                            onClick = {
                                onShowMdFile("隐私政策", "privacyPolicy.md")
                            }
                        )
                        SettingItem(
                            title = stringResource(R.string.license),
-                            description = "",
+                            description = null,
+                            option = null,
                            onClick = {
                                onShowMdFile("许可证", "LICENSE.md")
                            }
                        )
                        SettingItem(
                            title = stringResource(R.string.disclaimer),
-                            description = "",
+                            description = null,
+                            option = null,
                            onClick = {
                                onShowMdFile("免责声明", "disclaimer.md")
                            }
                        )
                        SettingItem(
                            title = stringResource(R.string.crash_log),
-                            description = "",
+                            description = null,
+                            option = null,
                            onClick = onShowCrashLogs
                        )
                        SettingItem(
                            title = stringResource(R.string.save_log),
-                            description = "",
+                            description = null,
+                            option = null,
                            onClick = onSaveLog
                        )
                        SettingItem(
                            title = stringResource(R.string.create_heap_dump),
-                            description = "",
+                            description = null,
+                            option = null,
                            onClick = onCreateHeapDump
                        )
                    }
@@ -7,11 +7,16 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ChevronRight
+import androidx.compose.material.icons.filled.Info
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.MaterialTheme.colorScheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -19,19 +24,82 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.legado.app.base.AppTypography

+@Preview(showBackground = true)
+@Composable
+fun PreviewSettingItemList() {
+    MaterialTheme {
+        Column(modifier = Modifier.padding(16.dp)) {
+
+            SettingItem(
+                title = "Only Title",
+                description = null,
+                option = null,
+                onClick = {}
+            )
+
+            SettingItem(
+                title = "Title + Description",
+                description = "This is a description",
+                option = null,
+                onClick = {}
+            )
+
+            SettingItem(
+                title = "Title + Option",
+                description = null,
+                option = "Dynamic option text",
+                onClick = {}
+            )
+
+            SettingItem(
+                title = "Title + Desc + Option",
+                description = "Description content here",
+                option = "Animated changing string",
+                onClick = {}
+            )
+
+            SettingItem(
+                imageVector = Icons.Default.Info,
+                title = "With Icon",
+                description = "Description",
+                option = "Option",
+                onClick = {}
+            )
+
+            SettingItem(
+                title = "With Trailing",
+                description = "Trailing icon on the right",
+                option = null,
+                trailingContent = {
+                    Icon(
+                        imageVector = Icons.Default.ChevronRight,
+                        contentDescription = null
+                    )
+                },
+                onClick = {}
+            )
+
+        }
+    }
+}
+
@Composable
 fun SettingItem(
    modifier: Modifier = Modifier,
    painter: Painter? = null,
+    imageVector: ImageVector? = null,
    title: String,
    option: String? = null,
-    trailingContent: (@Composable () -> Unit)? = null,
-    description: String,
+    trailingContent: @Composable (() -> Unit)? = null,
+    description: String? = null,
    onClick: () -> Unit
 ) {
    Row(
@@ -41,9 +109,11 @@ fun SettingItem(
            .fillMaxWidth()
            .clickable { onClick() }
            .padding(horizontal = 8.dp)
-            .padding(vertical = 12.dp),
+            .padding(vertical = 12.dp)
+            .heightIn(min = 56.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
+
        painter?.let {
            Icon(
                modifier = Modifier.padding(end = 8.dp).size(24.dp),
@@ -53,23 +123,42 @@ fun SettingItem(
            )
        }

+        imageVector?.let {
+            Icon(
+                imageVector = it,
+                contentDescription = null,
+                modifier = Modifier
+                    .padding(end = 8.dp)
+                    .size(24.dp),
+                tint = colorScheme.onSurfaceVariant
+            )
+        }
+
        Column(
            modifier = Modifier.weight(1f),
-            verticalArrangement = Arrangement.spacedBy(3.dp)
+            verticalArrangement = if (description == null)
+                Arrangement.Center
+            else
+                Arrangement.spacedBy(3.dp)
        ) {
+
            Text(
                text = title,
                color = colorScheme.onSurface,
                style = AppTypography.titleMedium,
                fontWeight = FontWeight.Normal
            )
-            Text(
-                text = description,
-                color = colorScheme.onSurfaceVariant,
-                style = AppTypography.labelMedium
-            )
+
+            description?.let {
+                Text(
+                    text = it,
+                    color = colorScheme.onSurfaceVariant,
+                    style = AppTypography.labelMedium
+                )
+            }
+
            option?.let {
-                AnimatedText(
+                AnimatedTextLine(
                    text = it,
                    style = AppTypography.labelMedium,
                    color = colorScheme.primary,
@@ -81,7 +170,7 @@ fun SettingItem(

        trailingContent?.let { composable ->
            Box(
-                modifier = Modifier.fillMaxHeight()
+                modifier = Modifier
                    .width(55.dp),
                contentAlignment = Alignment.Center
            ) {
@@ -89,4 +178,4 @@ fun SettingItem(
            }
        }
    }
-}
+}