From 2964178fbdd4434ac391254b7754d34810b510d7 Mon Sep 17 00:00:00 2001 From: Super12138 <70494801+Super12138@users.noreply.github.com> Date: Mon, 13 Jan 2025 20:39:01 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BB=84=E4=BB=B6=E5=8C=96?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BE=85=E5=8A=9E=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{pages/main => }/components/ChipGroup.kt | 2 +- .../ui/components/FloatingActionButton.kt | 48 +++++++++++++++++++ .../super12138/todo/ui/pages/main/MainPage.kt | 27 ++--------- .../todo/ui/pages/main/TodoBottomSheet.kt | 2 +- .../todo/ui/pages/main/components/TodoFAB.kt | 39 +++++++++++++++ 5 files changed, 93 insertions(+), 25 deletions(-) rename app/src/main/kotlin/cn/super12138/todo/ui/{pages/main => }/components/ChipGroup.kt (97%) create mode 100644 app/src/main/kotlin/cn/super12138/todo/ui/components/FloatingActionButton.kt create mode 100644 app/src/main/kotlin/cn/super12138/todo/ui/pages/main/components/TodoFAB.kt diff --git a/app/src/main/kotlin/cn/super12138/todo/ui/pages/main/components/ChipGroup.kt b/app/src/main/kotlin/cn/super12138/todo/ui/components/ChipGroup.kt similarity index 97% rename from app/src/main/kotlin/cn/super12138/todo/ui/pages/main/components/ChipGroup.kt rename to app/src/main/kotlin/cn/super12138/todo/ui/components/ChipGroup.kt index 4bd22e4..e4ff340 100644 --- a/app/src/main/kotlin/cn/super12138/todo/ui/pages/main/components/ChipGroup.kt +++ b/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 diff --git a/app/src/main/kotlin/cn/super12138/todo/ui/components/FloatingActionButton.kt b/app/src/main/kotlin/cn/super12138/todo/ui/components/FloatingActionButton.kt new file mode 100644 index 0000000..3f5683b --- /dev/null +++ b/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() + } + } + } +} \ No newline at end of file diff --git a/app/src/main/kotlin/cn/super12138/todo/ui/pages/main/MainPage.kt b/app/src/main/kotlin/cn/super12138/todo/ui/pages/main/MainPage.kt index 639a108..4b07c83 100644 --- a/app/src/main/kotlin/cn/super12138/todo/ui/pages/main/MainPage.kt +++ b/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 -> diff --git a/app/src/main/kotlin/cn/super12138/todo/ui/pages/main/TodoBottomSheet.kt b/app/src/main/kotlin/cn/super12138/todo/ui/pages/main/TodoBottomSheet.kt index 87a66f4..36f018d 100644 --- a/app/src/main/kotlin/cn/super12138/todo/ui/pages/main/TodoBottomSheet.kt +++ b/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 diff --git a/app/src/main/kotlin/cn/super12138/todo/ui/pages/main/components/TodoFAB.kt b/app/src/main/kotlin/cn/super12138/todo/ui/pages/main/components/TodoFAB.kt new file mode 100644 index 0000000..1fb8dd8 --- /dev/null +++ b/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 + ) +} \ No newline at end of file