refactor: 优化顶部应用栏动画速率 & 重构待办卡片样式

app/build.gradle.kts

@@ -38,7 +38,7 @@ android {
         applicationId = "cn.super12138.todo"
         minSdk = 24
         targetSdk = 36
-        versionCode = 986
+        versionCode = 987
         versionName = "2.3.3"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"

app/src/main/kotlin/cn/super12138/todo/ui/TodoDefaults.kt

@@ -47,14 +47,17 @@ object TodoDefaults {
             bottomEnd = ZeroCornerSize
         )*/
 
-    val ContainerColor: Color
+    object Colors {
-        @Composable
+        val Container: Color
-        get() = MaterialTheme.colorScheme.surfaceBright
+            @Composable
+            get() = MaterialTheme.colorScheme.surfaceBright
 
-    val BackgroundColor: Color
+        val Background: Color
-        @Composable
+            @Composable
-        get() = MaterialTheme.colorScheme.surfaceContainer
+            get() = MaterialTheme.colorScheme.surfaceContainer
 
+        val Green = Color(0xFF349938)
+    }
 
     val fadedEdgeWidth = 8.dp
 

app/src/main/kotlin/cn/super12138/todo/ui/activities/MainActivity.kt

@@ -106,7 +106,7 @@ class MainActivity : ComponentActivity() {
                 dynamicColor = dynamicColor
             ) {
                 Surface(
-                    color = TodoDefaults.BackgroundColor,
+                    color = TodoDefaults.Colors.Background,
                     modifier = Modifier.fillMaxSize()
                 ) {
                     val view = LocalView.current
@@ -140,7 +140,7 @@ class MainActivity : ComponentActivity() {
                                 )
                             }
                         },
-                        containerColor = TodoDefaults.BackgroundColor,
+                        containerColor = TodoDefaults.Colors.Background,
                         modifier = Modifier.fillMaxSize()
                     ) {
                         TopNavigation(

app/src/main/kotlin/cn/super12138/todo/ui/components/Scaffolds.kt

@@ -130,7 +130,7 @@ fun TopAppBarScaffold(
                 navigationIcon = navigationIcon,
                 actions = actions,
                 colors = TopAppBarDefaults.topAppBarColors(
-                    containerColor = TodoDefaults.BackgroundColor,
+                    containerColor = TodoDefaults.Colors.Background,
                 )
             )
         },
@@ -151,7 +151,7 @@ fun TopAppBarScaffold(
     floatingActionButton: @Composable () -> Unit = {},
     floatingActionButtonPosition: FabPosition = FabPosition.End,
     contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
-    containerColor: Color = TodoDefaults.BackgroundColor,
+    containerColor: Color = TodoDefaults.Colors.Background,
     screenShape: Shape = TodoDefaults.ScreenContainerShape,
     content: @Composable () -> Unit
 ) = Scaffold(

app/src/main/kotlin/cn/super12138/todo/ui/components/ScreenContainer.kt

@@ -16,7 +16,7 @@ fun RoundedScreenContainer(
 ) {
     Surface(
         modifier = modifier.padding(horizontal = TodoDefaults.screenHorizontalPadding),
-        color = TodoDefaults.BackgroundColor,
+        color = TodoDefaults.Colors.Background,
         shape = TodoDefaults.ScreenContainerShape,
         content = content
     )

app/src/main/kotlin/cn/super12138/todo/ui/pages/overview/components/StatusCard.kt

@@ -41,7 +41,7 @@ fun RoundedCornerCardLarge(
     @DrawableRes iconRes: Int,
     title: String,
     count: Int,
-    containerColor: Color = TodoDefaults.ContainerColor,
+    containerColor: Color = TodoDefaults.Colors.Container,
     shapes: ButtonShapes = TodoDefaults.shapes(),
     onClick: () -> Unit = {}
 ) {

app/src/main/kotlin/cn/super12138/todo/ui/pages/overview/components/UpcomingTaskCard.kt

@@ -36,7 +36,7 @@ import cn.super12138.todo.utils.toRelativeTimeString
 fun UpcomingTaskCard(
     modifier: Modifier = Modifier,
     nextWeekTodo: List<TodoEntity>,
-    containerColor: Color = TodoDefaults.ContainerColor
+    containerColor: Color = TodoDefaults.Colors.Container
 ) {
     Card(
         modifier = modifier.height(TodoDefaults.overviewCardHeight * 2),

app/src/main/kotlin/cn/super12138/todo/ui/pages/settings/components/RowSettingsItem.kt

@@ -37,12 +37,12 @@ fun RowSettingsItem(
     title: String,
     description: String? = null,
     trailingContent: (@Composable () -> Unit)? = null,
-    background: Color = TodoDefaults.ContainerColor,
+    background: Color = TodoDefaults.Colors.Container,
     horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
     verticalAlignment: Alignment.Vertical = Alignment.Top,
     scrollState: ScrollState = rememberScrollState(),
     fadedEdgeWidth: Dp,
-    maskColor: Color = TodoDefaults.ContainerColor,
+    maskColor: Color = TodoDefaults.Colors.Container,
     content: @Composable RowScope.() -> Unit
 ) {
     MoreContentSettingsItem(
@@ -88,11 +88,11 @@ fun LazyRowSettingsItem(
     title: String,
     description: String? = null,
     trailingContent: (@Composable () -> Unit)? = null,
-    background: Color = TodoDefaults.ContainerColor,
+    background: Color = TodoDefaults.Colors.Container,
     horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
     verticalAlignment: Alignment.Vertical = Alignment.Top,
     fadedEdgeWidth: Dp,
-    maskColor: Color = TodoDefaults.ContainerColor,
+    maskColor: Color = TodoDefaults.Colors.Container,
     content: LazyListScope.() -> Unit
 ) {
     MoreContentSettingsItem(
@@ -137,7 +137,7 @@ fun MoreContentSettingsItem(
     title: String,
     description: String? = null,
     trailingContent: (@Composable () -> Unit)? = null,
-    background: Color = TodoDefaults.ContainerColor,
+    background: Color = TodoDefaults.Colors.Container,
     shape: CornerBasedShape = TodoDefaults.defaultShape,
     content: @Composable () -> Unit
 ) {

app/src/main/kotlin/cn/super12138/todo/ui/pages/settings/components/SettingsItem.kt

@@ -61,7 +61,7 @@ fun SettingsItem(
     title: String,
     description: String? = null,
     trailingContent: (@Composable () -> Unit)? = null,
-    background: Color = TodoDefaults.ContainerColor,
+    background: Color = TodoDefaults.Colors.Container,
     shapes: ButtonShapes = TodoDefaults.shapes(),
     enableClick: Boolean = true,
     onClick: () -> Unit = {}
@@ -125,7 +125,7 @@ fun SettingsItem(
     title: String,
     description: String? = null,
     trailingContent: (@Composable () -> Unit)? = null,
-    background: Color = TodoDefaults.ContainerColor,
+    background: Color = TodoDefaults.Colors.Container,
     shapes: ButtonShapes = TodoDefaults.shapes(),
     enableClick: Boolean = true,
     onClick: () -> Unit = {}
@@ -159,7 +159,7 @@ fun SettingsItem(
     title: String,
     description: String? = null,
     trailingContent: (@Composable () -> Unit)? = null,
-    background: Color = TodoDefaults.ContainerColor,
+    background: Color = TodoDefaults.Colors.Container,
     shapes: ButtonShapes = TodoDefaults.shapes(),
     enableClick: Boolean = true,
     onClick: () -> Unit = {},
@@ -204,7 +204,7 @@ fun SettingsItem(
     headlineContent: (@Composable () -> Unit)? = null,
     supportingContent: (@Composable () -> Unit)? = null,
     trailingContent: (@Composable () -> Unit)? = null,
-    background: Color = TodoDefaults.ContainerColor,
+    background: Color = TodoDefaults.Colors.Container,
     shapes: ButtonShapes = TodoDefaults.shapes(),
     interactionSource: MutableInteractionSource? = null,
     enableClick: Boolean = true,

app/src/main/kotlin/cn/super12138/todo/ui/pages/tasks/TasksPage.kt

@@ -126,6 +126,7 @@ fun SharedTransitionScope.TasksPage(
                         content = task.content,
                         category = task.category,
                         completed = task.isCompleted,
+                        dueDate = task.dueDate,
                         priority = Priority.fromFloat(task.priority),
                         selected = selectedTodoIds.contains(task.id),
                         onCardClick = {

app/src/main/kotlin/cn/super12138/todo/ui/pages/tasks/components/TodoCard.kt

@@ -7,6 +7,7 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkHorizontally
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsPressedAsState
@@ -14,6 +15,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -24,7 +26,6 @@ import androidx.compose.material3.ButtonShapes
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -37,9 +38,12 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import cn.super12138.todo.R
@@ -50,6 +54,8 @@ import cn.super12138.todo.utils.VibrationUtils
 import cn.super12138.todo.utils.containerColor
 import cn.super12138.todo.utils.disabledContainerColor
 import cn.super12138.todo.utils.disabledContentColor
+import cn.super12138.todo.utils.toLocalDateString
+import cn.super12138.todo.utils.toRelativeTimeString
 
 @OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
@@ -59,6 +65,7 @@ fun TodoCard(
     content: String,
     category: String,
     completed: Boolean,
+    dueDate: Long?,
     priority: Priority,
     selected: Boolean,
     onCardClick: () -> Unit = {},
@@ -67,8 +74,9 @@ fun TodoCard(
     shapes: ButtonShapes = TodoDefaults.shapes(),
 ) {
     val view = LocalView.current
+    val context = LocalContext.current
     // TODO: 滑动删除
-    val cardColors = CardDefaults.cardColors(containerColor = TodoDefaults.ContainerColor)
+    val cardColors = CardDefaults.cardColors(containerColor = TodoDefaults.Colors.Container)
     val animatedContainerColor by animateColorAsState(targetValue = if (selected) MaterialTheme.colorScheme.secondaryContainer else if (completed) cardColors.disabledContainerColor else cardColors.containerColor)
 
     val interactionSource = remember { MutableInteractionSource() }
@@ -79,6 +87,13 @@ fun TodoCard(
         animationSpec = TodoDefaults.shapesDefaultAnimationSpec
     )
 
+    val enterTransition = fadeIn(MaterialTheme.motionScheme.fastSpatialSpec()) + expandHorizontally(
+        MaterialTheme.motionScheme.fastSpatialSpec()
+    )
+    val exitTransition = fadeOut(MaterialTheme.motionScheme.fastSpatialSpec()) + shrinkHorizontally(
+        MaterialTheme.motionScheme.fastSpatialSpec()
+    )
+
     Row(
         verticalAlignment = Alignment.CenterVertically,
         modifier = modifier
@@ -98,16 +113,12 @@ fun TodoCard(
             .drawBehind {
                 drawRect(animatedContainerColor)
             }
-            .padding(horizontal = TodoDefaults.screenHorizontalPadding)
+            .padding(start = TodoDefaults.screenHorizontalPadding)
     ) {
         AnimatedVisibility(
             visible = selected,
-            enter = fadeIn(MaterialTheme.motionScheme.fastSpatialSpec()) + expandHorizontally(
+            enter = enterTransition,
-                MaterialTheme.motionScheme.fastSpatialSpec()
+            exit = exitTransition
-            ),
-            exit = fadeOut(MaterialTheme.motionScheme.fastSpatialSpec()) + shrinkHorizontally(
-                MaterialTheme.motionScheme.fastSpatialSpec()
-            )
         ) {
             Box(
                 Modifier
@@ -125,10 +136,7 @@ fun TodoCard(
         }
 
         Column(
-            verticalArrangement = Arrangement.spacedBy(
+            verticalArrangement = Arrangement.Center,
-                space = 5.dp,
-                alignment = Alignment.CenterVertically
-            ),
             modifier = Modifier
                 .weight(1f)
                 .fillMaxSize()
@@ -136,13 +144,42 @@ fun TodoCard(
             CompositionLocalProvider(
                 LocalContentColor provides if (completed) cardColors.disabledContentColor else cardColors.contentColor,
             ) {
-                Text(
+                Row(
-                    text = content,
+                    verticalAlignment = Alignment.Top,
-                    style = MaterialTheme.typography.titleLarge,
+                    horizontalArrangement = Arrangement.SpaceBetween,
-                    maxLines = 1,
+                    modifier = Modifier.fillMaxWidth()
-                    overflow = TextOverflow.Ellipsis,
+                ) {
-                    // modifier = Modifier.basicMarquee()
+                    Text(
-                )
+                        text = content,
+                        style = MaterialTheme.typography.titleLarge,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier.weight(1f)
+                    )
+
+                    Column(
+                        horizontalAlignment = Alignment.End,
+                        modifier = Modifier.padding(
+                            start = TodoDefaults.screenVerticalPadding,
+                            end = TodoDefaults.screenHorizontalPadding
+                        )
+                    ) {
+                        Text(
+                            text = dueDate.toLocalDateString(),
+                            style = MaterialTheme.typography.labelLarge.copy(
+                                color = MaterialTheme.colorScheme.onSurface,
+                                fontWeight = FontWeight.Bold
+                            )
+                        )
+
+                        Text(
+                            text = dueDate.toRelativeTimeString(context),
+                            style = MaterialTheme.typography.labelSmall.copy(
+                                color = MaterialTheme.colorScheme.onSurfaceVariant
+                            )
+                        )
+                    }
+                }
 
                 Row(
                     verticalAlignment = Alignment.CenterVertically,
@@ -166,35 +203,28 @@ fun TodoCard(
             }
         }
 
-        AnimatedVisibility(!selected && !completed) {
+        AnimatedVisibility(
-            IconButton(
+            visible = !selected && !completed,
-                onClick = {
+            enter = enterTransition,
-                    VibrationUtils.performHapticFeedback(view)
+            exit = exitTransition
-                    onChecked()
+        ) {
-                }
+            Box(
-            ) {
-                Icon(
-                    painter = painterResource(R.drawable.ic_check),
-                    tint = MaterialTheme.colorScheme.primary,
-                    contentDescription = stringResource(R.string.tip_mark_completed)
-                )
-            }
-            /*Box(
                 contentAlignment = Alignment.Center,
                 modifier = Modifier
-                    .width(50.dp)
                     .fillMaxHeight()
-                    .background(MaterialTheme.colorScheme.tertiaryContainer)
+                    .background(TodoDefaults.Colors.Green)
                     .clickable {
+                        VibrationUtils.performHapticFeedback(view)
                         onChecked()
                     }
             ) {
                 Icon(
-                    imageVector = Icons.Outlined.Check,
+                    painter = painterResource(R.drawable.ic_check),
-                    tint = MaterialTheme.colorScheme.primary,
+                    tint = Color.White,
-                    contentDescription = ""
+                    contentDescription = null,
+                    modifier = Modifier.padding(TodoDefaults.screenHorizontalPadding)
                 )
-            }*/
+            }
         }
     }
 }

app/src/main/kotlin/cn/super12138/todo/ui/pages/tasks/components/TodoTopAppBar.kt

@@ -46,23 +46,23 @@ fun TodoTopAppBar(
     modifier: Modifier = Modifier
 ) {
     val navIconEnterTransition = fadeIn(
-        animationSpec = MaterialTheme.motionScheme.defaultEffectsSpec()
+        animationSpec = MaterialTheme.motionScheme.fastEffectsSpec()
     ) + expandIn(
-        animationSpec = MaterialTheme.motionScheme.defaultSpatialSpec(),
+        animationSpec = MaterialTheme.motionScheme.fastSpatialSpec(),
         expandFrom = Alignment.CenterStart
     )
     val navIconExitTransition = fadeOut(
-        animationSpec = MaterialTheme.motionScheme.defaultEffectsSpec()
+        animationSpec = MaterialTheme.motionScheme.fastEffectsSpec()
     ) + shrinkOut(
-        animationSpec = MaterialTheme.motionScheme.defaultSpatialSpec(),
+        animationSpec = MaterialTheme.motionScheme.fastSpatialSpec(),
         shrinkTowards = Alignment.CenterStart
     )
-    val enterTransition = fadeIn(MaterialTheme.motionScheme.defaultEffectsSpec()) +
+    val enterTransition = fadeIn(MaterialTheme.motionScheme.fastEffectsSpec()) +
             scaleIn(
-                animationSpec = MaterialTheme.motionScheme.defaultSpatialSpec(),
+                animationSpec = MaterialTheme.motionScheme.fastSpatialSpec(),
                 initialScale = 0.92f
             )
-    val exitTransition = fadeOut(MaterialTheme.motionScheme.defaultEffectsSpec())
+    val exitTransition = fadeOut(MaterialTheme.motionScheme.fastEffectsSpec())
     val titleTransition = ContentTransform(
         targetContentEnter = enterTransition,
         initialContentExit = exitTransition
@@ -74,7 +74,7 @@ fun TodoTopAppBar(
         targetValue = if (selectedMode) {
             MaterialTheme.colorScheme.surfaceContainerHighest
         } else {
-            TodoDefaults.BackgroundColor
+            TodoDefaults.Colors.Background
         }
     )