721 lines
24 KiB
Dart
721 lines
24 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import '../models/reading_exercise_model.dart';
|
|
import '../providers/reading_provider.dart';
|
|
import 'reading_category_screen.dart';
|
|
import 'reading_exercise_screen.dart';
|
|
|
|
/// 阅读理解主页面
|
|
class ReadingHomeScreen extends ConsumerStatefulWidget {
|
|
const ReadingHomeScreen({super.key});
|
|
|
|
@override
|
|
ConsumerState<ReadingHomeScreen> createState() => _ReadingHomeScreenState();
|
|
}
|
|
|
|
class _ReadingHomeScreenState extends ConsumerState<ReadingHomeScreen> {
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
// 加载推荐文章
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
ref.read(readingMaterialsProvider.notifier).loadRecommendedMaterials();
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: const Color(0xFFF5F5F5),
|
|
appBar: AppBar(
|
|
backgroundColor: Colors.transparent,
|
|
elevation: 0,
|
|
leading: IconButton(
|
|
icon: const Icon(Icons.arrow_back, color: Colors.black87),
|
|
onPressed: () => Navigator.of(context).pop(),
|
|
),
|
|
title: const Text(
|
|
'阅读理解',
|
|
style: TextStyle(
|
|
color: Colors.black87,
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
centerTitle: true,
|
|
),
|
|
body: SingleChildScrollView(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
_buildReadingModes(context),
|
|
const SizedBox(height: 20),
|
|
_buildArticleCategories(),
|
|
const SizedBox(height: 20),
|
|
_buildRecommendedArticles(context),
|
|
const SizedBox(height: 20),
|
|
_buildReadingProgress(),
|
|
const SizedBox(height: 100), // 底部导航栏空间
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildReadingModes(BuildContext context) {
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.05),
|
|
blurRadius: 10,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'阅读模式',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
// 在宽屏幕上使用更宽松的布局
|
|
if (constraints.maxWidth > 600) {
|
|
return Row(
|
|
children: [
|
|
Expanded(
|
|
child: _buildModeCard(
|
|
context,
|
|
'休闲阅读',
|
|
'轻松阅读体验',
|
|
Icons.book_outlined,
|
|
Colors.green,
|
|
() => _navigateToCategory(context, ReadingExerciseType.story),
|
|
),
|
|
),
|
|
const SizedBox(width: 20),
|
|
Expanded(
|
|
child: _buildModeCard(
|
|
context,
|
|
'练习阅读',
|
|
'结合练习题',
|
|
Icons.quiz,
|
|
Colors.blue,
|
|
() => _showExerciseTypeDialog(context),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
} else {
|
|
return Row(
|
|
children: [
|
|
Expanded(
|
|
child: _buildModeCard(
|
|
context,
|
|
'休闲阅读',
|
|
'轻松阅读体验',
|
|
Icons.book_outlined,
|
|
Colors.green,
|
|
() => _navigateToCategory(context, ReadingExerciseType.story),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: _buildModeCard(
|
|
context,
|
|
'练习阅读',
|
|
'结合练习题',
|
|
Icons.quiz,
|
|
Colors.blue,
|
|
() => _showExerciseTypeDialog(context),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildModeCard(BuildContext context, String title, String subtitle, IconData icon, Color color, VoidCallback onTap) {
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: color.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(color: color.withOpacity(0.3)),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Icon(
|
|
icon,
|
|
color: color,
|
|
size: 32,
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
title,
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
color: color,
|
|
),
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
subtitle,
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
color: Colors.grey,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildArticleCategories() {
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.05),
|
|
blurRadius: 10,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'文章分类',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Consumer(
|
|
builder: (context, ref, _) {
|
|
final materialsState = ref.watch(readingMaterialsProvider);
|
|
if (materialsState.isLoading) {
|
|
return const Center(child: CircularProgressIndicator());
|
|
}
|
|
if (materialsState.error != null) {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
const Icon(Icons.error_outline, size: 48, color: Colors.redAccent),
|
|
const SizedBox(height: 12),
|
|
Text('加载失败: ${materialsState.error}', style: const TextStyle(color: Colors.redAccent)),
|
|
const SizedBox(height: 8),
|
|
TextButton(
|
|
onPressed: () {
|
|
ref.read(readingMaterialsProvider.notifier).loadRecommendedMaterials();
|
|
},
|
|
child: const Text('重试'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
final materials = materialsState.materials;
|
|
if (materials.isEmpty) {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
const Icon(Icons.category, size: 48, color: Colors.grey),
|
|
const SizedBox(height: 12),
|
|
const Text('暂无文章分类', style: TextStyle(color: Colors.grey)),
|
|
const SizedBox(height: 8),
|
|
TextButton(
|
|
onPressed: () {
|
|
ref.read(readingMaterialsProvider.notifier).loadRecommendedMaterials();
|
|
},
|
|
child: const Text('刷新'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
final Map<String, int> counts = {};
|
|
for (final m in materials) {
|
|
final key = m.type.name;
|
|
counts[key] = (counts[key] ?? 0) + 1;
|
|
}
|
|
final categories = counts.keys.toList();
|
|
return GridView.builder(
|
|
shrinkWrap: true,
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 2,
|
|
crossAxisSpacing: 12,
|
|
mainAxisSpacing: 12,
|
|
childAspectRatio: 2.5,
|
|
),
|
|
itemCount: categories.length.clamp(0, 4),
|
|
itemBuilder: (context, index) {
|
|
final name = categories[index];
|
|
final count = counts[name] ?? 0;
|
|
final color = [Colors.blue, Colors.green, Colors.orange, Colors.purple][index % 4];
|
|
final icon = [Icons.computer, Icons.people, Icons.business_center, Icons.history_edu][index % 4];
|
|
return GestureDetector(
|
|
onTap: () => _navigateToCategory(context, _mapStringToType(name)),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: color.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Icon(icon, color: color, size: 24),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
name,
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
color: color,
|
|
),
|
|
),
|
|
Text(
|
|
'$count篇',
|
|
style: const TextStyle(fontSize: 10, color: Colors.grey),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
ReadingExerciseType _mapStringToType(String name) {
|
|
switch (name.toLowerCase()) {
|
|
case 'news':
|
|
return ReadingExerciseType.news;
|
|
case 'story':
|
|
return ReadingExerciseType.story;
|
|
case 'science':
|
|
return ReadingExerciseType.science;
|
|
case 'business':
|
|
return ReadingExerciseType.business;
|
|
case 'technology':
|
|
return ReadingExerciseType.technology;
|
|
default:
|
|
return ReadingExerciseType.news;
|
|
}
|
|
}
|
|
|
|
Widget _buildRecommendedArticles(BuildContext context) {
|
|
final materialsState = ref.watch(readingMaterialsProvider);
|
|
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.05),
|
|
blurRadius: 10,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'推荐文章',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
materialsState.isLoading
|
|
? const Center(child: CircularProgressIndicator())
|
|
: materialsState.error != null
|
|
? Center(
|
|
child: Text(
|
|
'加载失败: ${materialsState.error}',
|
|
style: const TextStyle(color: Colors.red),
|
|
),
|
|
)
|
|
: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final exercises = materialsState.materials;
|
|
if (exercises.isEmpty) {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
const Icon(Icons.article_outlined, size: 48, color: Colors.grey),
|
|
const SizedBox(height: 12),
|
|
const Text('暂无推荐文章', style: TextStyle(color: Colors.grey)),
|
|
const SizedBox(height: 8),
|
|
TextButton(
|
|
onPressed: () {
|
|
ref.read(readingMaterialsProvider.notifier).loadRecommendedMaterials();
|
|
},
|
|
child: const Text('刷新'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
if (constraints.maxWidth > 800) {
|
|
// 宽屏幕：使用网格布局
|
|
return GridView.builder(
|
|
shrinkWrap: true,
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 2,
|
|
crossAxisSpacing: 16,
|
|
mainAxisSpacing: 12,
|
|
childAspectRatio: 3.0,
|
|
),
|
|
itemCount: exercises.length,
|
|
itemBuilder: (context, index) {
|
|
return _buildArticleItem(context, exercises[index]);
|
|
},
|
|
);
|
|
} else {
|
|
// 窄屏幕：使用列表布局
|
|
return Column(
|
|
children: exercises.map((exercise) =>
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 12),
|
|
child: _buildArticleItem(context, exercise),
|
|
),
|
|
).toList(),
|
|
);
|
|
}
|
|
},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildArticleItem(BuildContext context, ReadingExercise exercise) {
|
|
String getDifficultyLabel(ReadingDifficulty difficulty) {
|
|
switch (difficulty) {
|
|
case ReadingDifficulty.elementary:
|
|
return 'A1-A2';
|
|
case ReadingDifficulty.intermediate:
|
|
return 'B1';
|
|
case ReadingDifficulty.upperIntermediate:
|
|
return 'B2';
|
|
case ReadingDifficulty.advanced:
|
|
return 'C1';
|
|
case ReadingDifficulty.proficient:
|
|
return 'C2';
|
|
}
|
|
}
|
|
|
|
return GestureDetector(
|
|
onTap: () => _navigateToExercise(context, exercise),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey[50],
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 40,
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF2196F3).withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: const Icon(
|
|
Icons.article,
|
|
color: Color(0xFF2196F3),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
exercise.title,
|
|
style: const TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
Text(
|
|
exercise.summary,
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
color: Colors.grey,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
const SizedBox(height: 4),
|
|
Row(
|
|
children: [
|
|
Text(
|
|
'${exercise.wordCount}词',
|
|
style: const TextStyle(
|
|
fontSize: 10,
|
|
color: Colors.grey,
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
'${exercise.estimatedTime}分钟',
|
|
style: const TextStyle(
|
|
fontSize: 10,
|
|
color: Colors.grey,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF2196F3),
|
|
borderRadius: BorderRadius.circular(4),
|
|
),
|
|
child: Text(
|
|
getDifficultyLabel(exercise.difficulty),
|
|
style: const TextStyle(
|
|
fontSize: 10,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildReadingProgress() {
|
|
return Container(
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.05),
|
|
blurRadius: 10,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'阅读统计',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Consumer(
|
|
builder: (context, ref, _) {
|
|
final service = ref.watch(readingServiceProvider);
|
|
return FutureBuilder(
|
|
future: service.getReadingStats(),
|
|
builder: (context, snapshot) {
|
|
if (snapshot.connectionState == ConnectionState.waiting) {
|
|
return const Center(child: CircularProgressIndicator());
|
|
}
|
|
if (snapshot.hasError) {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
const Icon(Icons.error_outline, size: 48, color: Colors.redAccent),
|
|
const SizedBox(height: 12),
|
|
Text('获取统计失败: ${snapshot.error}', style: const TextStyle(color: Colors.redAccent)),
|
|
const SizedBox(height: 8),
|
|
TextButton(
|
|
onPressed: () {
|
|
setState(() {});
|
|
},
|
|
child: const Text('重试'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
if (!snapshot.hasData) {
|
|
return const Center(child: Text('暂无阅读统计', style: TextStyle(color: Colors.grey)));
|
|
}
|
|
final stats = snapshot.data!;
|
|
if (stats.totalArticlesRead == 0) {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: const [
|
|
Icon(Icons.bar_chart, size: 48, color: Colors.grey),
|
|
SizedBox(height: 12),
|
|
Text('暂无阅读统计', style: TextStyle(color: Colors.grey)),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
return Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: [
|
|
_buildProgressItem('${stats.totalArticlesRead}', '已读文章', Icons.article),
|
|
_buildProgressItem('${stats.averageReadingSpeed.toStringAsFixed(0)}', '阅读速度', Icons.speed),
|
|
_buildProgressItem('${stats.comprehensionAccuracy.toStringAsFixed(0)}%', '理解率', Icons.psychology),
|
|
],
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildProgressItem(String value, String label, IconData icon) {
|
|
return Column(
|
|
children: [
|
|
Icon(
|
|
icon,
|
|
color: const Color(0xFF2196F3),
|
|
size: 24,
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
value,
|
|
style: const TextStyle(
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.bold,
|
|
color: Color(0xFF2196F3),
|
|
),
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
label,
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
color: Colors.grey,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
// 导航到分类页面
|
|
void _navigateToCategory(BuildContext context, ReadingExerciseType type) {
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) => ReadingCategoryScreen(exerciseType: type),
|
|
),
|
|
);
|
|
}
|
|
|
|
// 导航到练习页面
|
|
void _navigateToExercise(BuildContext context, ReadingExercise exercise) {
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) => ReadingExerciseScreen(exercise: exercise),
|
|
),
|
|
);
|
|
}
|
|
|
|
// 显示练习类型选择对话框
|
|
void _showExerciseTypeDialog(BuildContext context) {
|
|
showDialog(
|
|
context: context,
|
|
builder: (BuildContext context) {
|
|
return AlertDialog(
|
|
title: const Text('选择练习类型'),
|
|
content: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
{'name': 'news', 'label': '新闻'},
|
|
{'name': 'story', 'label': '故事'},
|
|
{'name': 'science', 'label': '科学'},
|
|
{'name': 'business', 'label': '商务'},
|
|
{'name': 'technology', 'label': '科技'},
|
|
].map((category) {
|
|
return ListTile(
|
|
leading: const Icon(Icons.book),
|
|
title: Text(category['label']!),
|
|
onTap: () {
|
|
Navigator.pop(context);
|
|
_navigateToCategory(context, _mapStringToType(category['name']!));
|
|
},
|
|
);
|
|
}).toList(),
|
|
),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(context),
|
|
child: const Text('取消'),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
);
|
|
}
|
|
} |