feat(ui): 优化 FAB 文字的显示效果
This commit is contained in:
parent
6a4790095c
commit
80a6208caf
4 changed files with 29 additions and 43 deletions
|
|
@ -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
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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()) {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue