linfeng/record-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构录制页面，优化HUD布局，添加头部和底部组件，移除触摸锁定功能，简化事件信息处理。

Browse Source
This commit is contained in:
林锋
2026-06-05 14:02:01 +08:00
parent f6440ea8b7
commit 0d06975313
4 changed files with 328 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
lib/features/recording/pages/page_record.dart
View File

@@ -10,10 +10,11 @@ import 'package:recording_tool/features/recording/platform/recording_platform.da
import 'package:recording_tool/features/recording/utils/recording_display_name.dart';
import 'package:recording_tool/features/recording/view-model/view_model_recording.dart';
import 'package:recording_tool/features/recording/widgets/widget_camera_preview.dart';
import 'package:recording_tool/features/recording/widgets/widget_record_footer.dart';
import 'package:recording_tool/features/recording/widgets/widget_record_header.dart';
import 'package:recording_tool/features/recording/widgets/widget_recording_hud.dart';
import 'package:recording_tool/features/recording/widgets/widget_recording_loading_overlay.dart';
import 'package:recording_tool/features/recording/widgets/widget_recording_saved_dialog.dart';
import 'package:recording_tool/features/recording/widgets/widget_recording_touch_lock_overlay.dart';
import 'package:recording_tool/shared/widgets/widgets.dart';
/// 录制页入口
@@ -198,24 +199,13 @@ class _RecordingPageState extends ConsumerState<RecordingPage> {
},
child: Scaffold(
backgroundColor: Colors.black,
body: Stack(
fit: StackFit.expand,
body: Column(
children: [
const CameraPreviewWidget(),
if (!state.isPreviewReady && state.errorMessage == null)
const RecordingLoadingOverlayWidget(message: '正在启动相机…'),
if (state.isTouchLocked && state.isRecording)
RecordingTouchLockOverlayWidget(
enabled: true,
onUnlocked: () => viewModel.setTouchLocked(false),
),
RecordingHudWidget(
state: state,
RecordHeaderWidget(
hasValidClipboardInfo: showClipboardInfo,
eventTitle: showClipboardInfo ? clipboard.title : null,
eventAddress: showClipboardInfo ? clipboard.address : null,
showClipboardHint: showClipboardInfo,
clipboardAddress: clipboard.address.trim(),
onClearEventInfo: _clearClipboardForNewRound,
isRecording: state.isRecording,
elapsedLabel: state.elapsedLabel,
onPasteEventInfo: () async {
final result = await ref
.read(recordingViewModelProvider.notifier)
@@ -225,11 +215,32 @@ class _RecordingPageState extends ConsumerState<RecordingPage> {
AppToast.show('无赛事信息');
}
},
onClearEventInfo: _clearClipboardForNewRound,
),
Expanded(
child: Stack(
children: [
const CameraPreviewWidget(),
if (!state.isPreviewReady && state.errorMessage == null)
const RecordingLoadingOverlayWidget(message: '正在启动相机…'),
// 这是 触摸锁定 的 覆盖层，现在不使用了
// if (state.isTouchLocked && state.isRecording)
// RecordingTouchLockOverlayWidget(
// enabled: true,
// onUnlocked: () => viewModel.setTouchLocked(false),
// ),
RecordingHudWidget(
state: state,
showClipboardHint: showClipboardInfo,
clipboardAddress: clipboard.address.trim(),
onStart: _onStartRecording,
onStop: () async {
await viewModel.stopRecording();
if (!context.mounted) return;
final latest = ref.read(recordingViewModelProvider).session;
final latest = ref
.read(recordingViewModelProvider)
.session;
if (latest.gallerySaveFailed) {
AppToast.show(latest.errorMessage ?? '保存到相册失败，请开启相册权限');
return;
@@ -253,6 +264,10 @@ class _RecordingPageState extends ConsumerState<RecordingPage> {
],
),
),
const RecordFooter(),
],
),
),
);
}
}

16
lib/features/recording/widgets/widget_record_footer.dart Normal file
View File

@@ -0,0 +1,16 @@
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class RecordFooter extends StatefulWidget {
const RecordFooter({super.key});
@override
State<RecordFooter> createState() => _RecordFooterState();
}
class _RecordFooterState extends State<RecordFooter> {
@override
Widget build(BuildContext context) {
return SizedBox(height: 65.r, width: double.infinity);
}
}

169
lib/features/recording/widgets/widget_record_header.dart Normal file
View File

@@ -0,0 +1,169 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:recording_tool/gen/assets.gen.dart';
import 'package:recording_tool/shared/widgets/app_toast.dart';
/// 录制页顶部：Logo、粘贴赛事、赛事标题
class RecordHeaderWidget extends StatelessWidget {
const RecordHeaderWidget({
super.key,
required this.hasValidClipboardInfo,
this.eventTitle,
required this.isRecording,
required this.elapsedLabel,
required this.onPasteEventInfo,
required this.onClearEventInfo,
});
final bool hasValidClipboardInfo;
final String? eventTitle;
final bool isRecording;
final String elapsedLabel;
final Future<void> Function() onPasteEventInfo;
final VoidCallback onClearEventInfo;
bool get _showPasteButtons => !hasValidClipboardInfo && !isRecording;
bool get _showEventTitle => hasValidClipboardInfo;
void _mockCopyEventInfo() {
const strTemp =
'{"title":"郑昌梦 丨黄伟依 空中格斗赛 小学组","address":"广东省汕头市番禺区青蓝街 111 号","filename":"郑昌梦_黄伟依_6月3日测试-1_空中格斗赛"}';
Clipboard.setData(const ClipboardData(text: strTemp));
AppToast.show('模拟复制赛事信息成功');
}
@override
Widget build(BuildContext context) {
return SafeArea(
bottom: false,
child: SizedBox(
height: 56.h,
width: double.maxFinite,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 12.w),
child: Row(
children: [
Image.asset(
Assets.images.imageLogo.path,
width: 84.r,
height: 24.r,
fit: BoxFit.contain,
),
Expanded(
child: _showEventTitle
? _HeaderEventTitleRow(
title: eventTitle ?? '',
isRecording: isRecording,
onClearEventInfo: onClearEventInfo,
)
: _showPasteButtons
? _HeaderPasteActions(
onMockCopy: _mockCopyEventInfo,
onPasteEventInfo: onPasteEventInfo,
)
: const SizedBox.shrink(),
),
],
),
),
),
);
}
}
class _HeaderEventTitleRow extends StatelessWidget {
const _HeaderEventTitleRow({
required this.title,
required this.isRecording,
required this.onClearEventInfo,
});
final String title;
final bool isRecording;
final VoidCallback onClearEventInfo;
static TextStyle get _overlayTextStyle => TextStyle(
color: Colors.white,
shadows: [Shadow(color: Colors.black54, blurRadius: 6.r)],
);
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
child: Text(
title,
style: _overlayTextStyle.copyWith(
fontSize: 12.sp,
fontWeight: FontWeight.w600,
),
textAlign: TextAlign.right,
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
if (!isRecording)
IconButton(
onPressed: onClearEventInfo,
icon: Icon(Icons.delete_outline, color: Colors.white, size: 22.r),
padding: EdgeInsets.zero,
constraints: BoxConstraints(minWidth: 40.r, minHeight: 40.r),
tooltip: '删除',
),
],
);
}
}
class _HeaderPasteActions extends StatelessWidget {
const _HeaderPasteActions({
required this.onMockCopy,
required this.onPasteEventInfo,
});
final VoidCallback onMockCopy;
final Future<void> Function() onPasteEventInfo;
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
// _HeaderActionButton(label: '模拟复制赛事信息', onPressed: onMockCopy),
_HeaderActionButton(
label: '粘贴赛事信息',
onPressed: () => onPasteEventInfo(),
),
],
);
}
}
class _HeaderActionButton extends StatelessWidget {
const _HeaderActionButton({required this.label, required this.onPressed});
final String label;
final VoidCallback onPressed;
@override
Widget build(BuildContext context) {
return TextButton.icon(
onPressed: onPressed,
icon: Icon(Icons.content_paste, size: 18.r),
label: Text(label),
style: TextButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.black.withValues(alpha: 0.5),
padding: EdgeInsets.symmetric(horizontal: 14.r, vertical: 8.r),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.r),
side: const BorderSide(color: Colors.white30),
),
),
);
}
}

