Flutter开发鸿蒙电商应用：首页布局+底部导航栏实战教程

本文整合两篇实战教程核心内容，以组件化开发和跨平台适配为核心，从开发环境准备、项目架构设计到完整的电商首页布局、底部导航栏实现，带领大家从零构建基于Flutter的鸿蒙电商应用，同时补充性能优化、状态管理等实用技巧，让开发的应用更符合实际开发需求。

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

---

一、开发环境准备

开发鸿蒙Flutter电商应用，需满足以下环境版本要求，同时可灵活选择开发工具，确保环境配置完整后再进行项目初始化。

环境	版本要求	可选开发工具
Flutter SDK	3.x及以上	DevEco Studio（推荐，鸿蒙专属）
Dart	3.x及以上	Android Studio
HarmonyOS API	9+	VS Code

前置配置：确保Flutter SDK已安装并配置环境变量，开发工具中安装Flutter和Dart插件，创建新项目时直接选择Flutter应用模板。

二、项目架构设计与初始化

2.1 核心功能目标

1. 构建完整电商首页UI，包含轮播图、横向分类导航、推荐内容、爆款商品、商品网格列表等核心模块
2. 实现可灵活切换的底部Tab导航系统（首页/分类/购物车/我的）
3. 采用组件化开发模式，抽离公共组件，提升代码可维护性和复用性
4. 支持基础的跨平台适配，兼顾鸿蒙设备的屏幕尺寸差异
5. 预留数据交互和状态管理接口，适配实际业务的网络请求和数据同步

2.2 项目目录规划

在基础组件化架构上，补充数据模型、样式主题目录，让项目结构更规范，适配实际开发的扩展需求，目录结构如下：

lib/
├── components/        # 公共组件库
│   └── Home/          # 首页专用组件
│       ├── HmSlider.dart       # 轮播图组件
│       ├── HmCategory.dart     # 分类导航组件
│       ├── HmSuggestion.dart   # 推荐内容组件
│       ├── HmHot.dart          # 爆款商品组件
│       └── HmMoreList.dart     # 商品网格列表组件
├── pages/             # 页面视图层
│   ├── home/          # 首页视图
│   ├── category/      # 分类页视图
│   ├── cart/          # 购物车页视图
│   ├── profile/       # 个人中心页视图
│   └── main/          # 主容器（含底部导航）
├── models/            # 数据模型层（实体类/数据解析）
├── styles/            # 样式主题（颜色/字体/尺寸适配）
└── main.dart          # 应用程序入口

2.3 项目初始化命令

通过终端执行以下命令，快速创建Flutter项目并生成上述目录结构：

# 创建Flutter项目
flutter create harmonyos_shop_app

# 进入项目目录
cd harmonyos_shop_app

# 递归创建项目目录
mkdir -p lib/components/Home
mkdir -p lib/pages/{home,category,cart,profile,main}
mkdir -p lib/models lib/styles

2.4 依赖库导入

修改项目根目录的pubspec.yaml文件，导入基础依赖库，支持图标、屏幕适配等功能：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.6  # 基础图标库
  flutter_screenutil: ^5.9.0 # 屏幕尺寸适配库
  carousel_slider: ^4.2.1    # 轮播图增强库
  cached_network_image: ^3.3.0 # 图片缓存加载库

依赖配置完成后，执行flutter pub get安装依赖。

三、核心组件开发

3.1 首页专用组件开发

所有首页组件均抽离至lib/components/Home/目录，独立开发、按需引入，便于后续修改和复用，以下为各核心组件的实现代码。

3.1.1 轮播图组件（HmSlider.dart）

基础布局实现，可结合carousel_slider库扩展为可自动轮播、支持图片网络加载的实际版本：

import 'package:flutter/material.dart';

class HmSlider extends StatefulWidget {
  const HmSlider({super.key});

  @override
  State<HmSlider> createState() => _HmSliderState();
}

