feat(ui): 优化 FAB 文字的显示效果

This commit is contained in:
Super12138 2025-02-07 09:39:11 +08:00
parent 6a4790095c
commit 80a6208caf
4 changed files with 29 additions and 43 deletions

View file

@ -8,12 +8,16 @@ import androidx.compose.foundation.layout.width
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.FloatingActionButtonElevation
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.contentColorFor
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import cn.super12138.todo.utils.VibrationUtils
@ -22,16 +26,21 @@ import cn.super12138.todo.utils.VibrationUtils
* * 内置组件的动画总是卡一下
*
* 将缩放部分转为最简单的`AnimatedVisibility`实现
* @param text FAB 的文本
* @param icon FAB 的前置图标
* @param text FAB 的文本
* @param textOverflow FAB 文本溢出显示方案
* @param expanded 是否为展开状态
* @param containerColor FAB 容器的颜色
* @param contentColor FAB 文本和图标颜色通常不需要自己指定会自动依据容器颜色设置
* @param elevation FAB 的高度阴影大小
* @param onClick 点击 FAB 后的回调
* @param modifier `Modifier` 修改器
*/
@Composable
fun AnimatedExtendedFloatingActionButton(
icon: @Composable () -> Unit,
text: @Composable () -> Unit,
icon: ImageVector,
text: String,
textOverflow: TextOverflow = TextOverflow.Clip,
expanded: Boolean,
containerColor: Color = FloatingActionButtonDefaults.containerColor,
contentColor: Color = contentColorFor(containerColor),
@ -54,12 +63,19 @@ fun AnimatedExtendedFloatingActionButton(
modifier = Modifier.padding(horizontal = 16.dp),
verticalAlignment = Alignment.CenterVertically
) {
icon()
Icon(
imageVector = icon,
contentDescription = null
)
// Spacer(Modifier.width(if (expanded) 8.dp else 0.dp))
AnimatedVisibility(expanded) {
Row {
Spacer(Modifier.width(8.dp))
text()
Text(
text = text,
maxLines = 1,
overflow = textOverflow
)
}
}
}

View file

@ -67,17 +67,8 @@ fun CrashPage(
floatingActionButton = {
AnimatedExtendedFloatingActionButton(
onClick = exitApp,
icon = {
Icon(
imageVector = Icons.AutoMirrored.Outlined.ExitToApp,
contentDescription = stringResource(R.string.action_exit_app)
)
},
text = {
Text(
text = stringResource(R.string.action_exit_app)
)
},
icon = Icons.AutoMirrored.Outlined.ExitToApp,
text = stringResource(R.string.action_exit_app),
expanded = isExpanded
)
},

View file

@ -107,26 +107,16 @@ fun TodoEditorPage(
Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
if (toDo !== null) {
AnimatedExtendedFloatingActionButton(
icon = {
Icon(
imageVector = Icons.Outlined.Delete,
contentDescription = null
)
},
text = { Text(stringResource(R.string.action_delete)) },
icon = Icons.Outlined.Delete,
text = stringResource(R.string.action_delete),
expanded = true,
containerColor = MaterialTheme.colorScheme.errorContainer,
onClick = { showDeleteConfirmDialog = true }
)
}
AnimatedExtendedFloatingActionButton(
icon = {
Icon(
imageVector = Icons.Outlined.Save,
contentDescription = null
)
},
text = { Text(stringResource(R.string.action_save)) },
icon = Icons.Outlined.Save,
text = stringResource(R.string.action_save),
expanded = true,
onClick = {
if (toDoContent.trim().isEmpty()) {

View file

@ -27,19 +27,8 @@ fun TodoFAB(
modifier: Modifier = Modifier
) {
AnimatedExtendedFloatingActionButton(
icon = {
Icon(
imageVector = Icons.Outlined.Add,
contentDescription = stringResource(R.string.action_add_task)
)
},
text = {
Text(
text = stringResource(R.string.action_add_task),
maxLines = 1,
overflow = TextOverflow.Clip
)
},
icon = Icons.Outlined.Add,
text = stringResource(R.string.action_add_task),
expanded = expanded,
elevation = elevation,
onClick = onClick,