refactor: 拆分对话页 build,抽出消息气泡组件
- _TurnBubble:单条对话气泡(翻译、播放/翻译/句型解析操作) - _TurnAction:气泡下方的图标文字按钮,替代三段重复布局 - 提示按钮逻辑移到 _showHint() _DialoguePageState.build 从约 320 行降到约 170 行,无用户可见变化。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -11,11 +11,7 @@ import '../../widgets/lexicon_lookup.dart';
|
||||
import '../../widgets/voice_answer.dart';
|
||||
|
||||
class DialogueScenePage extends StatelessWidget {
|
||||
const DialogueScenePage({
|
||||
super.key,
|
||||
required this.onStart,
|
||||
this.onBack,
|
||||
});
|
||||
const DialogueScenePage({super.key, required this.onStart, this.onBack});
|
||||
final VoidCallback onStart;
|
||||
final VoidCallback? onBack;
|
||||
|
||||
@@ -174,7 +170,8 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
// 3. Check all lesson dialogues
|
||||
for (final dialogue in a0Dialogues.values) {
|
||||
for (var i = 0; i < dialogue.prompts.length; i++) {
|
||||
if (dialogue.prompts[i].trim().toLowerCase() == cleanText.toLowerCase()) {
|
||||
if (dialogue.prompts[i].trim().toLowerCase() ==
|
||||
cleanText.toLowerCase()) {
|
||||
if (i < dialogue.translations.length) {
|
||||
return dialogue.translations[i];
|
||||
}
|
||||
@@ -184,7 +181,8 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
// 4. Check all segment dialogues
|
||||
for (final dialogue in a0SegmentDialogues.values) {
|
||||
for (var i = 0; i < dialogue.prompts.length; i++) {
|
||||
if (dialogue.prompts[i].trim().toLowerCase() == cleanText.toLowerCase()) {
|
||||
if (dialogue.prompts[i].trim().toLowerCase() ==
|
||||
cleanText.toLowerCase()) {
|
||||
if (i < dialogue.translations.length) {
|
||||
return dialogue.translations[i];
|
||||
}
|
||||
@@ -261,6 +259,7 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _scrollToBottom() {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (_scrollController.hasClients) {
|
||||
@@ -273,7 +272,6 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Future<void> send() async {
|
||||
final text = controller.text.trim();
|
||||
if (text.isEmpty || stage >= script.prompts.length || waitingForReply) {
|
||||
@@ -281,7 +279,8 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
}
|
||||
if (!_matchesCurrentTask(text)) {
|
||||
setState(
|
||||
() => validationError = '这一轮要“${_currentTaskLabel()}”,这句还没做到。'
|
||||
() => validationError =
|
||||
'这一轮要“${_currentTaskLabel()}”,这句还没做到。'
|
||||
'可以点“提示”看示范,再补充一次。',
|
||||
);
|
||||
return;
|
||||
@@ -332,7 +331,8 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
.toList(),
|
||||
);
|
||||
if (!mounted) return;
|
||||
final replyText = aiResponse?.reply ??
|
||||
final replyText =
|
||||
aiResponse?.reply ??
|
||||
(nextStage < script.prompts.length
|
||||
? script.prompts[nextStage]
|
||||
: _closingLine);
|
||||
@@ -469,8 +469,9 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
text: turn.text,
|
||||
);
|
||||
if (!mounted) return;
|
||||
final finalTrans =
|
||||
(fetched != null && fetched.isNotEmpty) ? fetched : "暂无该句中文翻译";
|
||||
final finalTrans = (fetched != null && fetched.isNotEmpty)
|
||||
? fetched
|
||||
: "暂无该句中文翻译";
|
||||
setState(() {
|
||||
turns[index] = turn.copyWith(translation: finalTrans);
|
||||
});
|
||||
@@ -513,8 +514,9 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
text: latestAi.text,
|
||||
);
|
||||
if (!mounted) return;
|
||||
final finalTrans =
|
||||
(fetched != null && fetched.isNotEmpty) ? fetched : "暂无该句中文翻译";
|
||||
final finalTrans = (fetched != null && fetched.isNotEmpty)
|
||||
? fetched
|
||||
: "暂无该句中文翻译";
|
||||
setState(() {
|
||||
hint = "对方说:$finalTrans";
|
||||
turns[latestAiIndex] = latestAi.copyWith(translation: finalTrans);
|
||||
@@ -551,6 +553,18 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
await startVoiceInput();
|
||||
}
|
||||
|
||||
void _showHint() {
|
||||
setState(() {
|
||||
usedHelp = true;
|
||||
final hintIdx = stage < script.hints.length
|
||||
? stage
|
||||
: (script.hints.isNotEmpty ? script.hints.length - 1 : 0);
|
||||
hint = script.hints.isNotEmpty ? script.hints[hintIdx] : null;
|
||||
});
|
||||
_saveDraft();
|
||||
_scrollToBottom();
|
||||
}
|
||||
|
||||
void _showWord() => showLexiconLookup(
|
||||
context,
|
||||
state: widget.state,
|
||||
@@ -583,137 +597,12 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
itemCount: turns.length,
|
||||
separatorBuilder: (_, _) => const SizedBox(height: 10),
|
||||
itemBuilder: (context, index) {
|
||||
final turn = turns[index];
|
||||
return Align(
|
||||
alignment: turn.isLearner
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
child: Container(
|
||||
constraints: const BoxConstraints(maxWidth: 290),
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: turn.isLearner
|
||||
? AppColors.warm
|
||||
: AppColors.softGreen,
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
LexiconText(turn.text, state: widget.state),
|
||||
if (!turn.isLearner) ...[
|
||||
if (_shownTranslations.contains(index) &&
|
||||
turn.translation != null &&
|
||||
turn.translation!.isNotEmpty) ...[
|
||||
const SizedBox(height: 6),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.6),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Text(
|
||||
turn.translation!,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
color: Color(0xFF2D3748),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 6),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
GestureDetector(
|
||||
onTap: () =>
|
||||
VoiceService.instance.speak(turn.text),
|
||||
child: const Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.volume_up_outlined,
|
||||
size: 16,
|
||||
color: AppColors.green,
|
||||
),
|
||||
SizedBox(width: 4),
|
||||
Text(
|
||||
"播放",
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColors.green,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
GestureDetector(
|
||||
onTap: () => _toggleTurnTranslation(index),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
_shownTranslations.contains(index)
|
||||
? Icons.translate
|
||||
: Icons.translate_outlined,
|
||||
size: 16,
|
||||
color: AppColors.green,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
_shownTranslations.contains(index)
|
||||
? "隐藏翻译"
|
||||
: "翻译",
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColors.green,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
GestureDetector(
|
||||
onTap: () => showLexiconLookup(
|
||||
context,
|
||||
state: widget.state,
|
||||
initialText: turn.text,
|
||||
),
|
||||
child: const Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.psychology_alt_outlined,
|
||||
size: 16,
|
||||
color: AppColors.green,
|
||||
),
|
||||
SizedBox(width: 4),
|
||||
Text(
|
||||
"句型解析",
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColors.green,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
itemBuilder: (context, index) => _TurnBubble(
|
||||
turn: turns[index],
|
||||
state: widget.state,
|
||||
showTranslation: _shownTranslations.contains(index),
|
||||
onToggleTranslation: () => _toggleTurnTranslation(index),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (!finished) ...[
|
||||
@@ -721,24 +610,8 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
_AssistChip(
|
||||
label: '提示',
|
||||
onTap: () {
|
||||
setState(() {
|
||||
usedHelp = true;
|
||||
final hintIdx = stage < script.hints.length
|
||||
? stage
|
||||
: (script.hints.isNotEmpty ? script.hints.length - 1 : 0);
|
||||
hint = script.hints.isNotEmpty ? script.hints[hintIdx] : null;
|
||||
});
|
||||
_saveDraft();
|
||||
_scrollToBottom();
|
||||
},
|
||||
),
|
||||
_AssistChip(
|
||||
label: '翻译',
|
||||
onTap: _showLatestAiTranslation,
|
||||
),
|
||||
_AssistChip(label: '提示', onTap: _showHint),
|
||||
_AssistChip(label: '翻译', onTap: _showLatestAiTranslation),
|
||||
_AssistChip(
|
||||
label: '慢一点',
|
||||
onTap: () => _playLatestAi(slow: true),
|
||||
@@ -809,9 +682,7 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
)
|
||||
: Icon(
|
||||
listening
|
||||
? Icons.stop_circle
|
||||
: Icons.mic_none,
|
||||
listening ? Icons.stop_circle : Icons.mic_none,
|
||||
color: listening ? Colors.redAccent : null,
|
||||
),
|
||||
onPressed: transcribing ? null : _toggleListening,
|
||||
@@ -877,6 +748,127 @@ class _DialoguePageState extends State<DialoguePage>
|
||||
}
|
||||
}
|
||||
|
||||
class _TurnBubble extends StatelessWidget {
|
||||
const _TurnBubble({
|
||||
required this.turn,
|
||||
required this.state,
|
||||
required this.showTranslation,
|
||||
required this.onToggleTranslation,
|
||||
});
|
||||
|
||||
final DialogueTurn turn;
|
||||
final AppState state;
|
||||
final bool showTranslation;
|
||||
final VoidCallback onToggleTranslation;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final translation = turn.translation;
|
||||
return Align(
|
||||
alignment: turn.isLearner ? Alignment.centerRight : Alignment.centerLeft,
|
||||
child: Container(
|
||||
constraints: const BoxConstraints(maxWidth: 290),
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: turn.isLearner ? AppColors.warm : AppColors.softGreen,
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
LexiconText(turn.text, state: state),
|
||||
if (!turn.isLearner) ...[
|
||||
if (showTranslation &&
|
||||
translation != null &&
|
||||
translation.isNotEmpty) ...[
|
||||
const SizedBox(height: 6),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.6),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Text(
|
||||
translation,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
color: Color(0xFF2D3748),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 6),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
_TurnAction(
|
||||
icon: Icons.volume_up_outlined,
|
||||
label: '播放',
|
||||
onTap: () => VoiceService.instance.speak(turn.text),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
_TurnAction(
|
||||
icon: showTranslation
|
||||
? Icons.translate
|
||||
: Icons.translate_outlined,
|
||||
label: showTranslation ? '隐藏翻译' : '翻译',
|
||||
onTap: onToggleTranslation,
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
_TurnAction(
|
||||
icon: Icons.psychology_alt_outlined,
|
||||
label: '句型解析',
|
||||
onTap: () => showLexiconLookup(
|
||||
context,
|
||||
state: state,
|
||||
initialText: turn.text,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TurnAction extends StatelessWidget {
|
||||
const _TurnAction({
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(icon, size: 16, color: AppColors.green),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
label,
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColors.green,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class _AssistChip extends StatelessWidget {
|
||||
const _AssistChip({required this.label, required this.onTap});
|
||||
final String label;
|
||||
|
||||
Reference in New Issue
Block a user