class _HmSliderState extends State<HmSlider> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: Container(
        color: Colors.blue,
        height: 300,
        alignment: Alignment.center,
        child: const Text(
          '轮播图区域',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    );
  }
}

3.1.2 横向分类导航组件（HmCategory.dart）

实现横向可滚动的分类导航，适配多分类场景：

import 'package:flutter/material.dart';

class HmCategory extends StatefulWidget {
  const HmCategory({super.key});

  @override
  State<HmCategory> createState() => _HmCategoryState();
}

class _HmCategoryState extends State<HmCategory> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            width: 80,
            height: 100,
            color: Colors.blue,
            child: Text("分类$index", style: const TextStyle(color: Colors.white)),
            margin: const EdgeInsets.symmetric(horizontal: 10),
          );
        },
      ),
    );
  }
}

3.1.3 推荐内容组件（HmSuggestion.dart）

import 'package:flutter/material.dart';

class HmSuggestion extends StatefulWidget {
  const HmSuggestion({super.key});

  @override
  State<HmSuggestion> createState() => _HmSuggestionState();
}

class _HmSuggestionState extends State<HmSuggestion> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: Container(
        color: Colors.blue,
        alignment: Alignment.center,
        height: 300,
        child: const Text(
          "推荐内容区域",
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
    );
  }
}

3.1.4 爆款商品组件（HmHot.dart）

import 'package:flutter/material.dart';

class HmHot extends StatefulWidget {
  const HmHot({super.key});

  @override
  State<HmHot> createState() => _HmHotState();
}

class _HmHotState extends State<HmHot> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      color: Colors.blue,
      alignment: Alignment.center,
      child: const Text(
        '爆款商品',
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    );
  }
}

3.1.5 商品网格列表组件（HmMoreList.dart）

基于SliverGrid实现，适配CustomScrollView的滚动体系，实现两列商品网格：

import 'package:flutter/material.dart';

class HmMoreList extends StatefulWidget {
  const HmMoreList({super.key});

  @override
  State<HmMoreList> createState() => _HmMoreListState();
}

class _HmMoreListState extends State<HmMoreList> {
  @override
  Widget build(BuildContext context) {
    return SliverGrid.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, // 两列布局
        mainAxisSpacing: 10, // 纵向间距
        crossAxisSpacing: 10, // 横向间距
        childAspectRatio: 0.8, // 商品卡片宽高比
      ),
      itemCount: 20, // 商品数量
      itemBuilder: (BuildContext context, int index) {
        return Container(
          child: const Text(
            "商品卡片",
            style: TextStyle(color: Colors.white),
          ),
          color: Colors.blue,
          alignment: Alignment.center,
        );
      },
    );
  }
}

3.2 首页组装（核心重点）

使用CustomScrollView + Sliver体系实现电商首页的复杂滚动布局，解决普通ListView嵌套滚动的性能问题，同时将上述开发的首页组件按需组合，实现完整的首页UI：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:harmonyos_shop_app/components/Home/HmCategory.dart';
import 'package:harmonyos_shop_app/components/Home/HmHot.dart';
import 'package:harmonyos_shop_app/components/Home/HmMoreList.dart';
import 'package:harmonyos_shop_app/components/Home/HmSlider.dart';
import 'package:harmonyos_shop_app/components/Home/HmSuggestion.dart';

class HomeView extends StatefulWidget {
  const HomeView({super.key});

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  // 封装滚动子组件，让代码更整洁
  List<Widget> _getScrollChildren() {
    return [
      const SliverToBoxAdapter(child: HmSlider()),
      const SliverToBoxAdapter(child: SizedBox(height: 10)),
      const SliverToBoxAdapter(child: HmCategory()),
      const SliverToBoxAdapter(child: SizedBox(height: 10)),
      const SliverToBoxAdapter(child: HmSuggestion()),
      const SliverToBoxAdapter(child: SizedBox(height: 10)),
      // 爆款商品双列布局
      SliverToBoxAdapter(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10),
          child: Flex(
            direction: Axis.horizontal,
            children: const [
              Expanded(child: HmHot()),
              SizedBox(width: 10),
              Expanded(child: HmHot()),
            ],
          ),
        ),
      ),
      const SliverToBoxAdapter(child: SizedBox(height: 10)),
      // 商品网格列表
      const HmMoreList(),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: _getScrollChildren(),
      physics: const BouncingScrollPhysics(), // 鸿蒙/安卓弹性滚动效果
    );
  }
}

