【Flutter For OpenHarmony】TechHub技术资讯界面开发

Betelgeuse76

652人浏览 · 2026-02-04 22:51:28

Betelgeuse76 · 2026-02-04 22:51:28 发布

导语

在之前的实战中，我们虽然实现了网络数据的获取与展示，但“技术资讯”模块依然停留在一个简单的 Demo 阶段：数据源为无意义的文字、UI 交互单一（只有列表并无详情）。

为了让 TechHub 名副其实，我们对内容模块进行了重构。我们引入了技术文章数据模型，实现了 Markdown 详情页渲染，并打通了列表到详情的交互闭环，提升了应用的实用性。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

一、数据源优化：丰富内容维度

1. 扩展数据模型

为了承载丰富的技术文章信息，我们对 Post 模型进行了扩展，不再局限于简单的 title 和 body。

// lib/models/post.dart
class Post {
  final int id;
  final String title;
  final String author;      // 新增：作者
  final String category;    // 新增：分类（如 Flutter/OpenHarmony）
  final String publishDate; // 新增：发布时间
  final String imageUrl;    // 新增：封面图
  // ...
}

2. 模拟真实数据流

在后端 API 尚未就绪的情况下，我们在 ApiService 中通过“数据拦截”的方式，将 jsonplaceholder 返回的数据动态替换为模拟的技术文章数据。

// lib/services/api_service.dart
final List<String> _techTitles = [
  'Flutter 3.0 新特性全解析',
  'OpenHarmony 应用开发入门指南',
  'Dart 语言异步编程最佳实践',
  // ...
];

// 在 fetchPosts 中进行 Mock 注入
return data.map((json) {
  return Post(
    // ...
    title: _techTitles[post.id % _techTitles.length],
    category: post.id % 2 == 0 ? 'Flutter 开发' : 'OpenHarmony 实战',
    // ...
  );
}).toList();

这样，用户在列表中看到的不再是乱码，而是“Flutter 性能优化”、“鸿蒙 ArkUI 实战”等贴近开发者场景的内容。

在这里插入图片描述

二、详情页开发：Markdown 渲染实战

技术文章往往包含大量的代码块、引用和列表，普通的文本组件难以满足展示需求。因此，我们引入了 flutter_markdown 库来提供更好的阅读体验。

1. 依赖添加

在 pubspec.yaml 中添加依赖：

dependencies:
  flutter_markdown: ^0.6.14

2. 构建 PostDetailPage

新建 lib/pages/post_detail_page.dart，我们使用 Markdown 组件来解析和渲染文章内容，并自定义了样式表（StyleSheet）以匹配 App 的设计语言。

Markdown(
  data: markdownContent,
  styleSheet: MarkdownStyleSheet(
    h1: Theme.of(context).textTheme.headlineMedium,
    code: TextStyle(
      backgroundColor: Colors.grey.shade200,
      fontFamily: 'monospace', // 等宽字体显示代码
    ),
    // ...
  ),
)

现在，文章中的 Dart 代码片段、引用块和图片都能被正常渲染。

在这里插入图片描述

三、交互升级：从列表到详情

最后，我们改造了列表页的 Card 组件，使用 InkWell 包裹内容，响应用户的点击事件。

// lib/pages/post_list_page.dart
InkWell(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PostDetailPage(post: post),
      ),
    );
  },
  child: Column(
    // ... 更精致的卡片布局：包含作者头像、分类标签等
  ),
)