Files
nj/app/lib/features/class_/widgets/comment_bottom_sheet.dart

192 lines
5.8 KiB
Dart

// 评语输入 BottomSheet — 老师点评学生日记
//
// 设计要点:
// - 7 个快捷评语模板,一键选择
// - 自由文字输入,支持多行
// - 温暖鼓励的语气(面向小学生日记)
// - 触摸目标 ≥ 44px
import 'package:flutter/material.dart';
/// 老师点评输入面板
class CommentBottomSheet extends StatefulWidget {
final String journalId;
final String studentName;
final void Function(String content) onSubmit;
const CommentBottomSheet({
super.key,
required this.journalId,
required this.studentName,
required this.onSubmit,
});
@override
State<CommentBottomSheet> createState() => _CommentBottomSheetState();
}
class _CommentBottomSheetState extends State<CommentBottomSheet> {
final _controller = TextEditingController();
final _focusNode = FocusNode();
bool _isSubmitting = false;
// 快捷评语模板 — 温暖鼓励风格
static const _quickComments = [
'🌟 写得真好!继续加油!',
'📖 故事很精彩,想象力很丰富!',
'💪 字写得很工整,继续保持!',
'🎨 画得很漂亮,很有创意!',
'🌈 内容很丰富,观察很仔细!',
'✍️ 可以再多写一点自己的感受哦',
'📸 照片拍得很好,记录很用心!',
];
@override
void initState() {
super.initState();
Future.microtask(() => _focusNode.requestFocus());
}
@override
void dispose() {
_controller.dispose();
_focusNode.dispose();
super.dispose();
}
void _submit() {
final content = _controller.text.trim();
if (content.isEmpty) return;
setState(() => _isSubmitting = true);
widget.onSubmit(content);
Navigator.pop(context);
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.7,
),
decoration: BoxDecoration(
color: theme.colorScheme.surface,
borderRadius: const BorderRadius.vertical(top: Radius.circular(22)),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// 拖拽条
Center(
child: Container(
margin: const EdgeInsets.symmetric(vertical: 8),
width: 40,
height: 4,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(2),
),
),
),
// 标题
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'点评 ${widget.studentName} 的日记',
style: theme.textTheme.titleSmall,
),
IconButton(
icon: const Icon(Icons.close, size: 20),
onPressed: () => Navigator.pop(context),
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
),
],
),
),
const SizedBox(height: 8),
// 快捷评语
SizedBox(
height: 80,
child: ListView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 16),
children: _quickComments.map((comment) {
return Padding(
padding: const EdgeInsets.only(right: 8),
child: ActionChip(
label: Text(comment, style: const TextStyle(fontSize: 12)),
onPressed: () {
_controller.text = comment;
_focusNode.requestFocus();
},
),
);
}).toList(),
),
),
const SizedBox(height: 8),
// 输入框
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: TextField(
controller: _controller,
focusNode: _focusNode,
maxLines: 3,
minLines: 1,
textInputAction: TextInputAction.done,
onSubmitted: (_) => _submit(),
decoration: InputDecoration(
hintText: '写下你的评语...',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.grey.shade300),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.grey.shade300),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: theme.colorScheme.primary,
width: 2,
),
),
),
),
),
const SizedBox(height: 12),
// 提交按钮
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: SizedBox(
width: double.infinity,
height: 44,
child: FilledButton(
onPressed: _isSubmitting ? null : _submit,
child: _isSubmitting
? const SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(strokeWidth: 2),
)
: const Text('发布评语'),
),
),
),
const SizedBox(height: 16),
],
),
);
}
}