四、其他页面开发

实现分类、购物车、个人中心三个基础页面，保持页面风格统一，预留后续业务功能扩展接口，所有页面均放在lib/pages/对应子目录下。

4.1 分类页面（category/index.dart）

import 'package:flutter/material.dart';

class CategoryView extends StatefulWidget {
  const CategoryView({super.key});

  @override
  State<CategoryView> createState() => _CategoryViewState();
}

class _CategoryViewState extends State<CategoryView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('商品分类'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.category, size: 100, color: Colors.blue),
            SizedBox(height: 20),
            Text(
              '分类页面',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}

4.2 购物车页面（cart/index.dart）

import 'package:flutter/material.dart';

class CartView extends StatefulWidget {
  const CartView({super.key});

  @override
  State<CartView> createState() => _CartViewState();
}

class _CartViewState extends State<CartView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的购物车'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.shopping_cart, size: 100, color: Colors.orange),
            SizedBox(height: 20),
            Text(
              '购物车页面',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}

4.3 个人中心页面（profile/index.dart）

import 'package:flutter/material.dart';

class ProfileView extends StatefulWidget {
  const ProfileView({super.key});

  @override
  State<ProfileView> createState() => _ProfileViewState();
}

class _ProfileViewState extends State<ProfileView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('个人中心'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.person, size: 100, color: Colors.green),
            SizedBox(height: 20),
            Text(
              '我的页面',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}

五、底部导航主框架开发

实现可切换的底部Tab导航系统，优化导航栏样式（选中/未选中颜色区分），使用IndexedStack管理页面切换，保证页面状态不丢失，主框架放在lib/pages/main/index.dart：

import 'package:flutter/material.dart';
import 'package:harmonyos_shop_app/pages/home/index.dart';
import 'package:harmonyos_shop_app/pages/category/index.dart';
import 'package:harmonyos_shop_app/pages/cart/index.dart';
import 'package:harmonyos_shop_app/pages/profile/index.dart';

class MainContainer extends StatefulWidget {
  const MainContainer({super.key});

  @override
  State<MainContainer> createState() => _MainContainerState();
}

class _MainContainerState extends State<MainContainer> {
  // 当前选中的导航索引
  int _currentIndex = 0;

  // 导航对应的页面列表
  final List<Widget> _pages = const [
    HomeView(),
    CategoryView(),
    CartView(),
    ProfileView(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 使用IndexedStack保持页面状态
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        type: BottomNavigationBarType.fixed, // 固定4个导航项，不挤压
        selectedItemColor: Colors.blue, // 选中颜色
        unselectedItemColor: Colors.grey, // 未选中颜色
        selectedFontSize: 12, // 选中字体大小
        unselectedFontSize: 12, // 未选中字体大小
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: '分类',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart),
            label: '购物车',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '我的',
          ),
        ],
      ),
    );
  }
}

六、应用入口配置

在main.dart中完成应用初始化、主题配置，将底部导航主框架作为应用首页，同时配置基础的应用名称和主题风格：

import 'package:flutter/material.dart';
import 'package:harmonyos_shop_app/pages/main/index.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    // 初始化屏幕适配
    return ScreenUtilInit(
      designSize: const Size(375, 812), // 设计稿基准尺寸
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context, child) {
        return MaterialApp(
          title: 'HarmonyOS电商应用',
          debugShowCheckedModeBanner: false, // 隐藏调试标签
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true, // 启用Material3设计
            scaffoldBackgroundColor: Colors.grey[50], // 全局背景色
          ),
          home: const MainContainer(),
        );
      },
    );
  }
}

