Flutter+开源鸿蒙实战｜智联邻里Day3 模拟网络请求+政务服务页面+公告动态渲染

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

摘要

本文承接Day2首页UI与全局组件，进入Flutter业务逻辑开发阶段。Day3主要完成：封装全局网络请求工具、搭建政务服务二级页面、模拟接口请求、社区公告动态数据渲染、鸿蒙网络权限适配、页面跳转传参。全程代码只保留重点5–6行，讲解详细、结构清晰，适配鸿蒙手机/平板/DAYU200开发板，贴合十五五智慧社区数字化服务理念。

<!-- Schema.org 结构化数据 -->
<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"BlogPosting",
  "headline":"Flutter+开源鸿蒙实战 智联邻里Day3 网络封装+政务服务+公告动态渲染",
  "author":{"@type":"Person","name":"鸿蒙跨端开发者"},
  "publisher":{"@type":"Organization","name":"CSDN开源鸿蒙跨平台社区"},
  "datePublished":"2026-05-03",
  "description":"智联邻里Day3：Flutter封装Dio网络请求、政务服务页面开发、模拟接口数据、首页公告动态渲染、鸿蒙网络适配、页面路由跳转传参",
  "keywords":"开源鸿蒙,OpenHarmony,Flutter,智联邻里Day3,Dio网络封装,政务服务页面,动态列表渲染,鸿蒙网络权限"
}
</script>

一、前言

哈喽各位，我们来到智联邻里Day3！

Day1搭项目架构、Day2写首页UI和全局组件，今天不再只写静态页面，正式进入真实业务逻辑：

• 封装Flutter全局网络请求工具类
• 新增政务服务专属页面
• 模拟后端接口，实现网络请求
• 首页公告由静态写死改成动态数据渲染
• 完善鸿蒙网络权限、网络异常提示
• 实现首页点击功能入口跳转到对应页面

依旧老规矩：每段只放核心5–6行代码，不冗余、直接能用，适合照着写毕设/课程设计/比赛项目。

二、Day3 今日开发目标

1. 基于Dio封装Flutter全局网络请求工具类；
2. 新建政务服务页面，复用之前自定义按钮、输入框组件；
3. 模拟社区公告接口，请求数据并动态渲染列表；
4. 完善路由配置，首页点击跳转政务服务页；
5. 适配鸿蒙网络权限、无网络异常提示；
6. 统一加载中、请求失败UI提示。

三、版块1：pubspec新增网络依赖

先加Dio和网络必备依赖，直接复制：

dependencies:
  flutter:
    sdk: flutter
  flutter_screenutil: ^5.9.0
  dio: ^5.4.0

终端执行：

flutter pub get

四、版块2：封装Flutter全局网络工具类

新建 lib/utils/http_util.dart，只保留核心关键代码：

import 'package:dio/dio.dart';

class HttpUtil {
  static final Dio _dio = Dio();

  static Future get(String url) async {
    Response res = await _dio.get(url);
    return res.data;
  }
}

功能说明：
统一封装get请求，后续所有接口直接调用 HttpUtil.get()，不用重复实例化Dio。

五、版块3：鸿蒙网络权限二次确认

打开 android/app/src/main/module.json5，确保已有网络权限：

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET",
    "reason": "访问社区公告与政务服务接口",
    "usedScene": {"ability": ["com.zhilianlinli.app.MainAbility"], "when": "always"}
  }
]

解决鸿蒙设备联网请求失败、接口无响应问题。

六、版块4：新建政务服务页面

新建 lib/pages/service_page.dart，复用自定义组件，核心布局代码：

class ServicePage extends StatelessWidget {
  const ServicePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("政务服务中心")),
      body: Padding(
        padding: EdgeInsets.all(16.w),
        child: Column(
          children: [
            CustomInput(hintText: "请输入身份证号"),
            SizedBox(height: 20.h),
            CustomButton(text: "在线查询办理", onTap: (){}),
          ],
        ),
      ),
    );
  }
}

页面结构极简：输入框 + 办理按钮，后续可扩展社保查询、居住证预约等功能。

七、版块5：注册新页面路由

打开 lib/routes/routes.dart，添加路由：

static const String service = "/service";

static Map<String, WidgetBuilder> routes = {
  home:(context)=>const HomePage(),
  service:(context)=>const ServicePage(),
};

八、版块6：首页点击跳转政务页面

回到首页功能入口按钮，绑定跳转逻辑，核心代码：

CustomButton(
  text: "政务服务",
  onTap: (){
    Navigator.pushNamed(context, Routes.service);
  }
),

点击即可从首页跳转到政务服务页面，路由统一管理，后期好维护。

九、版块7：模拟公告实体类

新建 lib/models/notice_model.dart，精简模型：

class NoticeModel {
  final String title;
  final String content;

  NoticeModel({required this.title, required this.content});
}

十、版块8：首页公告动态网络渲染

在 HomePage 中定义列表与请求方法，核心代码：

List<NoticeModel> noticeList = [];

Future<void> getNoticeData() async {
  var res = await HttpUtil.get("https://xxx/mock/notice");
  setState(() {
    noticeList = res.map<NoticeModel>((e)=>
      NoticeModel(title:e["title"],content:e["content"])
    ).toList();
  });
}

初始化加载：

@override
void initState() {
  super.initState();
  getNoticeData();
}

动态列表渲染核心：

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: noticeList.length,
  itemBuilder: (ctx,index){
    return NoticeCard(
      title: noticeList[index].title,
      content: noticeList[index].content,
    );
  },
)

从此告别静态写死，接口返回几条，页面自动渲染几条。

十一、版块9：增加加载中与网络异常提示

加载状态变量：

bool loading = true;

请求成功关闭加载：

setState(() {
  loading = false;
  noticeList = ...;
});

页面简单占位：

loading 
? Center(child: CircularProgressIndicator())
: ListView.builder(...)

适配鸿蒙弱网、接口卡顿场景，体验更完整。

十二、Day3 开发总结

1. 完成Flutter Dio网络工具类全局封装；
2. 新增政务服务页面，复用Day2自定义组件；
3. 配置路由，实现首页点击跳转二级页面；
4. 完成社区公告接口请求+动态列表渲染；
5. 补齐鸿蒙网络权限、加载状态、异常适配；
6. 完全贴合智慧社区项目业务，为Day4邻里互动、物业报修打下基础。

十三、Day4 下期预告

Day4我们做：

• 邻里互助闲置共享页面
• 发布闲置信息表单
• 本地缓存简单存储发布数据
• 底部导航栏完整搭建，实现首页/服务/邻里/我的Tab切换