Flutter for OpenHarmony《智慧字典》中的沉浸式学习：成语测试与填空练习等功能详解
在移动学习应用中，单纯的知识查阅已无法满足用户需求。互动式、游戏化的学习体验 才是提升用户粘性和知识吸收效率的关键。《智慧字典》App
正是深谙此道，其"成语测试"和"填空练习"两大功能模块，将枯燥的成语学习转变为一场场引人入胜的智力挑战。
完整效果展示
一、成语测试 (IdiomQuizScreen)：选择题中的思辨之旅
成语测试功能采用经典的 四选一选择题 形式，但其设计远不止于此。
1.1 核心数据模型：QuizQuestion
一切的起点是一个简洁而强大的数据模型：
dart
class QuizQuestion {
final String idiom; // 待考的成语
final List<String> options; // 四个选项
final int correctAnswer; // 正确答案的索引 (0-3)
}
这种结构化的方式，使得题目管理变得异常清晰。开发者可以轻松地从本地或网络加载海量题库，为用户提供源源不断的挑战。
1.2 沉浸式交互流程
整个测试过程被设计成一个流畅的线性体验：
-
状态驱动 ：通过
_answered布尔值严格控制用户交互。未作答时，用户可以自由点击选项；一旦作答，选项即被锁定，防止误操作。 -
即时反馈：提交答案后，系统会立刻给予视觉反馈：
- 正确 ：选项背景变为柔和的绿色 (
Colors.green.withOpacity(0.2))，并显示绿色对勾图标。 - 错误 ：用户选择的错误选项变为柔和的红色 (
Colors.red.withOpacity(0.2))，并显示红色叉号图标。同时，正确答案也会高亮显示。
这种 非惩罚性 的即时反馈机制，既能明确告知对错，又不会让用户感到挫败。
- 正确 ：选项背景变为柔和的绿色 (
-
进度可视化 ：顶部的
LinearProgressIndicator和 "题目 X/Y" 文本，让用户时刻掌握自己的进度，减轻了面对未知题量的焦虑感。 -
激励性计分 ：每答对一题得10分，简单的计分规则配合最终的成绩报告，激发了用户的挑战欲和成就感。
1.3 成就感爆棚的结果页
当用户完成所有题目后，会弹出一个精心设计的 AlertDialog：
- 动态图标 ：根据最终得分 (
_score) 动态切换图标。高分 (>=40) 时显示金色的奖杯 (Icons.emoji_events_rounded)，低分时则显示鼓励性的笑脸
(Icons.sentiment_satisfied_rounded)。- 个性化评语 ：评语 (
_getScoreMessage()) 会根据分数段变化，从"太棒了！"到"需要加强学习"，既肯定了高分用户，也为低分用户提供了温和的鼓励和明确的努力方向。- 明确的操作指引："返回"和"再测一次"两个按钮，让用户可以无缝地开始下一轮挑战或回到主界面，形成了完美的学习闭环。
二、填空练习 (FillBlankScreen)：在实践中巩固记忆
如果说"成语测试"考察的是理解，那么"填空练习"则更侧重于 精准记忆和实际应用。
2.1 核心数据模型：FillBlankQuestion
填空题的数据模型同样简洁高效：
dart
class FillBlankQuestion {
final String question; // 包含空白的句子
final String answer; // 完整的成语答案
final String hint; // 关键提示
}
例如：question: '他工作__，从不马虎。', answer: '一丝不苟', hint: '形容办事认真'。
2.2 贴心的学习辅助
填空练习的设计充满了对学习者的人文关怀：
- 上下文语境 ：题目并非孤立地考察成语，而是将其置于一个完整的、有意义的句子中。这有助于用户理解成语的 用法和语境，而非死记硬背。
- 智能提示 (
hint)：每个题目都提供了一个精炼的提示。这个提示通常是成语的核心释义或关键特征。当用户卡壳时，提示能起到"四两拨千斤"的作用，引导其回忆起正确的答案。- 即时验证与鼓励 ：与测试不同，填空练习采用了 即时验证 机制。用户提交后，无论对错，都会立即通过
SnackBar给出反馈（绿色"回答正确！+10分"或红色"回答错误，再试一次"）。答对后，系统会自动进入下一题；答错则清空输入框，鼓励用户再次尝试。这种机制极大地降低了用户的试错成本，营造了轻松、无压力的练习氛围。
2.3 一致的体验与激励
尽管交互模式不同，但填空练习在 进度展示、计分规则和结果页设计 上与成语测试保持了高度一致。这种一致性让用户在不同功能间切换时无需重新学习操作逻辑，提升了整体的用户体验流畅度。
三、总结：寓教于乐的学习引擎
《智慧字典》的"成语测试"和"填空练习"并非简单的功能堆砌，而是一个精心设计的 学习引擎：
- 双轨并行：通过"理解型"（选择）和"应用型"（填空）两种互补的练习模式，全方位巩固用户的成语知识。
- 游戏化设计：积分、进度条、成就反馈等元素，将学习过程游戏化，有效提升了用户的参与度和持久性。
- 以用户为中心：无论是即时反馈、贴心提示，还是鼓励性的结果评语，都处处体现了对学习者心理的深刻洞察和尊重。
🌐 加入社区
欢迎加入 开源鸿蒙跨平台开发者社区 ，获取最新资源与技术支持：
技术因分享而进步，生态因共建而繁荣 。
------ 晚霞的不甘 · 与您共赴鸿蒙跨平台开发之旅
完整代码
bash
import 'package:flutter/material.dart';
void main() {
runApp(const DictionaryApp());
}
class DictionaryApp extends StatelessWidget {
const DictionaryApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '智慧字典',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF6366F1)),
useMaterial3: true,
),
home: const MainScreen(),
);
}
}
class MainScreen extends StatefulWidget {
const MainScreen({super.key});
@override
State<MainScreen> createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
int _currentIndex = 0;
final PageController _pageController = PageController();
final List<Widget> _pages = [
const IdiomTab(),
const EnglishTab(),
const ProfileTab(),
];
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
void _onPageChanged(int index) {
setState(() {
_currentIndex = index;
});
}
void _onTabTapped(int index) {
_pageController.jumpToPage(index);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: _pageController,
onPageChanged: _onPageChanged,
children: _pages,
),
bottomNavigationBar: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, -5),
),
],
),
child: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: _onTabTapped,
selectedItemColor: const Color(0xFF6366F1),
unselectedItemColor: Colors.grey,
selectedFontSize: 14,
unselectedFontSize: 12,
type: BottomNavigationBarType.fixed,
elevation: 0,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.menu_book_rounded),
activeIcon: Icon(Icons.menu_book_rounded),
label: '成语',
),
BottomNavigationBarItem(
icon: Icon(Icons.language_rounded),
activeIcon: Icon(Icons.language_rounded),
label: '英语',
),
BottomNavigationBarItem(
icon: Icon(Icons.person_rounded),
activeIcon: Icon(Icons.person_rounded),
label: '我的',
),
],
),
),
);
}
}
// 成语标签页
class IdiomTab extends StatefulWidget {
const IdiomTab({super.key});
@override
State<IdiomTab> createState() => _IdiomTabState();
}
class _IdiomTabState extends State<IdiomTab> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
// 功能选择卡片
Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
const Color(0xFF667EEA),
const Color(0xFF764BA2),
],
),
),
child: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'成语学习',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: _buildFunctionCard(
icon: Icons.search_rounded,
title: '成语词典',
subtitle: '查找成语释义',
color: const Color(0xFF667EEA),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const DictionaryHomeScreen(),
),
);
},
),
),
const SizedBox(width: 16),
Expanded(
child: _buildFunctionCard(
icon: Icons.quiz_rounded,
title: '成语测试',
subtitle: '测试成语知识',
color: const Color(0xFF30CFD0),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const IdiomQuizScreen(),
),
);
},
),
),
],
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: _buildFunctionCard(
icon: Icons.edit_note_rounded,
title: '填空练习',
subtitle: '完成成语填空',
color: const Color(0xFFFA709A),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const FillBlankScreen(),
),
);
},
),
),
const SizedBox(width: 16),
Expanded(
child: _buildFunctionCard(
icon: Icons.auto_stories_rounded,
title: '每日成语',
subtitle: '学习新成语',
color: const Color(0xFFA8FF78),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const DailyIdiomScreen(),
),
);
},
),
),
],
),
],
),
),
),
// 成语统计
Flexible(
child: Container(
padding: const EdgeInsets.all(24),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(32),
topRight: Radius.circular(32),
),
),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'学习统计',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
_buildStatCard(
icon: Icons.menu_book_rounded,
title: '成语数量',
value: '50',
subtitle: '个成语',
color: const Color(0xFF667EEA),
),
const SizedBox(height: 12),
_buildStatCard(
icon: Icons.check_circle_rounded,
title: '已掌握',
value: '12',
subtitle: '个成语',
color: const Color(0xFF30CFD0),
),
const SizedBox(height: 12),
_buildStatCard(
icon: Icons.school_rounded,
title: '测试次数',
value: '5',
subtitle: '次测试',
color: const Color(0xFFFA709A),
),
const SizedBox(height: 12),
_buildStatCard(
icon: Icons.emoji_events_rounded,
title: '正确率',
value: '85',
suffix: '%',
subtitle: '平均正确率',
color: const Color(0xFFA8FF78),
),
],
),
),
),
),
],
),
);
}
Widget _buildFunctionCard({
required IconData icon,
required String title,
required String subtitle,
required Color color,
required VoidCallback onTap,
}) {
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(20),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: Colors.white.withOpacity(0.3),
width: 2,
),
),
child: Column(
children: [
Icon(
icon,
color: Colors.white,
size: 32,
),
const SizedBox(height: 12),
Text(
title,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
Text(
subtitle,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12,
color: Colors.white.withOpacity(0.8),
),
),
],
),
),
);
}
Widget _buildStatCard({
required IconData icon,
required String title,
required String value,
required String subtitle,
required Color color,
String suffix = '',
}) {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: color.withOpacity(0.3),
width: 1,
),
),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(12),
),
child: Icon(
icon,
color: Colors.white,
size: 24,
),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontSize: 14,
color: Color(0xFF636E72),
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
Row(
children: [
Flexible(
child: Text(
value + suffix,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: color,
),
),
),
const SizedBox(width: 8),
Flexible(
child: Text(
subtitle,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 14,
color: Color(0xFF636E72),
),
),
),
],
),
],
),
),
],
),
);
}
}
// 英语标签页
class EnglishTab extends StatefulWidget {
const EnglishTab({super.key});
@override
State<EnglishTab> createState() => _EnglishTabState();
}
class _EnglishTabState extends State<EnglishTab> {
final TextEditingController _searchController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
const Color(0xFF30CFD0),
const Color(0xFF330867),
],
),
),
child: SafeArea(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'英语学习',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 8),
Text(
'探索英语的世界',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: Colors.white.withOpacity(0.9),
),
),
const SizedBox(height: 32),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
),
child: TextField(
controller: _searchController,
style: const TextStyle(fontSize: 18),
decoration: InputDecoration(
hintText: '搜索英语单词...',
hintStyle: TextStyle(
color: Colors.grey[400],
fontSize: 16,
),
prefixIcon: const Icon(
Icons.search_rounded,
color: Color(0xFF6366F1),
size: 28,
),
border: InputBorder.none,
contentPadding: const EdgeInsets.all(20),
),
),
),
const SizedBox(height: 32),
Flexible(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24),
),
child: const Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.language_rounded,
size: 64,
color: Color(0xFF30CFD0),
),
SizedBox(height: 16),
Text(
'英语功能开发中',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFF2D3436),
),
),
SizedBox(height: 8),
Text(
'敬请期待',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: Color(0xFF636E72),
),
),
],
),
),
),
),
],
),
),
),
),
);
}
}
// 我的标签页
class ProfileTab extends StatefulWidget {
const ProfileTab({super.key});
@override
State<ProfileTab> createState() => _ProfileTabState();
}
class _ProfileTabState extends State<ProfileTab> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
const Color(0xFF667EEA),
const Color(0xFF764BA2),
],
),
),
child: SafeArea(
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 40),
// 用户头像
CircleAvatar(
radius: 50,
backgroundColor: Colors.white,
child: Icon(
Icons.person_rounded,
size: 60,
color: Color(0xFF667EEA),
),
),
const SizedBox(height: 16),
const Text(
'智慧字典',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 8),
Text(
'探索词语的奥秘',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: Colors.white.withOpacity(0.9),
),
),
const SizedBox(height: 40),
// 功能列表
Container(
margin: const EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24),
),
child: Column(
children: [
_buildMenuItem(
icon: Icons.history_rounded,
title: '搜索历史',
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('搜索历史功能开发中')),
);
},
),
_buildMenuItem(
icon: Icons.bookmark_rounded,
title: '我的收藏',
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('我的收藏功能开发中')),
);
},
),
_buildMenuItem(
icon: Icons.download_rounded,
title: '离线词典',
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('离线词典功能开发中')),
);
},
),
_buildMenuItem(
icon: Icons.settings_rounded,
title: '设置',
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('设置功能开发中')),
);
},
),
_buildMenuItem(
icon: Icons.info_rounded,
title: '关于',
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('关于功能开发中')),
);
},
),
],
),
),
const SizedBox(height: 40),
],
),
),
),
),
);
}
Widget _buildMenuItem({
required IconData icon,
required String title,
required VoidCallback onTap,
}) {
return InkWell(
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[200]!,
width: 1,
),
),
),
child: Row(
children: [
Icon(
icon,
color: const Color(0xFF667EEA),
size: 24,
),
const SizedBox(width: 16),
Expanded(
child: Text(
title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
),
Icon(
Icons.chevron_right_rounded,
color: Colors.grey[400],
),
],
),
),
);
}
}
class DictionaryHomeScreen extends StatefulWidget {
const DictionaryHomeScreen({super.key});
@override
State<DictionaryHomeScreen> createState() => _DictionaryHomeScreenState();
}
class _DictionaryHomeScreenState extends State<DictionaryHomeScreen>
with SingleTickerProviderStateMixin {
final TextEditingController _searchController = TextEditingController();
List<DictionaryEntry> _searchResults = [];
bool _isSearching = false;
List<String> _searchHistory = [];
List<String> _searchSuggestions = [];
bool _showSuggestions = false;
late AnimationController _animationController;
late Animation<double> _fadeInAnimation;
// 模拟字典数据
final List<DictionaryEntry> _dictionaryData = [
// 成语类
DictionaryEntry(
word: '一丝不苟',
pinyin: 'yī sī bù gǒu',
partOfSpeech: '成语',
definition: '形容办事认真，连最细微的地方也不马虎。',
examples: [
'他工作一丝不苟，从不马虎。',
'老师批改作业一丝不苟，细致入微。',
'这位医生一丝不苟地检查每一个病人。',
'一丝不苟的工作态度值得我们学习。'
],
relatedWords: ['精益求精', '认真细致', '严谨'],
similarWords: ['粗心大意', '马马虎虎', '敷衍了事'],
type: '成语',
gradient: [const Color(0xFF667EEA), const Color(0xFF764BA2)],
),
DictionaryEntry(
word: '画蛇添足',
pinyin: 'huà shé tiān zú',
partOfSpeech: '成语',
definition: '画蛇时给蛇添上脚。比喻做了多余的事，非但无益，反而不合适。',
examples: [
'这篇作文写得很好，最后几句是画蛇添足。',
'你已经说得很清楚了，再说就是画蛇添足了。',
'不要做画蛇添足的事情，要学会适可而止。',
'他在完美的方案上画蛇添足，反而弄巧成拙。'
],
relatedWords: ['多此一举', '节外生枝', '弄巧成拙'],
similarWords: ['恰如其分', '恰到好处', '画龙点睛'],
type: '成语',
gradient: [const Color(0xFFF093FB), const Color(0xFFF5576C)],
),
DictionaryEntry(
word: '守株待兔',
pinyin: 'shǒu zhū dài tù',
partOfSpeech: '成语',
definition: '比喻希图不经过努力而得到成功的侥幸心理。',
examples: [
'我们不能守株待兔，要主动出击。',
'守株待兔的侥幸心理害人不浅。',
'与其守株待兔，不如积极行动。',
'机会总是留给有准备的人，守株待兔是等不到的。'
],
relatedWords: ['坐享其成', '不劳而获', '妄想'],
similarWords: ['积极进取', '主动出击', '勤奋努力'],
type: '成语',
gradient: [const Color(0xFF4FACFE), const Color(0xFF00F2FE)],
),
DictionaryEntry(
word: '亡羊补牢',
pinyin: 'wáng yáng bǔ láo',
partOfSpeech: '成语',
definition: '比喻出了问题以后想办法补救，可以防止继续受损失。',
examples: [
'虽然失败了，但要亡羊补牢，吸取教训。',
'亡羊补牢，为时不晚。',
'我们要学会亡羊补牢，及时纠正错误。',
'亡羊补牢的故事告诉我们：犯错后要及时改正。'
],
relatedWords: ['知错就改', '及时止损', '吸取教训'],
similarWords: ['执迷不悟', '一错再错', '错上加错'],
type: '成语',
gradient: [const Color(0xFFFA709A), const Color(0xFFFEE140)],
),
DictionaryEntry(
word: '掩耳盗铃',
pinyin: 'yǎn ěr dào líng',
partOfSpeech: '成语',
definition: '比喻自己欺骗自己，明明掩盖不住的事情偏要想法子掩盖。',
examples: [
'他试图掩耳盗铃，逃避责任。',
'掩耳盗铃的做法是自欺欺人。',
'不要掩耳盗铃，要正视自己的错误。',
'掩耳盗铃的结果往往是自欺欺人。'
],
relatedWords: ['自欺欺人', '掩人耳目', '自欺'],
similarWords: ['实事求是', '光明磊落', '坦诚相待'],
type: '成语',
gradient: [const Color(0xFF30CFD0), const Color(0xFF330867)],
),
DictionaryEntry(
word: '刻舟求剑',
pinyin: 'kè zhōu qiú jiàn',
partOfSpeech: '成语',
definition: '比喻拘泥成法，固执不知变通。',
examples: [
'时代在变，我们不能刻舟求剑。',
'刻舟求剑的做法跟不上时代发展。',
'要学会灵活应变，不要刻舟求剑。',
'用刻舟求剑的方式解决新问题是不行的。'
],
relatedWords: ['固步自封', '墨守成规', '抱残守缺'],
similarWords: ['随机应变', '灵活变通', '与时俱进'],
type: '成语',
gradient: [const Color(0xFFA8FF78), const Color(0xFF78FFA8)],
),
DictionaryEntry(
word: '对牛弹琴',
pinyin: 'duì niú tán qín',
partOfSpeech: '成语',
definition: '比喻对不懂道理的人讲道理，对不懂得美的人讲风雅。',
examples: [
'跟他说道理简直是对牛弹琴。',
'对牛弹琴说明没有找对听众。',
'不要对牛弹琴，要因材施教。',
'对牛弹琴的沟通方式效果很差。'
],
relatedWords: ['白费口舌', '徒劳无功', '鸡同鸭讲'],
similarWords: ['因材施教', '对症下药', '有的放矢'],
type: '成语',
gradient: [const Color(0xFFFF9A9E), const Color(0xFFFECFEF)],
),
DictionaryEntry(
word: '井底之蛙',
pinyin: 'jǐng dǐ zhī wā',
partOfSpeech: '成语',
definition: '比喻见识狭窄的人。',
examples: [
'不要做井底之蛙，要开阔眼界。',
'井底之蛙看不到外面的精彩世界。',
'多读书，不要当井底之蛙。',
'井底之蛙的格局限制了发展。'
],
relatedWords: ['目光短浅', '孤陋寡闻', '坐井观天'],
similarWords: ['见多识广', '博学多才', '开阔眼界'],
type: '成语',
gradient: [const Color(0xFFFFF9C), const Color(0xFFFFB199)],
),
DictionaryEntry(
word: '纸上谈兵',
pinyin: 'zhǐ shàng tán bīng',
partOfSpeech: '成语',
definition: '比喻空谈理论，不能解决实际问题。',
examples: [
'不要纸上谈兵，要注重实践。',
'纸上谈兵解决不了实际问题。',
'理论联系实际，避免纸上谈兵。',
'纸上谈兵的人往往缺乏实践经验。'
],
relatedWords: ['空谈理论', '夸夸其谈', '脱离实际'],
similarWords: ['脚踏实地', '实事求是', '身体力行'],
type: '成语',
gradient: [const Color(0xFF89F7FE), const Color(0xFF66A6FF)],
),
DictionaryEntry(
word: '半途而废',
pinyin: 'bàn tú ér fèi',
partOfSpeech: '成语',
definition: '指做事不能坚持到底，中途停顿，有始无终。',
examples: [
'做事要持之以恒，不能半途而废。',
'半途而废是成功的大敌。',
'不要半途而废，坚持就是胜利。',
'半途而废的努力都是白费。'
],
relatedWords: ['前功尽弃', '虎头蛇尾', '有始无终'],
similarWords: ['持之以恒', '善始善终', '坚持到底'],
type: '成语',
gradient: [const Color(0xFFE0C3FC), const Color(0xFF8EC5FC)],
),
DictionaryEntry(
word: '精益求精',
pinyin: 'jīng yì qiú jīng',
partOfSpeech: '成语',
definition: '已经很好了，还要求更好。比喻对事物追求完美。',
examples: [
'我们要精益求精，追求卓越。',
'精益求精的工匠精神值得学习。',
'精益求精是成功的品质之一。',
'精益求精的工作态度创造奇迹。'
],
relatedWords: ['尽善尽美', '完美无缺', '追求卓越'],
similarWords: ['得过且过', '敷衍了事', '粗制滥造'],
type: '成语',
gradient: [const Color(0xFF667EEA), const Color(0xFF764BA2)],
),
DictionaryEntry(
word: '见义勇为',
pinyin: 'jiàn yì yǒng wéi',
partOfSpeech: '成语',
definition: '看到正义的事，就勇敢地去做。',
examples: [
'见义勇为是中华民族的传统美德。',
'我们要学会见义勇为，帮助他人。',
'见义勇为的精神值得弘扬。',
'见义勇为的行为令人敬佩。'
],
relatedWords: ['挺身而出', '见义敢为', '仗义执言'],
similarWords: ['见死不救', '冷漠无情', '袖手旁观'],
type: '成语',
gradient: [const Color(0xFFF093FB), const Color(0xFFF5576C)],
),
DictionaryEntry(
word: '自强不息',
pinyin: 'zì qiáng bù xī',
partOfSpeech: '成语',
definition: '自觉地努力向上，永不松懈。',
examples: [
'自强不息是中华民族的精神。',
'我们要自强不息，奋发图强。',
'自强不息的人才能成就大事。',
'自强不息的精神推动着社会进步。'
],
relatedWords: ['发愤图强', '力争上游', '奋发向上'],
similarWords: ['自暴自弃', '自甘堕落', '自甘平庸'],
type: '成语',
gradient: [const Color(0xFF4FACFE), const Color(0xFF00F2FE)],
),
// 词语类
DictionaryEntry(
word: '学习',
pinyin: 'xué xí',
partOfSpeech: '动词',
definition: '通过阅读、听讲、研究、实践等途径获得知识或技能。',
example: '我们要努力学习科学文化知识。',
examples: [
'学习是终身的伴侣。',
'学习使人进步，不学则退步。',
'学习要有恒心，不能三天打鱼两天晒网。',
'学习方法比学习时间更重要。'
],
relatedWords: ['自学', '研习', '进修'],
similarWords: ['放弃', '荒废', '懈怠'],
type: '词语',
gradient: [const Color(0xFFFA709A), const Color(0xFFFEE140)],
),
DictionaryEntry(
word: '努力',
pinyin: 'nǔ lì',
partOfSpeech: '形容词',
definition: '尽最大力量；尽一切可能。',
example: '他工作非常努力。',
examples: [
'努力不一定成功，但不努力一定失败。',
'努力是成功的基础。',
'努力要讲究方法，方向要对。',
'努力的过程中收获最大。'
],
relatedWords: ['勤奋', '刻苦', '尽力'],
similarWords: ['懒惰', '松懈', '懈怠'],
type: '词语',
gradient: [const Color(0xFF30CFD0), const Color(0xFF330867)],
),
DictionaryEntry(
word: '知识',
pinyin: 'zhī shi',
partOfSpeech: '名词',
definition: '人们在认识世界、改造世界的过程中积累起来的经验。',
example: '知识就是力量。',
examples: ['知识改变命运。', '知识需要不断更新。', '知识在实践中升华。', '知识是无形的财富。'],
relatedWords: ['常识', '学识', '见识'],
similarWords: ['无知', '愚昧', '浅薄'],
type: '词语',
gradient: [const Color(0xFFA8FF78), const Color(0xFF78FFA8)],
),
DictionaryEntry(
word: '文化',
pinyin: 'wén huà',
partOfSpeech: '名词',
definition: '人类在社会实践中所创造的物质财富和精神财富的总和。',
example: '中华文明历史悠久，文化灿烂。',
examples: ['文化需要传承。', '文化促进交流。', '文化是国家的软实力。', '文化自信很重要。'],
relatedWords: ['文明', '艺术', '传统'],
similarWords: ['野蛮', '粗俗', '落后'],
type: '词语',
gradient: [const Color(0xFFFF9A9E), const Color(0xFFFECFEF)],
),
DictionaryEntry(
word: '创新',
pinyin: 'chuàng xīn',
partOfSpeech: '动词',
definition: '抛开旧的，创造新的。',
example: '科技创新推动了社会进步。',
examples: ['创新是发展的动力。', '创新需要勇气。', '创新要立足实际。', '创新带来无限可能。'],
relatedWords: ['改革', '创造', '发明'],
similarWords: ['守旧', '保守', '僵化'],
type: '词语',
gradient: [const Color(0xFFFFF9C), const Color(0xFFFFB199)],
),
// 更多成语
DictionaryEntry(
word: '脚踏实地',
pinyin: 'jiǎo tà shídì',
partOfSpeech: '成语',
definition: '比喻做事踏实，认真。',
examples: [
'我们要脚踏实地，一步一个脚印。',
'脚踏实地的工作作风很重要。',
'学习要脚踏实地，不能好高骛远。',
'脚踏实地是成功的基石。'
],
relatedWords: ['勤勤恳恳', '兢兢业业', '认真踏实'],
similarWords: ['好高骛远', '眼高手低', '虚浮不实'],
type: '成语',
gradient: [const Color(0xFF667EEA), const Color(0xFF764BA2)],
),
DictionaryEntry(
word: '熟能生巧',
pinyin: 'shú néng shēng qiǎo',
partOfSpeech: '成语',
definition: '熟练了就能产生巧办法。',
examples: [
'熟能生巧，多练习就能掌握。',
'熟能生巧是学习的秘诀。',
'熟能生巧，不断重复就能提高。',
'熟能生巧，实践出真知。'
],
relatedWords: ['勤学苦练', '学以致用', '循序渐进'],
similarWords: ['一曝十寒', '眼高手低', '纸上谈兵'],
type: '成语',
gradient: [const Color(0xFFF093FB), const Color(0xFFF5576C)],
),
DictionaryEntry(
word: '持之以恒',
pinyin: 'chí zhī yǐ héng',
partOfSpeech: '成语',
definition: '长久地坚持下去。',
examples: [
'学习要持之以恒，不能三天打鱼两天晒网。',
'持之以恒的努力终将获得回报。',
'只有持之以恒，才能取得成功。',
'持之以恒是成功的关键。'
],
relatedWords: ['坚持不懈', '锲而不舍', '坚持到底'],
similarWords: ['半途而废', '浅尝辄止', '虎头蛇尾'],
type: '成语',
gradient: [const Color(0xFF4FACFE), const Color(0xFF00F2FE)],
),
DictionaryEntry(
word: '循序渐进',
pinyin: 'xún xù jiàn jìn',
partOfSpeech: '成语',
definition: '按一定的顺序、步骤逐渐进步。',
examples: [
'学习要循序渐进，不能急于求成。',
'循序渐进是学习的正确方法。',
'任何事情都要循序渐进，不能好高骛远。',
'循序渐进才能达到目标。'
],
relatedWords: ['一步一个脚印', '按部就班', '逐步推进'],
similarWords: ['急于求成', '好高骛远', '一蹴而就'],
type: '成语',
gradient: [const Color(0xFFFA709A), const Color(0xFFFEE140)],
),
DictionaryEntry(
word: '举一反三',
pinyin: 'jǔ yī fǎn sān',
partOfSpeech: '成语',
definition: '从一件事情类推而知道其他许多事情。',
examples: [
'学习要举一反三，触类旁通。',
'举一反三是学习的重要方法。',
'学会举一反三，事半功倍。',
'举一反三，融会贯通。'
],
relatedWords: ['触类旁通', '融会贯通', '灵活变通'],
similarWords: ['囫囫吞枣', '死记硬背', '生搬硬套'],
type: '成语',
gradient: [const Color(0xFF30CFD0), const Color(0xFF330867)],
),
DictionaryEntry(
word: '温故知新',
pinyin: 'wēn gù zhī xīn',
partOfSpeech: '成语',
definition: '温习旧的，从而得知新的。',
examples: [
'温故知新是学习的有效方法。',
'经常温故知新，知识会更牢固。',
'温故知新，不断进步。',
'温故知新，学而时习之。'
],
relatedWords: ['学而时习', '反复巩固', '温习巩固'],
similarWords: ['学了就忘', '囫囫吞枣', '一曝十寒'],
type: '成语',
gradient: [const Color(0xFFA8FF78), const Color(0xFF78FFA8)],
),
DictionaryEntry(
word: '勤能补拙',
pinyin: 'qín néng bǔ zhuō',
partOfSpeech: '成语',
definition: '勤奋可以弥补天资的不足。',
examples: [
'勤能补拙，笨鸟先飞。',
'勤能补拙，努力就有回报。',
'勤能补拙，成功的天平是平等的。',
'勤能补拙，努力创造奇迹。'
],
relatedWords: ['笨鸟先飞', '勤学苦练', '努力奋斗'],
similarWords: ['自暴自弃', '听天由命', '坐享其成'],
type: '成语',
gradient: [const Color(0xFFFF9A9E), const Color(0xFFFECFEF)],
),
DictionaryEntry(
word: '博览群书',
pinyin: 'bó lǎn qún shū',
partOfSpeech: '成语',
definition: '广泛阅读各种书籍。',
examples: ['要博览群书，开阔眼界。', '博览群书是学习的基础。', '博览群书，知识渊博。', '博览群书，增长见识。'],
relatedWords: ['学富五车', '见多识广', '学识渊博'],
similarWords: ['孤陋寡闻', '井底之蛙', '坐井观天'],
type: '成语',
gradient: [const Color(0xFFFFF9C), const Color(0xFFFFB199)],
),
DictionaryEntry(
word: '知行合一',
pinyin: 'zhī xíng hé yī',
partOfSpeech: '成语',
definition: '认识事物的道理与在现实中运用此道理，是密不可分的一回事。',
examples: ['要知行合一，理论联系实际。', '知行合一是学习的最高境界。', '知行合一，学以致用。', '知行合一，实践出真知。'],
relatedWords: ['学以致用', '理论联系实际', '脚踏实地'],
similarWords: ['纸上谈兵', '空谈理论', '脱离实际'],
type: '成语',
gradient: [const Color(0xFF89F7FE), const Color(0xFF66A6FF)],
),
DictionaryEntry(
word: '博学多才',
pinyin: 'bó xué duō cái',
partOfSpeech: '成语',
definition: '学识广博，有多方面的才能。',
examples: ['我们要博学多才，全面发展。', '博学多才是时代的要求。', '博学多才，适应社会。', '博学多才，成就事业。'],
relatedWords: ['学富五车', '多才多艺', '见多识广'],
similarWords: ['孤陋寡闻', '才疏学浅', '不学无术'],
type: '成语',
gradient: [const Color(0xFFE0C3FC), const Color(0xFF8EC5FC)],
),
];
@override
void initState() {
super.initState();
_animationController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
_fadeInAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
),
);
_animationController.forward();
}
@override
void dispose() {
_searchController.dispose();
_animationController.dispose();
super.dispose();
}
void _performSearch(String query) {
if (query.trim().isEmpty) {
setState(() {
_searchResults = [];
});
return;
}
setState(() {
_isSearching = true;
});
Future.delayed(const Duration(milliseconds: 300), () {
final results = _dictionaryData.where((entry) {
final queryLower = query.toLowerCase();
// 精确匹配词语
if (entry.word == query) return true;
// 模糊匹配词语（包含查询词）
if (entry.word.contains(query)) return true;
// 拼音匹配
if (entry.pinyin.toLowerCase().contains(queryLower)) return true;
// 释义匹配
if (entry.definition.contains(query)) return true;
// 例句匹配
if (entry.examples.any((ex) => ex.contains(query))) return true;
// 相关词语匹配
if (entry.relatedWords.any((word) => word.contains(query))) return true;
// 相似词语匹配
if (entry.similarWords.any((word) => word.contains(query))) return true;
// 首字母匹配（拼音首字母）
final pinyinInitials = _getPinyinInitials(entry.pinyin);
if (pinyinInitials.contains(queryLower)) return true;
return false;
}).toList();
// 保存搜索历史
if (query.isNotEmpty && !_searchHistory.contains(query)) {
setState(() {
_searchHistory.insert(0, query);
if (_searchHistory.length > 15) {
_searchHistory.removeLast();
}
});
}
// 按相关性排序结果
final sortedResults = _sortResultsByRelevance(results, query);
setState(() {
_searchResults = sortedResults;
_isSearching = false;
});
});
}
// 获取拼音首字母
String _getPinyinInitials(String pinyin) {
// 移除音调和空格，只保留首字母
return pinyin
.split(' ')
.map((s) => s.isEmpty ? '' : s[0].toLowerCase())
.join('');
}
// 按相关性排序结果
List<DictionaryEntry> _sortResultsByRelevance(
List<DictionaryEntry> results, String query) {
final queryLower = query.toLowerCase();
return results.toList()
..sort((a, b) {
// 精确匹配优先级最高
if (a.word == query && b.word != query) return -1;
if (b.word == query && a.word != query) return 1;
// 开头匹配优先级次高
final aStartsWith = a.word.startsWith(query);
final bStartsWith = b.word.startsWith(query);
if (aStartsWith && !bStartsWith) return -1;
if (bStartsWith && !aStartsWith) return 1;
// 拼音首字母匹配
final aPinyinMatch = _getPinyinInitials(a.pinyin) == queryLower;
final bPinyinMatch = _getPinyinInitials(b.pinyin) == queryLower;
if (aPinyinMatch && !bPinyinMatch) return -1;
if (bPinyinMatch && !aPinyinMatch) return 1;
// 按词语长度排序（较短的优先）
if (a.word.length != b.word.length) {
return a.word.length.compareTo(b.word.length);
}
return 0;
});
}
// 获取搜索建议
List<String> _getSearchSuggestions(String query) {
if (query.isEmpty) return [];
final queryLower = query.toLowerCase();
final suggestions = <String>[];
// 1. 完全匹配的词语
for (var entry in _dictionaryData) {
if (entry.word == query) {
suggestions.add(entry.word);
break;
}
}
// 2. 以查询开头的词语
for (var entry in _dictionaryData) {
if (entry.word.startsWith(query) && !suggestions.contains(entry.word)) {
suggestions.add(entry.word);
if (suggestions.length >= 5) break;
}
}
// 3. 包含查询的词语
for (var entry in _dictionaryData) {
if (entry.word.contains(query) && !suggestions.contains(entry.word)) {
suggestions.add(entry.word);
if (suggestions.length >= 8) break;
}
}
// 4. 拼音匹配的词语
for (var entry in _dictionaryData) {
if (entry.pinyin.toLowerCase().contains(queryLower) &&
!suggestions.contains(entry.word)) {
suggestions.add(entry.word);
if (suggestions.length >= 10) break;
}
}
return suggestions;
}
// 更新搜索建议
void _updateSearchSuggestions(String query) {
if (query.length >= 1) {
final suggestions = _getSearchSuggestions(query);
setState(() {
_searchSuggestions = suggestions;
_showSuggestions = suggestions.isNotEmpty;
});
} else {
setState(() {
_searchSuggestions = [];
_showSuggestions = false;
});
}
}
// 选择搜索建议
void _selectSuggestion(String suggestion) {
_searchController.text = suggestion;
setState(() {
_showSuggestions = false;
});
_performSearch(suggestion);
}
void _showDetailScreen(DictionaryEntry entry) {
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) =>
DictionaryDetailScreen(entry: entry),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = Offset(1.0, 0.0);
const end = Offset.zero;
const curve = Curves.ease;
var tween =
Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(
position: animation.drive(tween),
child: child,
);
},
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
const Color(0xFF667EEA),
const Color(0xFF764BA2),
const Color(0xFF66A6FF),
],
stops: const [0.0, 0.5, 1.0],
),
),
child: SafeArea(
child: Column(
children: [
// 顶部标题和装饰
Padding(
padding: const EdgeInsets.all(24),
child: FadeTransition(
opacity: _fadeInAnimation,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'智慧字典',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.white,
letterSpacing: 1,
),
),
const SizedBox(height: 8),
Text(
'探索词语的奥秘',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: Colors.white.withOpacity(0.9),
),
),
],
),
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(16),
),
child: const Icon(
Icons.menu_book_outlined,
size: 32,
color: Colors.white,
),
),
],
),
const SizedBox(height: 30),
],
),
),
),
// 搜索栏
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
),
child: TextField(
controller: _searchController,
style: const TextStyle(fontSize: 18),
decoration: InputDecoration(
hintText: '输入词语或文章进行查询...',
hintStyle: TextStyle(
color: Colors.grey[400],
fontSize: 16,
),
prefixIcon: Container(
margin: const EdgeInsets.only(left: 8, right: 4),
child: const Icon(
Icons.search_rounded,
color: Color(0xFF6366F1),
size: 28,
),
),
suffixIcon: _searchController.text.isNotEmpty
? Container(
margin: const EdgeInsets.only(right: 8),
child: IconButton(
icon: const Icon(Icons.close_rounded),
onPressed: () {
_searchController.clear();
setState(() {
_searchResults = [];
});
},
),
)
: Container(
margin: const EdgeInsets.only(right: 12),
child: const Icon(
Icons.mic_rounded,
color: Color(0xFF6366F1),
size: 24,
),
),
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(
vertical: 18,
horizontal: 16,
),
),
onChanged: (value) {
_updateSearchSuggestions(value);
// 只有当用户输入较多内容时才进行实时搜索
if (value.length >= 2) {
_performSearch(value);
}
},
onSubmitted: (value) {
setState(() {
_showSuggestions = false;
});
_performSearch(value);
},
onTap: () {
if (_searchController.text.isNotEmpty) {
_updateSearchSuggestions(_searchController.text);
}
},
),
),
),
// 搜索建议列表
if (_showSuggestions && _searchSuggestions.isNotEmpty)
Container(
margin: const EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, 5),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
padding: const EdgeInsets.all(12),
itemCount: _searchSuggestions.take(6).length,
separatorBuilder: (context, index) => Divider(
height: 1,
color: Colors.grey[200],
),
itemBuilder: (context, index) {
final suggestion = _searchSuggestions[index];
return InkWell(
onTap: () => _selectSuggestion(suggestion),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 12,
horizontal: 16,
),
child: Row(
children: [
Icon(
Icons.search_rounded,
size: 18,
color: Colors.grey[600],
),
const SizedBox(width: 12),
Expanded(
child: Text(
suggestion,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
),
Icon(
Icons.north_west_rounded,
size: 18,
color: Colors.grey[400],
),
],
),
),
);
},
),
// 更多建议提示
if (_searchSuggestions.length > 6)
Padding(
padding: const EdgeInsets.all(12),
child: InkWell(
onTap: () {
_showSuggestions = false;
_performSearch(_searchController.text);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'查看更多 (${_searchSuggestions.length - 6})',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: const Color(0xFF6366F1),
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
],
),
),
SizedBox(height: _showSuggestions ? 16 : 24),
// 搜索结果或推荐区域
Expanded(
child: Container(
margin: const EdgeInsets.only(top: 20),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(32),
topRight: Radius.circular(32),
),
),
child: _isSearching
? const Center(
child: CircularProgressIndicator(),
)
: _searchResults.isEmpty
? _buildEmptyState()
: _buildSearchResults(),
),
),
// 搜索历史浮层
if (_searchHistory.isNotEmpty && _searchController.text.isEmpty)
Positioned(
bottom: 20,
left: 20,
right: 20,
child: _buildSearchHistory(),
),
],
),
),
),
);
}
Widget _buildEmptyState() {
return Stack(
children: [
// 背景装饰
Positioned(
top: -50,
right: -50,
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xFF6366F1).withOpacity(0.05),
),
),
),
Positioned(
bottom: 50,
left: -30,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xFF764BA2).withOpacity(0.05),
),
),
),
// 推荐词汇
Column(
children: [
const Padding(
padding: EdgeInsets.all(24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'每日推荐',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
Text(
'发现更多',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: Color(0xFF6366F1),
),
),
],
),
),
Expanded(
child: ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 24),
itemCount: _dictionaryData.take(5).length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(bottom: 16),
child: _buildRecommendedCard(
_dictionaryData[index],
),
);
},
),
),
],
),
],
);
}
Widget _buildRecommendedCard(DictionaryEntry entry) {
return GestureDetector(
onTap: () {
_searchController.text = entry.word;
_performSearch(entry.word);
},
child: Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: entry.gradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: entry.gradient[0].withOpacity(0.3),
blurRadius: 12,
offset: const Offset(0, 8),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
entry.word,
style: const TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.white,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.3),
borderRadius: BorderRadius.circular(12),
),
child: Text(
entry.partOfSpeech,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 12,
),
),
),
],
),
const SizedBox(height: 8),
Text(
entry.pinyin,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: Colors.white.withOpacity(0.9),
),
),
const SizedBox(height: 12),
Text(
entry.definition,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
color: Colors.white.withOpacity(0.8),
height: 1.5,
),
),
],
),
),
);
}
Widget _buildSearchResults() {
return ListView.builder(
padding: const EdgeInsets.all(24),
itemCount: _searchResults.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(bottom: 16),
child: _buildResultCard(_searchResults[index]),
);
},
);
}
Widget _buildResultCard(DictionaryEntry entry) {
return GestureDetector(
onTap: () => _showDetailScreen(entry),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
blurRadius: 12,
offset: const Offset(0, 4),
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Column(
children: [
// 上半部分：主要信息
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
entry.gradient[0].withOpacity(0.05),
entry.gradient[1].withOpacity(0.05),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Padding(
padding: const EdgeInsets.all(20),
child: Row(
children: [
// 左侧渐变条
Container(
width: 6,
height: 80,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: entry.gradient,
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
borderRadius: BorderRadius.circular(3),
),
),
const SizedBox(width: 16),
// 内容区域
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
entry.word,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
// 操作按钮组
Row(
mainAxisSize: MainAxisSize.min,
children: [
// 发音按钮
_buildActionButton(
icon: Icons.volume_up_rounded,
onTap: () => _speakWord(entry.word),
color: entry.gradient[0],
),
const SizedBox(width: 8),
// 收藏按钮
_buildActionButton(
icon: Icons.bookmark_border_rounded,
onTap: () => _toggleFavorite(entry),
color: entry.gradient[0],
),
],
),
],
),
const SizedBox(height: 6),
Row(
children: [
Text(
entry.pinyin,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
),
),
const SizedBox(width: 12),
// 热度标签
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: Colors.orange.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.local_fire_department,
size: 14,
color: Colors.orange[700],
),
const SizedBox(width: 4),
Text(
'${(entry.word.length * 100 % 500 + 100)}热度',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12,
color: Colors.orange[700],
fontWeight: FontWeight.w500,
),
),
],
),
),
],
),
const SizedBox(height: 10),
// 类型标签
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 4,
),
decoration: BoxDecoration(
color: entry.gradient[0].withOpacity(0.15),
borderRadius: BorderRadius.circular(12),
),
child: Text(
'${entry.partOfSpeech} · ${entry.type}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: entry.gradient[0],
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
],
),
),
),
// 下半部分：详情预览
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 释义
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.grey[50],
borderRadius: BorderRadius.circular(12),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(top: 2),
child: Icon(
Icons.lightbulb_outline_rounded,
size: 16,
color: entry.gradient[0],
),
),
const SizedBox(width: 8),
Expanded(
child: Text(
entry.definition,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 13,
color: Colors.grey[700],
height: 1.5,
),
),
),
],
),
),
const SizedBox(height: 10),
// 例句预览
if (entry.examples.isNotEmpty)
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: entry.gradient[0].withOpacity(0.05),
borderRadius: BorderRadius.circular(12),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(top: 2),
child: Icon(
Icons.format_quote_rounded,
size: 16,
color: entry.gradient[0],
),
),
const SizedBox(width: 8),
Expanded(
child: Text(
entry.examples.first,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12,
color: entry.gradient[0].withOpacity(0.8),
fontStyle: FontStyle.italic,
),
),
),
],
),
),
// 相关词语预览
if (entry.relatedWords.isNotEmpty) ...[
const SizedBox(height: 10),
Wrap(
spacing: 6,
children: entry.relatedWords.take(3).map((word) {
return _buildWordChip(word, entry.gradient[0],
isSmall: true);
}).toList(),
),
],
],
),
),
],
),
),
),
);
}
Widget _buildSearchHistory() {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'搜索历史',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
TextButton(
onPressed: () {
setState(() {
_searchHistory.clear();
});
},
style: TextButton.styleFrom(
foregroundColor: const Color(0xFF6366F1),
),
child: const Text('清除全部'),
),
],
),
const SizedBox(height: 12),
Wrap(
spacing: 10,
runSpacing: 10,
children: _searchHistory.take(6).map((term) {
return InkWell(
onTap: () {
_searchController.text = term;
_performSearch(term);
},
borderRadius: BorderRadius.circular(20),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 10,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFF6366F1).withOpacity(0.1),
const Color(0xFF667EEA).withOpacity(0.1),
],
),
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.history_rounded,
size: 16,
color: const Color(0xFF6366F1),
),
const SizedBox(width: 6),
Text(
term,
style: const TextStyle(
color: Color(0xFF6366F1),
fontSize: 14,
),
),
],
),
),
);
}).toList(),
),
],
),
);
}
// 词语标签组件
Widget _buildWordChip(String word, Color color, {bool isSmall = false}) {
return InkWell(
onTap: () {
_searchController.text = word;
_performSearch(word);
},
borderRadius: BorderRadius.circular(20),
child: Container(
padding: EdgeInsets.symmetric(
horizontal: isSmall ? 12 : 16,
vertical: isSmall ? 6 : 10,
),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: color.withOpacity(0.3),
width: 1,
),
),
child: Text(
word,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: color,
fontSize: isSmall ? 12 : 14,
fontWeight: FontWeight.w600,
),
),
),
);
}
// 发音按钮组件
Widget _buildActionButton({
required IconData icon,
required VoidCallback onTap,
required Color color,
}) {
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Icon(
icon,
color: color,
size: 20,
),
),
);
}
// 朗读词语
void _speakWord(String word) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Row(
children: [
const Icon(Icons.volume_up_rounded, color: Colors.white),
const SizedBox(width: 8),
Text('朗读: $word'),
],
),
backgroundColor: Colors.green,
duration: const Duration(seconds: 1),
),
);
}
// 收藏/取消收藏
void _toggleFavorite(DictionaryEntry entry) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Row(
children: [
const Icon(Icons.favorite_rounded, color: Colors.white),
const SizedBox(width: 8),
Text('已收藏: ${entry.word}'),
],
),
backgroundColor: entry.gradient[0],
duration: const Duration(seconds: 1),
),
);
}
}
// 词语详情页面
class DictionaryDetailScreen extends StatelessWidget {
final DictionaryEntry entry;
const DictionaryDetailScreen({super.key, required this.entry});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
entry.gradient[0],
entry.gradient[1],
],
),
),
child: SafeArea(
child: Column(
children: [
// 顶部导航
Padding(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(16),
),
child: IconButton(
onPressed: () => Navigator.pop(context),
icon: const Icon(
Icons.arrow_back_rounded,
color: Colors.white,
),
),
),
const Text(
'词语详情',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(16),
),
child: IconButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('已添加到收藏'),
backgroundColor: Colors.green,
),
);
},
icon: const Icon(
Icons.favorite_border_rounded,
color: Colors.white,
),
),
),
],
),
),
// 词语卡片
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Column(
children: [
// 主卡片
Container(
padding: const EdgeInsets.all(32),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(32),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 30,
offset: const Offset(0, 20),
),
],
),
child: Column(
children: [
Text(
entry.word,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 56,
fontWeight: FontWeight.bold,
color: Color(0xFF2D3436),
),
),
const SizedBox(height: 12),
Text(
entry.pinyin,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 24,
color: Colors.grey[600],
letterSpacing: 2,
),
),
const SizedBox(height: 20),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 10,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: entry.gradient,
),
borderRadius: BorderRadius.circular(20),
),
child: Text(
entry.partOfSpeech,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
const SizedBox(height: 32),
// 释义
_buildDetailSection(
'释义',
Icons.info_rounded,
entry.gradient[0],
Text(
entry.definition,
maxLines: null,
style: const TextStyle(
fontSize: 18,
height: 1.8,
color: Color(0xFF2D3436),
),
),
),
const SizedBox(height: 24),
// 例句
_buildDetailSection(
'例句',
Icons.format_quote_rounded,
entry.gradient[0],
Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: entry.gradient[0].withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: entry.gradient[0].withOpacity(0.3),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'"',
style: TextStyle(
fontSize: 48,
color: Color(0xFF6366F1),
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 12),
Expanded(
child: Text(
entry.example,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 18,
fontStyle: FontStyle.italic,
height: 1.6,
color: Color(0xFF2D3436),
),
),
),
],
),
),
),
const SizedBox(height: 24),
// 相关词语
_buildDetailSection(
'相关词语',
Icons.link_rounded,
entry.gradient[0],
Wrap(
spacing: 12,
runSpacing: 12,
children: entry.relatedWords.map((word) {
return GestureDetector(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) =>
DictionaryDetailScreen(
entry: DictionaryEntry(
word: word,
pinyin: '',
partOfSpeech: '相关词',
definition: '点击查看详情',
example: '',
relatedWords: [],
gradient: entry.gradient,
),
),
),
);
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 12,
),
decoration: BoxDecoration(
color: entry.gradient[0].withOpacity(0.1),
borderRadius: BorderRadius.circular(24),
border: Border.all(
color: entry.gradient[0].withOpacity(0.3),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(
radius: 12,
backgroundColor: entry.gradient[0],
child: Text(
word[0],
style: const TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(width: 10),
Text(
word,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: entry.gradient[0],
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
],
),
),
);
}).toList(),
),
),
const SizedBox(height: 40),
// 操作按钮
Row(
children: [
Expanded(
child: _buildActionButton(
Icons.share_rounded,
'分享',
() {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('分享成功'),
backgroundColor: Colors.green,
),
);
},
),
),
const SizedBox(width: 16),
Expanded(
child: _buildActionButton(
Icons.copy_rounded,
'复制',
() {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('已复制到剪贴板'),
backgroundColor: Colors.green,
),
);
},
),
),
],
),
],
),
),
),
],
),
),
),
);
}
Widget _buildDetailSection(
String title,
IconData icon,
Color color,
Widget content,
) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Icon(
icon,
color: color,
size: 24,
),
),
const SizedBox(width: 12),
Text(
title,
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Color(0xFF2D3436),
),
),
],
),
const SizedBox(height: 16),
content,
],
);
}
Widget _buildActionButton(IconData icon, String label, VoidCallback onTap) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,
color: const Color(0xFF6366F1),
),
const SizedBox(width: 8),
const Text(
'label',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xFF2D3436),
),
),
],
),
),
);
}
}
// 成语测试页面
class IdiomQuizScreen extends StatefulWidget {
const IdiomQuizScreen({super.key});
@override
State<IdiomQuizScreen> createState() => _IdiomQuizScreenState();
}
class _IdiomQuizScreenState extends State<IdiomQuizScreen> {
final List<QuizQuestion> _questions = [
QuizQuestion(
idiom: '一丝不苟',
options: ['办事认真', '马马虎虎', '粗心大意', '敷衍了事'],
correctAnswer: 0,
),
QuizQuestion(
idiom: '画蛇添足',
options: ['恰到好处', '画龙点睛', '做多余的事', '精益求精'],
correctAnswer: 2,
),
QuizQuestion(
idiom: '守株待兔',
options: ['主动出击', '侥幸心理', '努力奋斗', '积极进取'],
correctAnswer: 1,
),
QuizQuestion(
idiom: '亡羊补牢',
options: ['及时补救', '放弃治疗', '听天由命', '无动于衷'],
correctAnswer: 0,
),
QuizQuestion(
idiom: '掩耳盗铃',
options: ['光明磊落', '实事求是', '自欺欺人', '坦诚相待'],
correctAnswer: 2,
),
];
int _currentQuestionIndex = 0;
int _score = 0;
bool _answered = false;
int? _selectedAnswer;
@override
Widget build(BuildContext context) {
final currentQuestion = _questions[_currentQuestionIndex];
return Scaffold(
appBar: AppBar(
title: const Text('成语测试'),
backgroundColor: const Color(0xFF667EEA),
foregroundColor: Colors.white,
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
const Color(0xFF667EEA).withOpacity(0.1),
const Color(0xFF764BA2).withOpacity(0.1),
],
),
),
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
children: [
// 进度条
Container(
margin: const EdgeInsets.only(bottom: 24),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'题目 ${_currentQuestionIndex + 1}/${_questions.length}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
Text(
'得分: $_score',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Color(0xFF667EEA),
),
),
],
),
const SizedBox(height: 8),
LinearProgressIndicator(
value: (_currentQuestionIndex + 1) / _questions.length,
backgroundColor: Colors.grey[300],
valueColor: const AlwaysStoppedAnimation<Color>(
Color(0xFF667EEA),
),
),
],
),
),
// 问题卡片
Container(
padding: const EdgeInsets.all(32),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, 5),
),
],
),
child: Column(
children: [
Text(
currentQuestion.idiom,
style: const TextStyle(
fontSize: 36,
fontWeight: FontWeight.bold,
color: Color(0xFF667EEA),
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 16),
Text(
'这个成语的意思是什么？',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 18,
color: Colors.grey[600],
),
),
],
),
),
const SizedBox(height: 32),
// 选项
...currentQuestion.options.asMap().entries.map((entry) {
final index = entry.key;
final option = entry.value;
final isSelected = _selectedAnswer == index;
final isCorrect = index == currentQuestion.correctAnswer;
Color? backgroundColor;
Color? textColor;
if (_answered) {
if (isCorrect) {
backgroundColor = Colors.green.withOpacity(0.2);
textColor = Colors.green;
} else if (isSelected) {
backgroundColor = Colors.red.withOpacity(0.2);
textColor = Colors.red;
}
} else if (isSelected) {
backgroundColor = const Color(0xFF667EEA).withOpacity(0.2);
textColor = const Color(0xFF667EEA);
}
return Padding(
padding: const EdgeInsets.only(bottom: 12),
child: InkWell(
onTap: _answered ? null : () => _selectAnswer(index),
borderRadius: BorderRadius.circular(16),
child: Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: backgroundColor ?? Colors.white,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: isSelected
? const Color(0xFF667EEA)
: Colors.grey[300]!,
width: isSelected ? 2 : 1,
),
),
child: Row(
children: [
Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: backgroundColor ?? Colors.grey[200],
shape: BoxShape.circle,
),
child: Center(
child: Text(
String.fromCharCode(65 + index),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: textColor ?? Colors.grey[600],
fontWeight: FontWeight.bold,
),
),
),
),
const SizedBox(width: 16),
Expanded(
child: Text(
option,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: textColor ?? Colors.black87,
fontWeight: FontWeight.w500,
),
),
),
if (_answered && isCorrect)
const Icon(
Icons.check_circle_rounded,
color: Colors.green,
size: 24,
),
if (_answered && isSelected && !isCorrect)
const Icon(
Icons.cancel_rounded,
color: Colors.red,
size: 24,
),
],
),
),
),
);
}).toList(),
const SizedBox(height: 24),
// 下一题/完成按钮
if (_answered)
SizedBox(
width: double.infinity,
height: 56,
child: ElevatedButton(
onPressed: () => _nextQuestion(),
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF667EEA),
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
child: Text(
_currentQuestionIndex < _questions.length - 1
? '下一题'
: '完成测试',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
),
),
);
}
void _selectAnswer(int index) {
setState(() {
_selectedAnswer = index;
_answered = true;
if (index == _questions[_currentQuestionIndex].correctAnswer) {
_score += 10;
}
});
}
void _nextQuestion() {
if (_currentQuestionIndex < _questions.length - 1) {
setState(() {
_currentQuestionIndex++;
_answered = false;
_selectedAnswer = null;
});
} else {
_showResult();
}
}
void _showResult() {
showDialog(
context: context,
builder: (context) => AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
title: const Text(
'测试完成',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Color(0xFF667EEA),
),
),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
_score >= 40
? Icons.emoji_events_rounded
: Icons.sentiment_satisfied_rounded,
size: 80,
color: _score >= 40
? const Color(0xFFA8FF78)
: const Color(0xFF667EEA),
),
const SizedBox(height: 16),
Text(
'你的得分',
style: TextStyle(
fontSize: 16,
color: Colors.grey[600],
),
),
Text(
'$_score',
style: const TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Color(0xFF667EEA),
),
),
const SizedBox(height: 8),
Text(
_getScoreMessage(),
style: TextStyle(
fontSize: 18,
color: Colors.grey[700],
fontWeight: FontWeight.w500,
),
),
],
),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
Navigator.pop(context);
},
child: const Text('返回'),
),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
setState(() {
_currentQuestionIndex = 0;
_score = 0;
_answered = false;
_selectedAnswer = null;
});
},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF667EEA),
),
child: const Text('再测一次'),
),
],
),
);
}
String _getScoreMessage() {
if (_score >= 40) return '太棒了！成语知识很扎实！';
if (_score >= 30) return '不错！继续加油！';
if (_score >= 20) return '还可以，多学习会更好！';
return '需要加强学习，多积累成语！';
}
}
// 填空题页面
class FillBlankScreen extends StatefulWidget {
const FillBlankScreen({super.key});
@override
State<FillBlankScreen> createState() => _FillBlankScreenState();
}
class _FillBlankScreenState extends State<FillBlankScreen> {
final List<FillBlankQuestion> _questions = [
FillBlankQuestion(
question: '他工作__，从不马虎。',
answer: '一丝不苟',
hint: '形容办事认真',
),
FillBlankQuestion(
question: '这篇作文写得很好，最后几句是__。',
answer: '画蛇添足',
hint: '做多余的事',
),
FillBlankQuestion(
question: '虽然失败了，但要__，吸取教训。',
answer: '亡羊补牢',
hint: '出了问题及时补救',
),
FillBlankQuestion(
question: '不要做__的事情，要学会适可而止。',
answer: '掩耳盗铃',
hint: '自己欺骗自己',
),
FillBlankQuestion(
question: '我们要__，追求卓越。',
answer: '精益求精',
hint: '追求完美',
),
];
int _currentQuestionIndex = 0;
int _score = 0;
final TextEditingController _answerController = TextEditingController();
@override
void dispose() {
_answerController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final currentQuestion = _questions[_currentQuestionIndex];
return Scaffold(
appBar: AppBar(
title: const Text('填空练习'),
backgroundColor: const Color(0xFF30CFD0),
foregroundColor: Colors.white,
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
const Color(0xFF30CFD0).withOpacity(0.1),
const Color(0xFF330867).withOpacity(0.1),
],
),
),
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
children: [
// 进度信息
Container(
margin: const EdgeInsets.only(bottom: 24),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'题目 ${_currentQuestionIndex + 1}/${_questions.length}',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
Text(
'得分: $_score',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Color(0xFF30CFD0),
),
),
],
),
const SizedBox(height: 8),
LinearProgressIndicator(
value: (_currentQuestionIndex + 1) / _questions.length,
backgroundColor: Colors.grey[300],
valueColor: const AlwaysStoppedAnimation<Color>(
Color(0xFF30CFD0),
),
),
],
),
),
// 问题卡片
Container(
padding: const EdgeInsets.all(32),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, 5),
),
],
),
child: Column(
children: [
Text(
'完成下列成语填空：',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: Colors.grey[600],
),
),
const SizedBox(height: 16),
Text(
currentQuestion.question,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
height: 1.5,
),
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 16),
if (currentQuestion.hint.isNotEmpty)
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 8,
),
decoration: BoxDecoration(
color: const Color(0xFF30CFD0).withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Text(
'💡 提示: ${currentQuestion.hint}',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
color: const Color(0xFF30CFD0),
),
),
),
],
),
),
const SizedBox(height: 32),
// 答案输入
TextField(
controller: _answerController,
style: const TextStyle(fontSize: 18),
decoration: InputDecoration(
hintText: '输入成语答案...',
hintStyle: TextStyle(
color: Colors.grey[400],
fontSize: 16,
),
prefixIcon: const Icon(
Icons.edit_rounded,
color: Color(0xFF30CFD0),
),
filled: true,
fillColor: Colors.grey[50],
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
contentPadding: const EdgeInsets.all(20),
),
),
const SizedBox(height: 24),
// 提交按钮
SizedBox(
width: double.infinity,
height: 56,
child: ElevatedButton(
onPressed: () => _checkAnswer(),
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF30CFD0),
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
child: const Text(
'提交答案',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
),
),
);
}
void _checkAnswer() {
final userAnswer = _answerController.text.trim();
final correctAnswer = _questions[_currentQuestionIndex].answer;
if (userAnswer == correctAnswer) {
setState(() {
_score += 10;
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: const Row(
children: [
Icon(Icons.check_circle_rounded, color: Colors.white),
SizedBox(width: 8),
Text('回答正确！+10分'),
],
),
backgroundColor: Colors.green,
duration: const Duration(seconds: 2),
),
);
Future.delayed(const Duration(milliseconds: 1500), () {
if (_currentQuestionIndex < _questions.length - 1) {
setState(() {
_currentQuestionIndex++;
_answerController.clear();
});
} else {
_showResult();
}
});
} else {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: const Row(
children: [
Icon(Icons.cancel_rounded, color: Colors.white),
SizedBox(width: 8),
Text('回答错误，再试一次'),
],
),
backgroundColor: Colors.red,
duration: const Duration(seconds: 2),
),
);
_answerController.clear();
}
}
void _showResult() {
showDialog(
context: context,
builder: (context) => AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
title: const Text(
'练习完成',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Color(0xFF30CFD0),
),
),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
_score >= 40
? Icons.emoji_events_rounded
: Icons.sentiment_satisfied_rounded,
size: 80,
color: _score >= 40
? const Color(0xFFA8FF78)
: const Color(0xFF30CFD0),
),
const SizedBox(height: 16),
Text(
'你的得分',
style: TextStyle(
fontSize: 16,
color: Colors.grey[600],
),
),
Text(
'$_score',
style: const TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Color(0xFF30CFD0),
),
),
const SizedBox(height: 8),
Text(
_getScoreMessage(),
style: TextStyle(
fontSize: 18,
color: Colors.grey[700],
fontWeight: FontWeight.w500,
),
),
],
),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
Navigator.pop(context);
},
child: const Text('返回'),
),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
setState(() {
_currentQuestionIndex = 0;
_score = 0;
_answerController.clear();
});
},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF30CFD0),
),
child: const Text('再练一次'),
),
],
),
);
}
String _getScoreMessage() {
if (_score >= 40) return '太棒了！成语掌握得很好！';
if (_score >= 30) return '不错！继续加油！';
if (_score >= 20) return '还可以，多练习会更好！';
return '需要加强学习，多积累成语！';
}
}
// 每日成语页面
class DailyIdiomScreen extends StatefulWidget {
const DailyIdiomScreen({super.key});
@override
State<DailyIdiomScreen> createState() => _DailyIdiomScreenState();
}
class _DailyIdiomScreenState extends State<DailyIdiomScreen> {
final List<DictionaryEntry> _dailyIdioms = [
DictionaryEntry(
word: '持之以恒',
pinyin: 'chí zhī yǐ héng',
partOfSpeech: '成语',
definition: '长久地坚持下去。',
examples: [
'学习要持之以恒，不能三天打鱼两天晒网。',
'持之以恒的努力终将获得回报。',
'只有持之以恒，才能取得成功。',
'持之以恒是成功的关键。'
],
relatedWords: ['坚持不懈', '锲而不舍', '坚持到底'],
similarWords: ['半途而废', '浅尝辄止', '虎头蛇尾'],
type: '成语',
gradient: [const Color(0xFFA8FF78), const Color(0xFF78FFA8)],
),
DictionaryEntry(
word: '脚踏实地',
pinyin: 'jiǎo tà shí dì',
partOfSpeech: '成语',
definition: '比喻做事踏实，认真。',
examples: [
'我们要脚踏实地，一步一个脚印。',
'脚踏实地的工作作风很重要。',
'学习要脚踏实地，不能好高骛远。',
'脚踏实地是成功的基石。'
],
relatedWords: ['勤勤恳恳', '兢兢业业', '认真踏实'],
similarWords: ['好高骛远', '眼高手低', '虚浮不实'],
type: '成语',
gradient: [const Color(0xFFFF9A9E), const Color(0xFFFECFEF)],
),
DictionaryEntry(
word: '熟能生巧',
pinyin: 'shú néng shēng qiǎo',
partOfSpeech: '成语',
definition: '熟练了就能产生巧办法。',
examples: [
'熟能生巧，多练习就能掌握。',
'熟能生巧是学习的秘诀。',
'熟能生巧，不断重复就能提高。',
'熟能生巧，实践出真知。'
],
relatedWords: ['勤学苦练', '学以致用', '循序渐进'],
similarWords: ['一曝十寒', '眼高手低', '纸上谈兵'],
type: '成语',
gradient: [const Color(0xFF89F7FE), const Color(0xFF66A6FF)],
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('每日成语'),
backgroundColor: const Color(0xFFA8FF78),
foregroundColor: Colors.white,
),
body: ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: _dailyIdioms.length,
itemBuilder: (context, index) {
final idiom = _dailyIdioms[index];
return Container(
margin: const EdgeInsets.only(bottom: 16),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: idiom.gradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: idiom.gradient[0].withOpacity(0.3),
blurRadius: 10,
offset: const Offset(0, 5),
),
],
),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DictionaryDetailScreen(entry: idiom),
),
);
},
borderRadius: BorderRadius.circular(20),
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
idiom.word,
style: const TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.white,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(width: 8),
Flexible(
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(12),
),
child: Text(
idiom.pinyin,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),
),
],
),
const SizedBox(height: 12),
Text(
idiom.definition,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: Colors.white.withOpacity(0.9),
height: 1.5,
),
),
],
),
),
),
);
},
),
);
}
}
// 数据模型类
class QuizQuestion {
final String idiom;
final List<String> options;
final int correctAnswer;
QuizQuestion({
required this.idiom,
required this.options,
required this.correctAnswer,
});
}
class FillBlankQuestion {
final String question;
final String answer;
final String hint;
FillBlankQuestion({
required this.question,
required this.answer,
required this.hint,
});
}
// 字典条目数据模型
class DictionaryEntry {
final String word;
final String pinyin;
final String partOfSpeech;
final String definition;
final String example;
final List<String> examples;
final List<String> relatedWords;
final List<String> similarWords;
final String type;
final List<Color> gradient;
DictionaryEntry({
required this.word,
required this.pinyin,
required this.partOfSpeech,
required this.definition,
this.example = '',
this.examples = const [],
this.relatedWords = const [],
this.similarWords = const [],
this.type = '',
required this.gradient,
});
}