Flutter 框架跨平台鸿蒙开发 - 法律知识库应用
·
法律知识库应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
法律知识库应用是一款致力于普及法律知识、提升公民法律素养的普法类应用，旨在帮助法律学习者和普通公民系统了解民法典、刑法、劳动法、婚姻家庭法、消费者权益保护法、道路交通安全法六大法律领域。应用以蓝色为主色调，营造庄重专业的法律主题氛围。
应用涵盖了法律分类、案例分析、法律问答、个人中心四大模块，收录了24篇法律条文、6个典型案例、8个常见法律问答。通过条文解读、案例学习、问答互动等功能，帮助用户全面了解法律知识，依法维护自身合法权益。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 法律分类 | 六大法律领域展示 | 网格卡片布局 |
| 法律条文 | 条文内容与要点解读 | 滚动页面展示 |
| 案例分析 | 典型案例学习 | 卡片列表展示 |
| 法律问答 | 常见问题解答 | 可展开列表 |
| 个人中心 | 学习统计与工具 | 列表菜单 |
1.3 法律分类
| 序号 | 分类名称 | 条文数量 | 核心内容 |
|---|---|---|---|
| 1 | 民法典 | 4篇 | 合同订立、不当得利、侵权责任、诉讼时效 |
| 2 | 刑法 | 4篇 | 犯罪概念、正当防卫、自首立功、缓刑适用 |
| 3 | 劳动法 | 4篇 | 劳动合同、试用期、经济补偿、加班工资 |
| 4 | 婚姻家庭法 | 4篇 | 结婚条件、夫妻财产、离婚冷静期、子女抚养 |
| 5 | 消费者权益保护法 | 4篇 | 知情权、退货换货、惩罚性赔偿、个人信息保护 |
| 6 | 道路交通安全法 | 4篇 | 事故处理、酒驾处罚、超速处罚、事故赔偿 |
1.4 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.5 项目结构
lib/
└── main_law_knowledge.dart
├── LawKnowledgeApp # 应用入口
├── LawCategory # 法律分类数据模型
├── LawArticle # 法律条文数据模型
├── LawCase # 案例数据模型
├── QAItem # 问答数据模型
├── MainPage # 主页面（底部导航）
├── HomePage # 法律首页
├── CategoryDetailPage # 分类详情页面
├── ArticleDetailPage # 条文详情页面
├── CasesPage # 案例列表页面
├── CaseDetailPage # 案例详情页面
├── QAPage # 问答页面
└── ProfilePage # 个人中心页面
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 数据流向图
三、核心模块设计
3.1 数据模型设计
3.1.1 法律分类模型 (LawCategory)
class LawCategory {
final String id; // 唯一标识
final String name; // 分类名称
final IconData icon; // 分类图标
final Color color; // 主题颜色
final String description; // 分类描述
final List<LawArticle> articles; // 条文列表
}
3.1.2 法律条文模型 (LawArticle)
class LawArticle {
final String id; // 唯一标识
final String title; // 条文标题
final String content; // 条文内容
final List<String> keyPoints; // 要点解读
final String source; // 法律来源
}
3.1.3 案例模型 (LawCase)
class LawCase {
final String id; // 唯一标识
final String title; // 案例标题
final String category; // 案例分类
final String summary; // 案情摘要
final String detail; // 案情详情
final String judgment; // 判决结果
final String reference; // 法律依据
}
3.1.4 问答模型 (QAItem)
class QAItem {
final String question; // 问题内容
final String answer; // 答案内容
final String category; // 问题分类
final List<String> tags; // 标签列表
}
3.1.5 内容分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 法律首页结构
3.2.3 案例详情页结构
3.2.4 问答页面结构
3.3 案例学习流程
四、UI设计规范
4.1 配色方案
应用采用蓝色为主色调，营造庄重专业的法律主题氛围：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #1565C0 (Blue) | 导航、强调元素 |
| 民法典 | #1565C0 | 蓝色 |
| 刑法 | #D32F2F | 红色 |
| 劳动法 | #388E3C | 绿色 |
| 婚姻家庭法 | #E91E63 | 粉色 |
| 消费者权益保护法 | #FF9800 | 橙色 |
| 道路交通安全法 | #0097A7 | 青色 |
4.2 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 20px | Medium | #000000 |
| 分类名称 | 16px | Bold | #000000 |
| 条文标题 | 16px | Bold | #000000 |
| 条文内容 | 15px | Regular | #424242 |
| 要点解读 | 14px | Regular | #616161 |
| 案例标题 | 16px | Bold | #000000 |
4.3 组件规范
4.3.1 分类卡片
┌─────────────────────┐
│ │
│ ⚖️ │
│ │
│ 民法典 │
│ 4篇条文 │
│ │
└─────────────────────┘
4.3.2 条文列表项
┌─────────────────────────────────────────────────┐
│ ┌────┐ 合同订立 > │
│ │ 📜 │ 《民法典》第四百六十九条 │
│ └────┘ │
└─────────────────────────────────────────────────┘
4.3.3 案例卡片
┌─────────────────────────────────────────────────┐
│ [消费者权益] │
│ │
│ 网购商品退货纠纷案 │
│ │
│ 消费者网购商品后申请七日无理由退货... │
│ [详情] │
└─────────────────────────────────────────────────┘
4.3.4 问答卡片
┌─────────────────────────────────────────────────┐
│ ❓ 租房合同到期后房东不退押金怎么办？ │
│ [押金] [租房] [违约] │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 首先，应与房东协商解决，要求其按照合同... │ │
│ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
五、核心功能实现
5.1 法律分类卡片实现
Widget _buildCategoryCard(BuildContext context, LawCategory category) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CategoryDetailPage(category: category),
),
);
},
child: Container(
decoration: BoxDecoration(
color: category.color.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: category.color.withValues(alpha: 0.3),
),
),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: category.color.withValues(alpha: 0.2),
shape: BoxShape.circle,
),
child: Icon(category.icon, color: category.color, size: 28),
),
Text(category.name, style: TextStyle(fontWeight: FontWeight.bold)),
Text('${category.articles.length}篇条文'),
],
),
),
);
}
5.2 条文详情页实现
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 200,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: Text(article.title),
background: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [categoryColor, categoryColor.withValues(alpha: 0.7)],
),
),
),
),
),
SliverToBoxAdapter(
child: Column(
children: [
_buildSourceInfo(),
_buildContent(),
_buildKeyPoints(),
],
),
),
],
),
);
}
5.3 案例卡片实现
Widget _buildCaseCard(BuildContext context, LawCase caseItem) {
return Card(
margin: const EdgeInsets.only(bottom: 16),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CaseDetailPage(caseItem: caseItem),
),
);
},
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(6),
),
child: Text(caseItem.category),
),
Text(caseItem.title, style: TextStyle(fontWeight: FontWeight.bold)),
Text(caseItem.summary, maxLines: 2, overflow: TextOverflow.ellipsis),
],
),
),
),
);
}
5.4 问答筛选实现
List<QAItem> get _filteredItems {
if (_selectedCategory == '全部') {
return _qaItems;
}
return _qaItems.where((item) => item.category == _selectedCategory).toList();
}
5.5 可展开问答卡片实现
Widget _buildQACard(BuildContext context, QAItem item) {
return Card(
child: ExpansionTile(
leading: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
shape: BoxShape.circle,
),
child: Icon(Icons.help_outline, color: Theme.of(context).colorScheme.primary),
),
title: Text(item.question, style: TextStyle(fontWeight: FontWeight.w500)),
subtitle: Wrap(
spacing: 4,
children: item.tags.map((tag) => Chip(label: Text(tag))).toList(),
),
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(8),
),
child: Text(item.answer, style: TextStyle(height: 1.6)),
),
],
),
);
}
六、交互设计
6.1 法律学习流程
6.2 案例学习交互
6.3 问答浏览流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 搜索功能
增强查找能力：
- 按法律条文搜索
- 按案例关键词搜索
- 按问答标签搜索
7.2.2 收藏功能
个人收藏管理：
- 收藏法律条文
- 收藏典型案例
- 创建学习清单
7.2.3 计算工具
法律计算工具：
- 诉讼时效计算器
- 经济补偿金计算器
- 利息计算器
八、注意事项
8.1 开发注意事项
-
数据模型：LawCategory包含LawArticle列表
-
页面导航：使用Navigator.push进行页面跳转
-
颜色处理：使用withValues方法设置透明度
-
可展开组件：使用ExpansionTile实现问答展开
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 分类颜色不显示 | 颜色值错误 | 检查Color构造函数 |
| 问答无法展开 | ExpansionTile配置错误 | 检查children属性 |
| 案例详情空白 | 数据未传递 | 检查构造函数参数 |
| 筛选不生效 | 状态未更新 | 确保setState调用 |
8.3 法律知识提示
⚖️ 法律小知识 ⚖️
诉讼时效：向人民法院请求保护民事权利的诉讼时效期间为三年。
经济补偿：按劳动者在本单位工作的年限，每满一年支付一个月工资。
正当防卫：对正在进行的不法侵害，采取制止行为，不负刑事责任。
消费者权益：网购商品七日内可无理由退货（特殊商品除外）。
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
9.2 运行命令
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_law_knowledge.dart --web-port 8106
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_law_knowledge.dart
# 运行到Windows
flutter run -d windows -t lib/main_law_knowledge.dart
# 代码分析
flutter analyze lib/main_law_knowledge.dart
十、总结
法律知识库应用通过系统化的法律知识展示，为法律学习者提供了一个便捷的学习平台。应用涵盖了六大法律分类，收录了24篇法律条文、6个典型案例、8个常见法律问答，帮助用户全面了解法律知识。
核心功能涵盖法律分类、条文详情、案例分析、法律问答四大模块。法律分类以网格卡片形式呈现六大领域；条文详情页完整呈现条文内容和要点解读；案例分析支持案情摘要、详情、判决结果、法律依据的完整展示；法律问答支持分类筛选和可展开式答案展示。
应用采用Material Design 3设计规范，以蓝色为主色调，界面庄重专业。通过本应用，希望能够帮助用户提升法律素养，依法维护自身合法权益。
知法守法，依法维权
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)