feat(app): 添加评论列表展示组件 — FutureBuilder 轮询模式
This commit is contained in:
iven
262
app/lib/features/editor/widgets/comment_list_sheet.dart
Normal file
262
app/lib/features/editor/widgets/comment_list_sheet.dart
Normal file
@@ -0,0 +1,262 @@
|
|||||||
|
// 评论列表底部面板 — FutureBuilder 拉取老师评语
|
||||||
|
//
|
||||||
|
// 独立 widget，不纳入 EditorBloc。
|
||||||
|
// 打开日记时从后端拉取评论列表展示。
|
||||||
|
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import '../../../data/remote/api_client.dart';
|
||||||
|
import '../../class_/bloc/class_bloc.dart' show Comment;
|
||||||
|
|
||||||
|
/// 评论列表底部面板
|
||||||
|
class CommentListSheet extends StatelessWidget {
|
||||||
|
final String journalId;
|
||||||
|
final ApiClient apiClient;
|
||||||
|
|
||||||
|
const CommentListSheet({
|
||||||
|
super.key,
|
||||||
|
required this.journalId,
|
||||||
|
required this.apiClient,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final colorScheme = Theme.of(context).colorScheme;
|
||||||
|
|
||||||
|
return DraggableScrollableSheet(
|
||||||
|
initialChildSize: 0.4,
|
||||||
|
minChildSize: 0.2,
|
||||||
|
maxChildSize: 0.7,
|
||||||
|
builder: (context, scrollController) {
|
||||||
|
return Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: colorScheme.surface,
|
||||||
|
borderRadius: const BorderRadius.vertical(top: Radius.circular(22)),
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
// 拖拽指示条
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(top: 12, bottom: 8),
|
||||||
|
child: Container(
|
||||||
|
width: 36,
|
||||||
|
height: 4,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.grey[300],
|
||||||
|
borderRadius: BorderRadius.circular(2),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// 标题
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'老师评语',
|
||||||
|
style: Theme.of(context).textTheme.titleMedium,
|
||||||
|
),
|
||||||
|
const Spacer(),
|
||||||
|
_CommentCountBadge(
|
||||||
|
journalId: journalId,
|
||||||
|
apiClient: apiClient,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const Divider(),
|
||||||
|
// 评论列表
|
||||||
|
Expanded(
|
||||||
|
child: _CommentListFuture(
|
||||||
|
journalId: journalId,
|
||||||
|
apiClient: apiClient,
|
||||||
|
scrollController: scrollController,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// 评论数量 Badge
|
||||||
|
class _CommentCountBadge extends StatelessWidget {
|
||||||
|
final String journalId;
|
||||||
|
final ApiClient apiClient;
|
||||||
|
|
||||||
|
const _CommentCountBadge({
|
||||||
|
required this.journalId,
|
||||||
|
required this.apiClient,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return FutureBuilder<List<dynamic>>(
|
||||||
|
future: _fetchComments(),
|
||||||
|
builder: (context, snapshot) {
|
||||||
|
if (!snapshot.hasData) return const SizedBox.shrink();
|
||||||
|
final count = snapshot.data!.length;
|
||||||
|
if (count == 0) return const SizedBox.shrink();
|
||||||
|
return Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Theme.of(context).colorScheme.primaryContainer,
|
||||||
|
borderRadius: BorderRadius.circular(12),
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
'$count',
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 12,
|
||||||
|
color: Theme.of(context).colorScheme.onPrimaryContainer,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<List<dynamic>> _fetchComments() async {
|
||||||
|
try {
|
||||||
|
final response = await apiClient.get('/diary/journals/$journalId/comments');
|
||||||
|
return response.data as List<dynamic>;
|
||||||
|
} catch (_) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// 评论列表 — FutureBuilder 拉取
|
||||||
|
class _CommentListFuture extends StatelessWidget {
|
||||||
|
final String journalId;
|
||||||
|
final ApiClient apiClient;
|
||||||
|
final ScrollController scrollController;
|
||||||
|
|
||||||
|
const _CommentListFuture({
|
||||||
|
required this.journalId,
|
||||||
|
required this.apiClient,
|
||||||
|
required this.scrollController,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return FutureBuilder<List<Comment>>(
|
||||||
|
future: _fetchComments(),
|
||||||
|
builder: (context, snapshot) {
|
||||||
|
if (snapshot.connectionState == ConnectionState.waiting) {
|
||||||
|
return const Center(child: CircularProgressIndicator());
|
||||||
|
}
|
||||||
|
if (snapshot.hasError) {
|
||||||
|
return Center(
|
||||||
|
child: Text('加载评语失败', style: TextStyle(color: Colors.grey[500])),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
final comments = snapshot.data ?? [];
|
||||||
|
if (comments.isEmpty) {
|
||||||
|
return Center(
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
Icon(Icons.chat_bubble_outline, size: 36, color: Colors.grey[300]),
|
||||||
|
const SizedBox(height: 8),
|
||||||
|
Text(
|
||||||
|
'还没有评语哦',
|
||||||
|
style: TextStyle(color: Colors.grey[400]),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return ListView.builder(
|
||||||
|
controller: scrollController,
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||||
|
itemCount: comments.length,
|
||||||
|
itemBuilder: (context, index) {
|
||||||
|
return _CommentTile(comment: comments[index]);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<List<Comment>> _fetchComments() async {
|
||||||
|
try {
|
||||||
|
final response = await apiClient.get('/diary/journals/$journalId/comments');
|
||||||
|
final list = response.data as List<dynamic>;
|
||||||
|
return list
|
||||||
|
.map((json) => Comment(
|
||||||
|
id: json['id'] as String,
|
||||||
|
journalId: json['journal_id'] as String,
|
||||||
|
authorId: json['author_id'] as String,
|
||||||
|
content: json['content'] as String,
|
||||||
|
createdAt: DateTime.parse(json['created_at'] as String),
|
||||||
|
))
|
||||||
|
.toList();
|
||||||
|
} catch (e) {
|
||||||
|
debugPrint('加载评论失败: $e');
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// 单条评论卡片
|
||||||
|
class _CommentTile extends StatelessWidget {
|
||||||
|
final Comment comment;
|
||||||
|
|
||||||
|
const _CommentTile({required this.comment});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Padding(
|
||||||
|
padding: const EdgeInsets.only(bottom: 12),
|
||||||
|
child: Container(
|
||||||
|
padding: const EdgeInsets.all(12),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Theme.of(context)
|
||||||
|
.colorScheme
|
||||||
|
.surfaceContainerHighest
|
||||||
|
.withValues(alpha: 0.5),
|
||||||
|
borderRadius: BorderRadius.circular(12),
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
// 老师标签 + 时间
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
Container(
|
||||||
|
padding:
|
||||||
|
const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: const Color(0xFFE07A5F).withValues(alpha: 0.15),
|
||||||
|
borderRadius: BorderRadius.circular(4),
|
||||||
|
),
|
||||||
|
child: const Text(
|
||||||
|
'老师',
|
||||||
|
style: TextStyle(fontSize: 11, color: Color(0xFFE07A5F)),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
Text(
|
||||||
|
_formatTime(comment.createdAt),
|
||||||
|
style: TextStyle(fontSize: 11, color: Colors.grey[500]),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: 8),
|
||||||
|
// 评语内容
|
||||||
|
Text(
|
||||||
|
comment.content,
|
||||||
|
style: const TextStyle(fontSize: 14, height: 1.5),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
String _formatTime(DateTime dt) {
|
||||||
|
return '${dt.month}/${dt.day} ${dt.hour.toString().padLeft(2, '0')}:${dt.minute.toString().padLeft(2, '0')}';
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user