1328 lines
42 KiB
Dart
1328 lines
42 KiB
Dart
|
import 'package:flutter/material.dart';
|
|||
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|||
|
|
import '../models/vocabulary_book_model.dart';
|
|||
|
|
import '../models/word_model.dart';
|
|||
|
|
import '../providers/vocabulary_provider.dart';
|
|||
|
|
import '../services/vocabulary_service.dart';
|
|||
|
|
import '../../../core/network/api_client.dart';
|
|||
|
|
import '../../../core/services/storage_service.dart';
|
|||
|
|
import '../../../shared/widgets/custom_app_bar.dart';
|
|||
|
|
import '../../../shared/widgets/custom_card.dart';
|
|||
|
|
import '../../../shared/widgets/loading_widget.dart';
|
|||
|
|
import '../../../shared/widgets/error_widget.dart' as custom_error;
|
|||
|
|
import 'word_learning_screen.dart';
|
|||
|
|
import 'study_screen.dart';
|
|||
|
|
|
|||
|
|
/// 词汇书详情页面
|
|||
|
|
class VocabularyBookScreen extends ConsumerStatefulWidget {
|
|||
|
|
final VocabularyBook vocabularyBook;
|
|||
|
|
|
|||
|
|
const VocabularyBookScreen({
|
|||
|
|
super.key,
|
|||
|
|
required this.vocabularyBook,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
ConsumerState<VocabularyBookScreen> createState() => _VocabularyBookScreenState();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _VocabularyBookScreenState extends ConsumerState<VocabularyBookScreen>
|
|||
|
|
with SingleTickerProviderStateMixin {
|
|||
|
|
late TabController _tabController;
|
|||
|
|
ScrollController? _scrollController;
|
|||
|
|
|
|||
|
|
List<Word> _words = [];
|
|||
|
|
List<Word> _filteredWords = []; // 过滤后的单词列表
|
|||
|
|
bool _isLoading = false;
|
|||
|
|
bool _isLoadingMore = false; // 是否正在加载更多
|
|||
|
|
String? _error;
|
|||
|
|
UserVocabularyBookProgress? _progress;
|
|||
|
|
bool _isLoadingProgress = false;
|
|||
|
|
|
|||
|
|
// 搜索相关
|
|||
|
|
bool _isSearching = false;
|
|||
|
|
final TextEditingController _searchController = TextEditingController();
|
|||
|
|
String _searchQuery = '';
|
|||
|
|
|
|||
|
|
// 分页相关
|
|||
|
|
int _currentPage = 1;
|
|||
|
|
final int _pageSize = 50; // 每频50个单词
|
|||
|
|
bool _hasMore = true; // 是否还有更多数据
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void initState() {
|
|||
|
|
super.initState();
|
|||
|
|
_tabController = TabController(length: 2, vsync: this);
|
|||
|
|
_scrollController = ScrollController();
|
|||
|
|
_scrollController?.addListener(_onScroll);
|
|||
|
|
_loadVocabularyBookWords(); // 加载第一页
|
|||
|
|
_loadProgress();
|
|||
|
|
|
|||
|
|
// 监听搜索输入变化
|
|||
|
|
_searchController.addListener(_onSearchChanged);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 监听滚动，实现懒加载
|
|||
|
|
void _onScroll() {
|
|||
|
|
if (_scrollController == null) return;
|
|||
|
|
// 如果滚动到底部80%的位置，且不在加载中，且还有更多数据
|
|||
|
|
if (_scrollController!.position.pixels >= _scrollController!.position.maxScrollExtent * 0.8 &&
|
|||
|
|
!_isLoadingMore &&
|
|||
|
|
_hasMore &&
|
|||
|
|
_tabController.index == 0) { // 只在单词列表标签触发
|
|||
|
|
_loadMoreWords();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 加载更多单词
|
|||
|
|
Future<void> _loadMoreWords() async {
|
|||
|
|
if (_isLoadingMore || !_hasMore) return;
|
|||
|
|
|
|||
|
|
setState(() {
|
|||
|
|
_isLoadingMore = true;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
_currentPage++;
|
|||
|
|
final vocabularyService = VocabularyService(
|
|||
|
|
apiClient: ApiClient.instance,
|
|||
|
|
storageService: await StorageService.getInstance(),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
final bookWords = await vocabularyService.getVocabularyBookWords(
|
|||
|
|
widget.vocabularyBook.id,
|
|||
|
|
page: _currentPage,
|
|||
|
|
limit: _pageSize,
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
final newWords = bookWords
|
|||
|
|
.where((bw) => bw.word != null)
|
|||
|
|
.map((bw) => bw.word!)
|
|||
|
|
.toList();
|
|||
|
|
|
|||
|
|
setState(() {
|
|||
|
|
_words.addAll(newWords);
|
|||
|
|
_filteredWords = _searchQuery.isEmpty ? _words : _filterWords(_searchQuery);
|
|||
|
|
_isLoadingMore = false;
|
|||
|
|
// 如果返回的数据少于pageSize，说明没有更多数据了
|
|||
|
|
_hasMore = newWords.length >= _pageSize;
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
print('加载更多单词失败: $e');
|
|||
|
|
setState(() {
|
|||
|
|
_isLoadingMore = false;
|
|||
|
|
_currentPage--; // 回退页码
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 搜索输入变化监听
|
|||
|
|
void _onSearchChanged() {
|
|||
|
|
setState(() {
|
|||
|
|
_searchQuery = _searchController.text;
|
|||
|
|
_filteredWords = _searchQuery.isEmpty ? _words : _filterWords(_searchQuery);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 过滤单词
|
|||
|
|
List<Word> _filterWords(String query) {
|
|||
|
|
final lowerQuery = query.toLowerCase();
|
|||
|
|
return _words.where((word) {
|
|||
|
|
// 搜索单词、音标、释义
|
|||
|
|
final wordMatch = word.word.toLowerCase().contains(lowerQuery);
|
|||
|
|
final phoneticMatch = word.phonetic?.toLowerCase().contains(lowerQuery) ?? false;
|
|||
|
|
final definitionMatch = word.definitions.any(
|
|||
|
|
(def) => def.translation.toLowerCase().contains(lowerQuery),
|
|||
|
|
);
|
|||
|
|
return wordMatch || phoneticMatch || definitionMatch;
|
|||
|
|
}).toList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 切换搜索状态
|
|||
|
|
void _toggleSearch() {
|
|||
|
|
setState(() {
|
|||
|
|
_isSearching = !_isSearching;
|
|||
|
|
if (!_isSearching) {
|
|||
|
|
_searchController.clear();
|
|||
|
|
_searchQuery = '';
|
|||
|
|
_filteredWords = _words;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void dispose() {
|
|||
|
|
_scrollController?.removeListener(_onScroll);
|
|||
|
|
_scrollController?.dispose();
|
|||
|
|
_tabController.dispose();
|
|||
|
|
_searchController.dispose();
|
|||
|
|
super.dispose();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 从后端API加载词汇书单词（第一页）
|
|||
|
|
Future<void> _loadVocabularyBookWords() async {
|
|||
|
|
setState(() {
|
|||
|
|
_isLoading = true;
|
|||
|
|
_error = null;
|
|||
|
|
_currentPage = 1;
|
|||
|
|
_hasMore = true;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
final vocabularyService = VocabularyService(
|
|||
|
|
apiClient: ApiClient.instance,
|
|||
|
|
storageService: await StorageService.getInstance(),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
final bookWords = await vocabularyService.getVocabularyBookWords(
|
|||
|
|
widget.vocabularyBook.id,
|
|||
|
|
page: 1,
|
|||
|
|
limit: _pageSize,
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 提取单词对象
|
|||
|
|
final words = bookWords
|
|||
|
|
.where((bw) => bw.word != null)
|
|||
|
|
.map((bw) => bw.word!)
|
|||
|
|
.toList();
|
|||
|
|
|
|||
|
|
setState(() {
|
|||
|
|
_words = words;
|
|||
|
|
_filteredWords = words; // 初始化过滤列表
|
|||
|
|
_isLoading = false;
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
print('加载词汇书单词失败: $e');
|
|||
|
|
setState(() {
|
|||
|
|
_error = '加载失败，请稍后重试';
|
|||
|
|
_isLoading = false;
|
|||
|
|
// API失败时显示空状态，不使用模拟数据
|
|||
|
|
_words = [];
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 加载学习进度
|
|||
|
|
Future<void> _loadProgress({bool forceRefresh = false}) async {
|
|||
|
|
setState(() {
|
|||
|
|
_isLoadingProgress = true;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
final vocabularyService = VocabularyService(
|
|||
|
|
apiClient: ApiClient.instance,
|
|||
|
|
storageService: await StorageService.getInstance(),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
final progress = await vocabularyService.getVocabularyBookProgress(
|
|||
|
|
widget.vocabularyBook.id,
|
|||
|
|
forceRefresh: forceRefresh, // 传递强制刷新参数
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
setState(() {
|
|||
|
|
_progress = progress;
|
|||
|
|
_isLoadingProgress = false;
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
print('加载学习进度失败: $e');
|
|||
|
|
setState(() {
|
|||
|
|
_isLoadingProgress = false;
|
|||
|
|
// 使用默认进度
|
|||
|
|
_progress = UserVocabularyBookProgress(
|
|||
|
|
id: '0',
|
|||
|
|
userId: '0',
|
|||
|
|
vocabularyBookId: widget.vocabularyBook.id,
|
|||
|
|
learnedWords: 0,
|
|||
|
|
masteredWords: 0,
|
|||
|
|
progressPercentage: 0.0,
|
|||
|
|
streakDays: 0,
|
|||
|
|
totalStudyDays: 0,
|
|||
|
|
averageDailyWords: 0.0,
|
|||
|
|
startedAt: DateTime.now(),
|
|||
|
|
lastStudiedAt: null,
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _handleMenuAction(String action) {
|
|||
|
|
switch (action) {
|
|||
|
|
case 'start_learning':
|
|||
|
|
_startLearning(context);
|
|||
|
|
break;
|
|||
|
|
case 'vocabulary_test':
|
|||
|
|
_startVocabularyTest();
|
|||
|
|
break;
|
|||
|
|
case 'smart_review':
|
|||
|
|
_startSmartReview();
|
|||
|
|
break;
|
|||
|
|
case 'export':
|
|||
|
|
_exportWords();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _startLearning(BuildContext context) async {
|
|||
|
|
// 显示学习目标选择对话框
|
|||
|
|
double selectedGoal = 20.0;
|
|||
|
|
|
|||
|
|
final dailyGoal = await showDialog<int>(
|
|||
|
|
context: context,
|
|||
|
|
builder: (context) => StatefulBuilder(
|
|||
|
|
builder: (context, setState) {
|
|||
|
|
return AlertDialog(
|
|||
|
|
title: const Text('设置学习目标'),
|
|||
|
|
content: Column(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
const Text('请选择每日学习单词数：'),
|
|||
|
|
const SizedBox(height: 8),
|
|||
|
|
Text(
|
|||
|
|
'${selectedGoal.toInt()}个单词',
|
|||
|
|
style: const TextStyle(
|
|||
|
|
fontSize: 24,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
color: Colors.blue,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
Slider(
|
|||
|
|
value: selectedGoal,
|
|||
|
|
min: 5,
|
|||
|
|
max: 50,
|
|||
|
|
divisions: 9,
|
|||
|
|
label: '${selectedGoal.toInt()}个单词',
|
|||
|
|
onChanged: (value) {
|
|||
|
|
setState(() {
|
|||
|
|
selectedGoal = value;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
Row(
|
|||
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|||
|
|
children: [
|
|||
|
|
Text('5', style: TextStyle(color: Colors.grey[600])),
|
|||
|
|
Text('50', style: TextStyle(color: Colors.grey[600])),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
actions: [
|
|||
|
|
TextButton(
|
|||
|
|
onPressed: () => Navigator.of(context).pop(),
|
|||
|
|
child: const Text('取消'),
|
|||
|
|
),
|
|||
|
|
ElevatedButton(
|
|||
|
|
onPressed: () => Navigator.of(context).pop(selectedGoal.toInt()),
|
|||
|
|
child: const Text('开始学习'),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (dailyGoal == null) return;
|
|||
|
|
|
|||
|
|
// 导航到学习页面
|
|||
|
|
final result = await Navigator.of(context).push(
|
|||
|
|
MaterialPageRoute(
|
|||
|
|
builder: (context) => StudyScreen(
|
|||
|
|
vocabularyBook: widget.vocabularyBook,
|
|||
|
|
dailyGoal: dailyGoal,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 学习完成后强制刷新进度（跳过缓存）
|
|||
|
|
if (result == true) {
|
|||
|
|
_loadProgress(forceRefresh: true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _startVocabularyTest() {
|
|||
|
|
Navigator.of(context).pushNamed(
|
|||
|
|
'/vocabulary_test',
|
|||
|
|
arguments: {
|
|||
|
|
'vocabularyBook': widget.vocabularyBook,
|
|||
|
|
'testType': 'bookTest',
|
|||
|
|
'questionCount': 20,
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _startSmartReview() {
|
|||
|
|
final reviewWords = _words.where((word) {
|
|||
|
|
// 这里可以根据学习进度和遗忘曲线来筛选需要复习的单词
|
|||
|
|
// 暂时返回所有单词
|
|||
|
|
return true;
|
|||
|
|
}).toList();
|
|||
|
|
|
|||
|
|
if (reviewWords.isEmpty) {
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
const SnackBar(content: Text('暂无需要复习的单词')),
|
|||
|
|
);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Navigator.of(context).pushNamed(
|
|||
|
|
'/smart_review',
|
|||
|
|
arguments: {
|
|||
|
|
'vocabularyBook': widget.vocabularyBook,
|
|||
|
|
'words': reviewWords,
|
|||
|
|
'reviewMode': 'adaptive',
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _exportWords() {
|
|||
|
|
showDialog(
|
|||
|
|
context: context,
|
|||
|
|
builder: (context) => AlertDialog(
|
|||
|
|
title: const Text('导出单词'),
|
|||
|
|
content: Column(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
ListTile(
|
|||
|
|
leading: const Icon(Icons.text_snippet),
|
|||
|
|
title: const Text('导出为文本文件'),
|
|||
|
|
onTap: () {
|
|||
|
|
Navigator.of(context).pop();
|
|||
|
|
_exportAsText();
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
ListTile(
|
|||
|
|
leading: const Icon(Icons.table_chart),
|
|||
|
|
title: const Text('导出为Excel文件'),
|
|||
|
|
onTap: () {
|
|||
|
|
Navigator.of(context).pop();
|
|||
|
|
_exportAsExcel();
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
ListTile(
|
|||
|
|
leading: const Icon(Icons.picture_as_pdf),
|
|||
|
|
title: const Text('导出为PDF文件'),
|
|||
|
|
onTap: () {
|
|||
|
|
Navigator.of(context).pop();
|
|||
|
|
_exportAsPDF();
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
actions: [
|
|||
|
|
TextButton(
|
|||
|
|
onPressed: () => Navigator.of(context).pop(),
|
|||
|
|
child: const Text('取消'),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _exportAsText() {
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
const SnackBar(content: Text('正在导出为文本文件...')),
|
|||
|
|
);
|
|||
|
|
// TODO: 实现文本导出功能
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _exportAsExcel() {
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
const SnackBar(content: Text('正在导出为Excel文件...')),
|
|||
|
|
);
|
|||
|
|
// TODO: 实现Excel导出功能
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _exportAsPDF() {
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
const SnackBar(content: Text('正在导出为PDF文件...')),
|
|||
|
|
);
|
|||
|
|
// TODO: 实现PDF导出功能
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
return Scaffold(
|
|||
|
|
appBar: TabAppBar(
|
|||
|
|
title: widget.vocabularyBook.name,
|
|||
|
|
controller: _tabController,
|
|||
|
|
tabs: const [
|
|||
|
|
Tab(text: '单词列表'),
|
|||
|
|
Tab(text: '学习进度'),
|
|||
|
|
],
|
|||
|
|
actions: [
|
|||
|
|
IconButton(
|
|||
|
|
icon: Icon(_isSearching ? Icons.close : Icons.search),
|
|||
|
|
onPressed: _toggleSearch,
|
|||
|
|
),
|
|||
|
|
PopupMenuButton<String>(
|
|||
|
|
onSelected: _handleMenuAction,
|
|||
|
|
itemBuilder: (context) => [
|
|||
|
|
const PopupMenuItem(
|
|||
|
|
value: 'start_learning',
|
|||
|
|
child: Row(
|
|||
|
|
children: [
|
|||
|
|
Icon(Icons.school),
|
|||
|
|
SizedBox(width: 8),
|
|||
|
|
Text('开始学习'),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const PopupMenuItem(
|
|||
|
|
value: 'vocabulary_test',
|
|||
|
|
child: Row(
|
|||
|
|
children: [
|
|||
|
|
Icon(Icons.quiz),
|
|||
|
|
SizedBox(width: 8),
|
|||
|
|
Text('词汇测试'),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const PopupMenuItem(
|
|||
|
|
value: 'smart_review',
|
|||
|
|
child: Row(
|
|||
|
|
children: [
|
|||
|
|
Icon(Icons.psychology),
|
|||
|
|
SizedBox(width: 8),
|
|||
|
|
Text('智能复习'),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const PopupMenuItem(
|
|||
|
|
value: 'export',
|
|||
|
|
child: Row(
|
|||
|
|
children: [
|
|||
|
|
Icon(Icons.download),
|
|||
|
|
SizedBox(width: 8),
|
|||
|
|
Text('导出单词'),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
body: Column(
|
|||
|
|
children: [
|
|||
|
|
// 搜索框
|
|||
|
|
if (_isSearching)
|
|||
|
|
Container(
|
|||
|
|
padding: const EdgeInsets.all(16),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: Colors.white,
|
|||
|
|
boxShadow: [
|
|||
|
|
BoxShadow(
|
|||
|
|
color: Colors.black.withOpacity(0.05),
|
|||
|
|
blurRadius: 4,
|
|||
|
|
offset: const Offset(0, 2),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
child: TextField(
|
|||
|
|
controller: _searchController,
|
|||
|
|
autofocus: true,
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
hintText: '搜索单词、音标或释义...',
|
|||
|
|
prefixIcon: const Icon(Icons.search),
|
|||
|
|
suffixIcon: _searchQuery.isNotEmpty
|
|||
|
|
? IconButton(
|
|||
|
|
icon: const Icon(Icons.clear),
|
|||
|
|
onPressed: () {
|
|||
|
|
_searchController.clear();
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
: null,
|
|||
|
|
border: OutlineInputBorder(
|
|||
|
|
borderRadius: BorderRadius.circular(12),
|
|||
|
|
borderSide: BorderSide(color: Colors.grey[300]!),
|
|||
|
|
),
|
|||
|
|
focusedBorder: OutlineInputBorder(
|
|||
|
|
borderRadius: BorderRadius.circular(12),
|
|||
|
|
borderSide: BorderSide(
|
|||
|
|
color: Theme.of(context).primaryColor,
|
|||
|
|
width: 2,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
filled: true,
|
|||
|
|
fillColor: Colors.grey[50],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
// TabBarView
|
|||
|
|
Expanded(
|
|||
|
|
child: TabBarView(
|
|||
|
|
controller: _tabController,
|
|||
|
|
children: [
|
|||
|
|
_buildWordListTab(),
|
|||
|
|
_buildProgressTab(),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
floatingActionButton: _buildFloatingActionButton(),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildFloatingActionButton() {
|
|||
|
|
return Column(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
FloatingActionButton.extended(
|
|||
|
|
onPressed: () => _startLearning(context),
|
|||
|
|
icon: const Icon(Icons.school),
|
|||
|
|
label: const Text('开始学习'),
|
|||
|
|
heroTag: 'start_learning',
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 8),
|
|||
|
|
FloatingActionButton(
|
|||
|
|
onPressed: () => _startVocabularyTest(),
|
|||
|
|
child: const Icon(Icons.quiz),
|
|||
|
|
heroTag: 'vocabulary_test',
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildWordListTab() {
|
|||
|
|
if (_isLoading) {
|
|||
|
|
return const Center(child: LoadingWidget());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (_error != null) {
|
|||
|
|
return Center(
|
|||
|
|
child: custom_error.PageErrorWidget(
|
|||
|
|
message: _error!,
|
|||
|
|
onRetry: _loadVocabularyBookWords,
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (_words.isEmpty) {
|
|||
|
|
return Center(
|
|||
|
|
child: Column(
|
|||
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|||
|
|
children: [
|
|||
|
|
Icon(
|
|||
|
|
Icons.book_outlined,
|
|||
|
|
size: 64,
|
|||
|
|
color: Colors.grey[400],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
Text(
|
|||
|
|
'暂无单词',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: Colors.grey[600],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 8),
|
|||
|
|
Text(
|
|||
|
|
'该词汇书还没有单词',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: Colors.grey[500],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return RefreshIndicator(
|
|||
|
|
onRefresh: _loadVocabularyBookWords,
|
|||
|
|
child: ListView.builder(
|
|||
|
|
controller: _scrollController, // 可以为null，ListView会自动处理
|
|||
|
|
padding: const EdgeInsets.all(16),
|
|||
|
|
itemCount: _filteredWords.length + (_hasMore && _searchQuery.isEmpty ? 1 : 0), // 搜索时不显示加载更多
|
|||
|
|
itemBuilder: (context, index) {
|
|||
|
|
// 搜索结果提示
|
|||
|
|
if (_searchQuery.isNotEmpty && index == 0 && _filteredWords.isEmpty) {
|
|||
|
|
return _buildNoResultsWidget();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果是最后一项且还有更多数据，显示加载指示器
|
|||
|
|
if (index == _filteredWords.length && _searchQuery.isEmpty) {
|
|||
|
|
return _buildLoadingIndicator();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
final word = _filteredWords[index];
|
|||
|
|
return _buildWordCard(word, index);
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 构建无搜索结果提示
|
|||
|
|
Widget _buildNoResultsWidget() {
|
|||
|
|
return Center(
|
|||
|
|
child: Padding(
|
|||
|
|
padding: const EdgeInsets.all(48),
|
|||
|
|
child: Column(
|
|||
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|||
|
|
children: [
|
|||
|
|
Icon(
|
|||
|
|
Icons.search_off,
|
|||
|
|
size: 64,
|
|||
|
|
color: Colors.grey[400],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
Text(
|
|||
|
|
'未找到相关单词',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: Colors.grey[600],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 8),
|
|||
|
|
Text(
|
|||
|
|
'请尝试使用其他关键词搜索',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: Colors.grey[500],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 构建加载更多指示器
|
|||
|
|
Widget _buildLoadingIndicator() {
|
|||
|
|
return Padding(
|
|||
|
|
padding: const EdgeInsets.all(16),
|
|||
|
|
child: Center(
|
|||
|
|
child: Column(
|
|||
|
|
children: [
|
|||
|
|
const CircularProgressIndicator(),
|
|||
|
|
const SizedBox(height: 8),
|
|||
|
|
Text(
|
|||
|
|
'正在加载更多...',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: Colors.grey[600],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildWordCard(Word word, int index) {
|
|||
|
|
return CustomCard(
|
|||
|
|
margin: const EdgeInsets.only(bottom: 12),
|
|||
|
|
child: InkWell(
|
|||
|
|
onTap: () => _showWordDetail(word),
|
|||
|
|
borderRadius: BorderRadius.circular(12),
|
|||
|
|
child: Padding(
|
|||
|
|
padding: const EdgeInsets.all(16),
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Container(
|
|||
|
|
width: 32,
|
|||
|
|
height: 32,
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: Theme.of(context).primaryColor.withOpacity(0.1),
|
|||
|
|
borderRadius: BorderRadius.circular(8),
|
|||
|
|
),
|
|||
|
|
child: Center(
|
|||
|
|
child: Text(
|
|||
|
|
'${index + 1}',
|
|||
|
|
style: TextStyle(
|
|||
|
|
color: Theme.of(context).primaryColor,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 12),
|
|||
|
|
Expanded(
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Text(
|
|||
|
|
word.word,
|
|||
|
|
style: const TextStyle(
|
|||
|
|
fontSize: 18,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
if (word.phonetic != null) ...[
|
|||
|
|
const SizedBox(width: 8),
|
|||
|
|
Text(
|
|||
|
|
word.phonetic!,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: Colors.grey[600],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
if (word.definitions.isNotEmpty) ...[
|
|||
|
|
const SizedBox(height: 4),
|
|||
|
|
Text(
|
|||
|
|
word.definitions.first.translation,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: Colors.grey[700],
|
|||
|
|
),
|
|||
|
|
maxLines: 2,
|
|||
|
|
overflow: TextOverflow.ellipsis,
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
IconButton(
|
|||
|
|
icon: const Icon(Icons.volume_up),
|
|||
|
|
onPressed: () => _playWordPronunciation(word),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
if (word.examples.isNotEmpty) ...[
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
Container(
|
|||
|
|
padding: const EdgeInsets.all(12),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: Colors.grey[100],
|
|||
|
|
borderRadius: BorderRadius.circular(8),
|
|||
|
|
),
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Text(
|
|||
|
|
word.examples.first.sentence,
|
|||
|
|
style: const TextStyle(
|
|||
|
|
fontSize: 13,
|
|||
|
|
fontStyle: FontStyle.italic,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 4),
|
|||
|
|
Text(
|
|||
|
|
word.examples.first.translation,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: Colors.grey[600],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _showWordDetail(Word word) {
|
|||
|
|
showModalBottomSheet(
|
|||
|
|
context: context,
|
|||
|
|
isScrollControlled: true,
|
|||
|
|
backgroundColor: Colors.transparent,
|
|||
|
|
builder: (context) => DraggableScrollableSheet(
|
|||
|
|
initialChildSize: 0.7,
|
|||
|
|
minChildSize: 0.5,
|
|||
|
|
maxChildSize: 0.95,
|
|||
|
|
builder: (context, scrollController) => Container(
|
|||
|
|
decoration: const BoxDecoration(
|
|||
|
|
color: Colors.white,
|
|||
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
|
|||
|
|
),
|
|||
|
|
child: Column(
|
|||
|
|
children: [
|
|||
|
|
Container(
|
|||
|
|
margin: const EdgeInsets.symmetric(vertical: 12),
|
|||
|
|
width: 40,
|
|||
|
|
height: 4,
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: Colors.grey[300],
|
|||
|
|
borderRadius: BorderRadius.circular(2),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
Expanded(
|
|||
|
|
child: ListView(
|
|||
|
|
controller: scrollController,
|
|||
|
|
padding: const EdgeInsets.all(24),
|
|||
|
|
children: [
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Expanded(
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Text(
|
|||
|
|
word.word,
|
|||
|
|
style: const TextStyle(
|
|||
|
|
fontSize: 28,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
if (word.phonetic != null) ...[
|
|||
|
|
const SizedBox(height: 4),
|
|||
|
|
Text(
|
|||
|
|
word.phonetic!,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: Colors.grey[600],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
IconButton(
|
|||
|
|
icon: const Icon(Icons.volume_up, size: 32),
|
|||
|
|
onPressed: () => _playWordPronunciation(word),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 24),
|
|||
|
|
const Text(
|
|||
|
|
'释义',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 18,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
...word.definitions.map((def) => Padding(
|
|||
|
|
padding: const EdgeInsets.only(bottom: 12),
|
|||
|
|
child: Row(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Container(
|
|||
|
|
padding: const EdgeInsets.symmetric(
|
|||
|
|
horizontal: 8,
|
|||
|
|
vertical: 4,
|
|||
|
|
),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: Theme.of(context).primaryColor.withOpacity(0.1),
|
|||
|
|
borderRadius: BorderRadius.circular(4),
|
|||
|
|
),
|
|||
|
|
child: Text(
|
|||
|
|
_getWordTypeText(def.type),
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: Theme.of(context).primaryColor,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 12),
|
|||
|
|
Expanded(
|
|||
|
|
child: Text(
|
|||
|
|
def.translation,
|
|||
|
|
style: const TextStyle(fontSize: 16),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
)),
|
|||
|
|
if (word.examples.isNotEmpty) ...[
|
|||
|
|
const SizedBox(height: 24),
|
|||
|
|
const Text(
|
|||
|
|
'例句',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 18,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
...word.examples.map((example) => Container(
|
|||
|
|
margin: const EdgeInsets.only(bottom: 16),
|
|||
|
|
padding: const EdgeInsets.all(16),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: Colors.grey[100],
|
|||
|
|
borderRadius: BorderRadius.circular(12),
|
|||
|
|
),
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Text(
|
|||
|
|
example.sentence,
|
|||
|
|
style: const TextStyle(
|
|||
|
|
fontSize: 15,
|
|||
|
|
fontStyle: FontStyle.italic,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 8),
|
|||
|
|
Text(
|
|||
|
|
example.translation,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: Colors.grey[700],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
)),
|
|||
|
|
],
|
|||
|
|
if (word.synonyms.isNotEmpty) ...[
|
|||
|
|
const SizedBox(height: 24),
|
|||
|
|
const Text(
|
|||
|
|
'同义词',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 18,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
Wrap(
|
|||
|
|
spacing: 8,
|
|||
|
|
runSpacing: 8,
|
|||
|
|
children: word.synonyms.map((synonym) => Chip(
|
|||
|
|
label: Text(synonym),
|
|||
|
|
backgroundColor: Colors.blue[50],
|
|||
|
|
)).toList(),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
if (word.antonyms.isNotEmpty) ...[
|
|||
|
|
const SizedBox(height: 24),
|
|||
|
|
const Text(
|
|||
|
|
'反义词',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 18,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
Wrap(
|
|||
|
|
spacing: 8,
|
|||
|
|
runSpacing: 8,
|
|||
|
|
children: word.antonyms.map((antonym) => Chip(
|
|||
|
|
label: Text(antonym),
|
|||
|
|
backgroundColor: Colors.orange[50],
|
|||
|
|
)).toList(),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
String _getWordTypeText(WordType type) {
|
|||
|
|
switch (type) {
|
|||
|
|
case WordType.noun:
|
|||
|
|
return 'n.';
|
|||
|
|
case WordType.verb:
|
|||
|
|
return 'v.';
|
|||
|
|
case WordType.adjective:
|
|||
|
|
return 'adj.';
|
|||
|
|
case WordType.adverb:
|
|||
|
|
return 'adv.';
|
|||
|
|
case WordType.pronoun:
|
|||
|
|
return 'pron.';
|
|||
|
|
case WordType.preposition:
|
|||
|
|
return 'prep.';
|
|||
|
|
case WordType.conjunction:
|
|||
|
|
return 'conj.';
|
|||
|
|
case WordType.interjection:
|
|||
|
|
return 'interj.';
|
|||
|
|
case WordType.article:
|
|||
|
|
return 'art.';
|
|||
|
|
case WordType.phrase:
|
|||
|
|
return 'phrase';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _playWordPronunciation(Word word) {
|
|||
|
|
// TODO: 实现音频播放功能
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
SnackBar(content: Text('播放 ${word.word} 的发音')),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildProgressTab() {
|
|||
|
|
if (_isLoadingProgress) {
|
|||
|
|
return const Center(child: LoadingWidget());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (_progress == null) {
|
|||
|
|
return Center(
|
|||
|
|
child: Column(
|
|||
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|||
|
|
children: [
|
|||
|
|
Icon(Icons.trending_up, size: 64, color: Colors.grey[400]),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
Text(
|
|||
|
|
'暂无学习进度',
|
|||
|
|
style: TextStyle(fontSize: 16, color: Colors.grey[600]),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return RefreshIndicator(
|
|||
|
|
onRefresh: () => _loadProgress(forceRefresh: true), // 下拉刷新强制跳过缓存
|
|||
|
|
child: ListView(
|
|||
|
|
padding: const EdgeInsets.all(16),
|
|||
|
|
children: [
|
|||
|
|
// 整体进度卡片
|
|||
|
|
CustomCard(
|
|||
|
|
child: Padding(
|
|||
|
|
padding: const EdgeInsets.all(20),
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Row(
|
|||
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|||
|
|
children: [
|
|||
|
|
const Text(
|
|||
|
|
'整体进度',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 18,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
Container(
|
|||
|
|
padding: const EdgeInsets.symmetric(
|
|||
|
|
horizontal: 12,
|
|||
|
|
vertical: 6,
|
|||
|
|
),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: Theme.of(context).primaryColor.withOpacity(0.1),
|
|||
|
|
borderRadius: BorderRadius.circular(12),
|
|||
|
|
),
|
|||
|
|
child: Text(
|
|||
|
|
'${_progress!.progressPercentage.toStringAsFixed(1)}%',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 16,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
color: Theme.of(context).primaryColor,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 20),
|
|||
|
|
// 进度条
|
|||
|
|
ClipRRect(
|
|||
|
|
borderRadius: BorderRadius.circular(10),
|
|||
|
|
child: LinearProgressIndicator(
|
|||
|
|
value: _progress!.progressPercentage / 100,
|
|||
|
|
minHeight: 20,
|
|||
|
|
backgroundColor: Colors.grey[200],
|
|||
|
|
valueColor: AlwaysStoppedAnimation<Color>(
|
|||
|
|
Theme.of(context).primaryColor,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
// 进度详情
|
|||
|
|
Row(
|
|||
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|||
|
|
children: [
|
|||
|
|
Text(
|
|||
|
|
'${_progress!.learnedWords} / ${widget.vocabularyBook.totalWords} 个单词',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: Colors.grey[600],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
Text(
|
|||
|
|
'剩余 ${widget.vocabularyBook.totalWords - _progress!.learnedWords} 个',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: Colors.grey[600],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
// 单词状态统计
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Expanded(
|
|||
|
|
child: _buildStatCard(
|
|||
|
|
'已学习',
|
|||
|
|
_progress!.learnedWords.toString(),
|
|||
|
|
Icons.school,
|
|||
|
|
Colors.blue,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 12),
|
|||
|
|
Expanded(
|
|||
|
|
child: _buildStatCard(
|
|||
|
|
'已掌握',
|
|||
|
|
_progress!.masteredWords.toString(),
|
|||
|
|
Icons.check_circle,
|
|||
|
|
Colors.green,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Expanded(
|
|||
|
|
child: _buildStatCard(
|
|||
|
|
'待复习',
|
|||
|
|
'0',
|
|||
|
|
Icons.refresh,
|
|||
|
|
Colors.orange,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 12),
|
|||
|
|
Expanded(
|
|||
|
|
child: _buildStatCard(
|
|||
|
|
'未学习',
|
|||
|
|
'${widget.vocabularyBook.totalWords - _progress!.learnedWords}',
|
|||
|
|
Icons.fiber_new,
|
|||
|
|
Colors.grey,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
// 学习信息
|
|||
|
|
CustomCard(
|
|||
|
|
child: Padding(
|
|||
|
|
padding: const EdgeInsets.all(16),
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
const Text(
|
|||
|
|
'学习信息',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 16,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
_buildInfoRow(
|
|||
|
|
Icons.calendar_today,
|
|||
|
|
'累计学习',
|
|||
|
|
'${_progress!.totalStudyDays} 天',
|
|||
|
|
),
|
|||
|
|
const Divider(height: 24),
|
|||
|
|
_buildInfoRow(
|
|||
|
|
Icons.trending_up,
|
|||
|
|
'掌握率',
|
|||
|
|
'${(_progress!.masteredWords / widget.vocabularyBook.totalWords * 100).toStringAsFixed(1)}%',
|
|||
|
|
),
|
|||
|
|
const Divider(height: 24),
|
|||
|
|
_buildInfoRow(
|
|||
|
|
Icons.access_time,
|
|||
|
|
'上次学习',
|
|||
|
|
_progress!.lastStudiedAt != null
|
|||
|
|
? _formatDateTime(_progress!.lastStudiedAt!)
|
|||
|
|
: '从未学习',
|
|||
|
|
),
|
|||
|
|
const Divider(height: 24),
|
|||
|
|
_buildInfoRow(
|
|||
|
|
Icons.play_circle_outline,
|
|||
|
|
'开始时间',
|
|||
|
|
_formatDateTime(_progress!.startedAt),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildStatCard(String label, String value, IconData icon, Color color) {
|
|||
|
|
return CustomCard(
|
|||
|
|
child: Padding(
|
|||
|
|
padding: const EdgeInsets.all(16),
|
|||
|
|
child: Column(
|
|||
|
|
children: [
|
|||
|
|
Container(
|
|||
|
|
padding: const EdgeInsets.all(10),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: color.withOpacity(0.1),
|
|||
|
|
borderRadius: BorderRadius.circular(10),
|
|||
|
|
),
|
|||
|
|
child: Icon(icon, size: 24, color: color),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
Text(
|
|||
|
|
value,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 24,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
color: color,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 4),
|
|||
|
|
Text(
|
|||
|
|
label,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: Colors.grey[600],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildInfoRow(IconData icon, String label, String value) {
|
|||
|
|
return Row(
|
|||
|
|
children: [
|
|||
|
|
Icon(icon, size: 20, color: Colors.grey[600]),
|
|||
|
|
const SizedBox(width: 12),
|
|||
|
|
Expanded(
|
|||
|
|
child: Text(
|
|||
|
|
label,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: Colors.grey[700],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
Text(
|
|||
|
|
value,
|
|||
|
|
style: const TextStyle(
|
|||
|
|
fontSize: 14,
|
|||
|
|
fontWeight: FontWeight.w500,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
String _formatDateTime(DateTime dateTime) {
|
|||
|
|
final now = DateTime.now();
|
|||
|
|
final difference = now.difference(dateTime);
|
|||
|
|
|
|||
|
|
if (difference.inDays == 0) {
|
|||
|
|
if (difference.inHours == 0) {
|
|||
|
|
if (difference.inMinutes == 0) {
|
|||
|
|
return '刚刚';
|
|||
|
|
}
|
|||
|
|
return '${difference.inMinutes} 分钟前';
|
|||
|
|
}
|
|||
|
|
return '${difference.inHours} 小时前';
|
|||
|
|
} else if (difference.inDays == 1) {
|
|||
|
|
return '昨天';
|
|||
|
|
} else if (difference.inDays < 7) {
|
|||
|
|
return '${difference.inDays} 天前';
|
|||
|
|
} else {
|
|||
|
|
return '${dateTime.year}-${dateTime.month.toString().padLeft(2, '0')}-${dateTime.day.toString().padLeft(2, '0')}';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|