refactor: 组件化添加待办按钮

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

@@ -1,4 +1,4 @@
-package cn.super12138.todo.ui.pages.main.components
+package cn.super12138.todo.ui.components
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.layout.ExperimentalLayoutApi

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

@@ -0,0 +1,48 @@
+package cn.super12138.todo.ui.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+/**
+ * 带动画且比 Material 3 内置组件动画好看的的可扩展 FAB
+ * * （内置组件的动画总是卡一下。。。）
+ *
+ * 将缩放部分转为最简单的`AnimatedVisibility`实现
+ * @param text FAB 的文本
+ * @param icon FAB 的前置图标
+ * @param expanded 是否为展开状态
+ * @param onClick 点击 FAB 后的回调
+ * @param modifier `Modifier` 修改器
+ */
+@Composable
+fun AnimatedExtendedFloatingActionButton(
+    icon: @Composable () -> Unit,
+    text: @Composable () -> Unit,
+    expanded: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    FloatingActionButton(
+        onClick = onClick,
+        modifier = modifier
+    ) {
+        Row(
+            modifier = Modifier.padding(horizontal = 16.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            icon()
+            AnimatedVisibility(expanded) {
+                Spacer(Modifier.width(8.dp))
+                text()
+            }
+        }
+    }
+}

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

@@ -1,17 +1,14 @@
 package cn.super12138.todo.ui.pages.main
 
 import android.content.res.Configuration
-import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Add
 import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Scaffold
@@ -27,14 +24,13 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
 import cn.super12138.todo.R
 import cn.super12138.todo.logic.database.TodoEntity
 import cn.super12138.todo.logic.model.Orientation
+import cn.super12138.todo.ui.pages.main.components.TodoFAB
 import cn.super12138.todo.ui.viewmodels.MainViewModel
 import kotlinx.coroutines.launch
 
@@ -81,27 +77,12 @@ fun MainPage(viewModel: MainViewModel, modifier: Modifier = Modifier) {
             )
         },
         floatingActionButton = {
-            FloatingActionButton(
+            TodoFAB(
+                expanded = isExpanded,
                 onClick = {
                     openBottomSheet = true
                 }
-            ) {
+            )
-                Row(
-                    modifier = Modifier.padding(horizontal = 16.dp),
-                    verticalAlignment = Alignment.CenterVertically
-                ) {
-                    Icon(
-                        imageVector = Icons.Outlined.Add,
-                        contentDescription = stringResource(R.string.action_add_task)
-                    )
-                    AnimatedVisibility(isExpanded) {
-                        Text(
-                            text = stringResource(R.string.action_add_task),
-                            modifier = Modifier.padding(start = 8.dp)
-                        )
-                    }
-                }
-            }
         },
         modifier = modifier
     ) { innerPadding ->

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

@@ -33,7 +33,7 @@ import androidx.compose.ui.unit.dp
 import cn.super12138.todo.R
 import cn.super12138.todo.logic.database.TodoEntity
 import cn.super12138.todo.logic.model.Subjects
-import cn.super12138.todo.ui.pages.main.components.FilterChipGroup
+import cn.super12138.todo.ui.components.FilterChipGroup
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable

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

@@ -0,0 +1,39 @@
+package cn.super12138.todo.ui.pages.main.components
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Add
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import cn.super12138.todo.R
+import cn.super12138.todo.ui.components.AnimatedExtendedFloatingActionButton
+
+/**
+ * 待办页面底部 FAB
+ *
+ * @param expanded 是否为展开状态（展开状态显示内容和图标，收起状态只显示图标）
+ * @param onClick 当点击 FAB 时的回调
+ */
+@Composable
+fun TodoFAB(
+    expanded: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    AnimatedExtendedFloatingActionButton(
+        icon = {
+            Icon(
+                imageVector = Icons.Outlined.Add,
+                contentDescription = stringResource(R.string.action_add_task)
+            )
+        },
+        text = {
+            Text(stringResource(R.string.action_add_task))
+        },
+        expanded = expanded,
+        onClick = onClick,
+        modifier = modifier
+    )
+}