ec8a04c80a
D.3.2 三态保存指示器: - 未保存 (灰色) → 保存中 (琥珀色脉冲点) → 已保存 (绿色点) - _PulsingDot 动画组件，800ms 呼吸效果 - 点击'完成'时显示保存中状态 D.3.3 工具栏触摸目标: - BoxConstraints 36x36 → 44x44，符合 WCAG 标准 D.3.4 主题偏好持久化: - SettingsBloc 接受 SharedPreferences，保存/恢复 themeMode - NuanjiApp 改为 StatefulWidget，异步初始化 SharedPreferences - 启动时显示 loading，初始化完成后渲染 app
104 lines
3.3 KiB
Dart
104 lines
3.3 KiB
Dart
// 编辑器工具栏 — 底部单行 6 按钮面板
|
||
//
|
||
// 精简布局：
|
||
// - 单行 6 个工具按钮（贴纸/模板/画笔/照片/文字/更多）
|
||
// - 高度 72px + 底部安全区
|
||
// - 每个按钮：Column(icon 20px + label 10px)，最小 36x36
|
||
//
|
||
// 详细选项已移至独立面板：
|
||
// - 画笔选项 → BrushPanel（底部抽屉）
|
||
// - 撤销/重做 → 顶栏
|
||
// - 清除 → 顶栏
|
||
//
|
||
// 设计规范：触摸目标 ≥ 44px，圆角 22px (pill)
|
||
|
||
import 'package:flutter/material.dart';
|
||
|
||
import '../bloc/editor_bloc.dart';
|
||
|
||
/// 编辑器工具栏 — 精简版
|
||
class EditorToolbar extends StatelessWidget {
|
||
final EditorState state;
|
||
final ValueChanged<EditorEvent> onEvent;
|
||
|
||
const EditorToolbar({
|
||
super.key,
|
||
required this.state,
|
||
required this.onEvent,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final colorScheme = Theme.of(context).colorScheme;
|
||
return Container(
|
||
height: 72 + MediaQuery.of(context).padding.bottom,
|
||
decoration: BoxDecoration(
|
||
color: colorScheme.surface,
|
||
border: Border(
|
||
top: BorderSide(
|
||
color: colorScheme.outlineVariant.withValues(alpha: 0.3),
|
||
),
|
||
),
|
||
),
|
||
child: Padding(
|
||
padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||
children: [
|
||
_toolBtn(context, EditorTool.sticker, Icons.emoji_emotions_rounded, '贴纸'),
|
||
_toolBtn(context, EditorTool.template, Icons.dashboard_customize_rounded, '模板'),
|
||
_toolBtn(context, EditorTool.brush, Icons.gesture_rounded, '画笔'),
|
||
_toolBtn(context, EditorTool.photo, Icons.add_photo_alternate_rounded, '照片'),
|
||
_toolBtn(context, EditorTool.text, Icons.text_fields_rounded, '文字'),
|
||
_toolBtn(context, EditorTool.more, Icons.more_horiz_rounded, '更多'),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 工具按钮 — icon + label 垂直排列
|
||
Widget _toolBtn(
|
||
BuildContext context,
|
||
EditorTool tool,
|
||
IconData icon,
|
||
String label,
|
||
) {
|
||
final isActive = state.activeTool == tool;
|
||
final colorScheme = Theme.of(context).colorScheme;
|
||
|
||
return GestureDetector(
|
||
onTap: () => onEvent(isActive ? ToolReactivated(tool) : ToolChanged(tool)),
|
||
behavior: HitTestBehavior.opaque,
|
||
child: Container(
|
||
constraints: const BoxConstraints(minWidth: 44, minHeight: 44),
|
||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Icon(
|
||
icon,
|
||
size: 20,
|
||
color: isActive
|
||
? colorScheme.primary
|
||
: colorScheme.onSurface.withValues(alpha: 0.5),
|
||
),
|
||
const SizedBox(height: 2),
|
||
Text(
|
||
label,
|
||
style: TextStyle(
|
||
fontSize: 10,
|
||
color: isActive
|
||
? colorScheme.primary
|
||
: colorScheme.onSurface.withValues(alpha: 0.5),
|
||
fontWeight: isActive ? FontWeight.w600 : FontWeight.normal,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|