129
lib/features/recording/widgets/widget_recording_hud.dart
View File

@@ -4,17 +4,13 @@ import 'package:permission_handler/permission_handler.dart';
import 'package:recording_tool/features/recording/model/model_recording_session.dart';
import 'package:recording_tool/features/recording/widgets/widget_recording_setup_hints.dart';
/// 录制页 HUD 层（赛事信息、控制按钮、状态提示）
/// 录制页 HUD 层（状态提示、录制控制）
class RecordingHudWidget extends StatelessWidget {
const RecordingHudWidget({
super.key,
required this.state,
this.eventTitle,
this.eventAddress,
this.showClipboardHint = false,
this.clipboardAddress = '',
required this.onClearEventInfo,
required this.onPasteEventInfo,
required this.onStart,
required this.onStop,
required this.onOpenDnd,
@@ -23,45 +19,24 @@ class RecordingHudWidget extends StatelessWidget {
});
final RecordingSessionState state;
final String? eventTitle;
final String? eventAddress;
final bool showClipboardHint;
final String clipboardAddress;
final VoidCallback onClearEventInfo;
final Future<void> Function() onPasteEventInfo;
final Future<void> Function() onStart;
final Future<void> Function() onStop;
final VoidCallback onOpenDnd;
final VoidCallback onOpenBattery;
final VoidCallback onToggleTouchLock;
/// 叠加层文字样式
static TextStyle get _overlayTextStyle => TextStyle(
color: Colors.white,
shadows: [Shadow(color: Colors.black54, blurRadius: 6.r)],
);
/// 底部控制区左右占位宽度
static double get _controlSlotWidth => 48.r;
@override
/// 构建 HUD 布局
Widget build(BuildContext context) {
final showPasteEventInfo = eventTitle == null && !state.isRecording;
return SafeArea(
child: Stack(
child: Column(
children: [
Column(
children: [
SizedBox(
height:
eventTitle != null ||
state.isRecording ||
showPasteEventInfo
? 56.h
: 8.h,
),
SizedBox(height: 8.h),
const Spacer(),
if (state.errorMessage != null)
Padding(
@@ -108,9 +83,7 @@ class RecordingHudWidget extends StatelessWidget {
? IconButton(
onPressed: onToggleTouchLock,
icon: Icon(
state.isTouchLocked
? Icons.lock
: Icons.lock_open,
state.isTouchLocked ? Icons.lock : Icons.lock_open,
color: Colors.white,
size: 28.r,
),
@@ -138,17 +111,13 @@ class RecordingHudWidget extends StatelessWidget {
color: Colors.white,
width: 4.r,
),
color: state.isRecording
? Colors.white
: Colors.red,
color: state.isRecording ? Colors.white : Colors.red,
),
child: Icon(
state.isRecording
? Icons.stop
: Icons.fiber_manual_record,
color: state.isRecording
? Colors.red
: Colors.white,
color: state.isRecording ? Colors.red : Colors.white,
size: 36.r,
),
),
@@ -164,92 +133,6 @@ class RecordingHudWidget extends StatelessWidget {
),
],
),
if (showPasteEventInfo)
Positioned(
top: 8.r,
left: 12.w,
right: 12.w,
child: Center(
child: TextButton.icon(
onPressed: onPasteEventInfo,
icon: Icon(Icons.content_paste, size: 18.r),
label: const Text('粘贴赛事信息'),
style: TextButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.black.withValues(alpha: 0.5),
padding: EdgeInsets.symmetric(
horizontal: 14.r,
vertical: 8.r,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.r),
side: const BorderSide(color: Colors.white30),
),
),
),
),
),
if (eventTitle != null)
Positioned(
top: 8.r,
left: 12.w,
right: 12.w,
child: Padding(
padding: EdgeInsets.only(right: state.isRecording ? 96.w : 0),
child: Row(
children: [
Expanded(
child: Text(
eventTitle!,
style: _overlayTextStyle.copyWith(
fontSize: 16.sp,
fontWeight: FontWeight.w600,
),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
if (!state.isRecording)
IconButton(
onPressed: onClearEventInfo,
icon: Icon(
Icons.delete_outline,
color: Colors.white,
size: 22.r,
),
padding: EdgeInsets.zero,
constraints: BoxConstraints(
minWidth: 40.r,
minHeight: 40.r,
),
tooltip: '删除',
),
],
),
),
),
if (state.isRecording)
Positioned(
top: 8.r,
right: 12.w,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 12.r, vertical: 6.r),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(20.r),
),
child: Text(
'REC ${state.elapsedLabel}',
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
);
}
}