七、数据交互与性能优化

7.1 数据模型与网络请求

1. 在lib/models/目录下定义商品数据模型（如ProductModel.dart），包含id、名称、价格、图片、库存等字段，使用json_serializable实现json解析；
2. 封装网络请求工具类，使用dio库实现GET/POST请求，处理请求拦截、响应解析、错误处理；
3. 使用FutureBuilder实现商品数据的异步加载，添加加载中、加载失败的状态提示。

简易网络请求示例：

import 'package:dio/dio.dart';
import 'package:harmonyos_shop_app/models/ProductModel.dart';

final Dio _dio = Dio();

// 获取商品列表
Future<List<ProductModel>> fetchProductList() async {
  try {
    final response = await _dio.get('https://api.example.com/products');
    List<dynamic> data = response.data['data'];
    return data.map((json) => ProductModel.fromJson(json)).toList();
  } catch (e) {
    throw Exception('获取商品列表失败：$e');
  }
}

7.2 性能优化要点

1. 列表性能：使用ListView.builder/SliverGrid.builder实现懒加载，避免一次性渲染所有列表项；
2. 图片优化：使用cached_network_image库实现图片缓存，避免重复网络请求，同时设置图片宽高、添加占位图和错误图；
3. 组件优化：将无状态组件改为StatelessWidget，减少不必要的State，使用const构造函数提升组件构建效率；
4. 状态管理：使用Provider/GetX/Bloc实现全局状态管理（如购物车数据），避免组件间层层传参；
5. 骨架屏：使用shimmer库为首页、分类页添加骨架屏，提升用户体验。

7.3 跨平台适配

1. 屏幕适配：基于flutter_screenutil，所有尺寸均使用width()/height()/sp()实现自适应，适配不同鸿蒙设备的屏幕尺寸；
2. 平台检测：通过Platform类检测当前运行平台，实现鸿蒙/安卓/iOS的样式差异化适配；
3. 滚动效果：使用BouncingScrollPhysics实现鸿蒙/安卓的弹性滚动，使用ClampingScrollPhysics实现iOS的滚动效果。

八、项目运行与调试

8.1 鸿蒙设备运行步骤

1. 打开DevEco Studio，选择File → Open，导入Flutter项目目录；
2. 确保鸿蒙模拟器已启动（或真机已连接并开启调试模式）；
3. 等待项目同步完成，检查Flutter和Dart插件是否正常；
4. 点击运行按钮，选择对应的鸿蒙设备，等待应用安装并启动。
   

8.2 调试技巧

1. 使用Flutter DevTools分析应用性能，查看渲染帧率、内存占用、组件构建次数；
2. 开启调试模式，使用print()/debugPrint()打印日志，排查代码问题；
3. 针对鸿蒙设备的兼容性问题，可参考HarmonyOS官方文档，调整Flutter组件的适配参数。

九、项目总结

通过本教程，我们完成了基于Flutter的鸿蒙电商应用的核心开发，掌握了以下关键技能：

1. 鸿蒙环境下Flutter项目的搭建和目录规划，遵循组件化开发思想；
2. 使用CustomScrollView + Sliver体系实现电商首页的复杂滚动布局；
3. 实现可切换、带样式优化的底部Tab导航系统，保证页面状态不丢失；
4. 掌握Flutter组件的抽离、复用和组合，提升代码可维护性；
5. 了解Flutter电商应用的基础数据交互、性能优化和跨平台适配技巧。

✨ 坚持用 清晰的图解 +易懂的硬件架构 + 硬件解析， 让每个知识点都 简单明了 ！
🚀 个人主页 ：一只大侠的侠 · CSDN

💬 座右铭 ： “所谓成功就是以自己的方式度过一生。”