danvics/VerveDo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: 组件化添加待办按钮

Browse source
This commit is contained in:
Super12138 2025-01-13 20:39:01 +08:00
parent 6553c4afd9
commit 2964178fbd
5 changed files with 93 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/src/main/kotlin/cn/super12138/todo/ui/pages/main/components/ChipGroup.kt → app/src/main/kotlin/cn/super12138/todo/ui/components/ChipGroup.kt
View file

@ -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

48
app/src/main/kotlin/cn/super12138/todo/ui/components/FloatingActionButton.kt Normal file
View file

@ -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()
}
}
}
}

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

@ -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 ->

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

@ -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

39
app/src/main/kotlin/cn/super12138/todo/ui/pages/main/components/TodoFAB.kt Normal file
View file

@ -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
)
}