Flutter 三方库 cached_network_image 的鸿蒙化适配与实战指南
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

功能特性

前言

Flutter 作为 Google 推出的跨平台 UI 框架，凭借"一套代码，多端运行"的特性，越来越受到开发者的青睐。本文将带你从零开始，使用 Flutter 实现一个简单的计数器应用，并运行在鸿蒙设备上。

一、项目背景

计数器应用虽然简单，但涵盖了 Flutter 开发的核心概念：

• 状态管理：使用 setState 实现数据响应式更新
• Widget 布局：使用 Column、Center 等组件实现布局
• 事件处理：按钮点击事件的处理
• 鸿蒙适配：确保应用在鸿蒙设备上正常运行

二、实现效果

• 页面居中显示计数数字（大字体）
• 底部有一个"点击加 1"按钮
• 点击按钮后数字实时更新
• 适配鸿蒙全屏显示

三、完整代码实现

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '计数器',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const CounterPage(),
    );
  }
}

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

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text(
                '$_count',
                style: const TextStyle(
                  fontSize: 80,
                  fontWeight: FontWeight.bold,
                  color: Color(0xFF333333),
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 80),
            child: SizedBox(
              width: MediaQuery.of(context).size.width * 0.8,
              height: 60,
              child: ElevatedButton(
                onPressed: _increment,
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xFF007DFF),
                  foregroundColor: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                  elevation: 0,
                ),
                child: const Text(
                  '点击加 1',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

四、代码详解

4.1 项目入口

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

main() 函数是 Flutter 应用的入口，调用 runApp() 启动应用。

4.2 无状态组件与有状态组件

class MyApp extends StatelessWidget {  // 无状态组件
  // ...
}

class CounterPage extends StatefulWidget {  // 有状态组件
  // ...
}

组件类型	说明	使用场景
StatelessWidget	无状态，不可变	静态页面、展示型组件
StatefulWidget	有状态，可变	需要交互、数据变化的页面

4.3 状态管理

int _count = 0;

void _increment() {
  setState(() {
    _count++;  // 更新状态
  });
}

setState() 是 Flutter 最基础的状态管理方式，调用后会触发 build() 方法重新执行，从而更新 UI。

4.4 布局结构

Scaffold
└── Column
    ├── Expanded (占据剩余空间)
    │   └── Center (居中)
    │       └── Text (计数数字)
    └── Padding (底部边距)
        └── SizedBox (按钮容器)
            └── ElevatedButton (按钮)

4.5 关键属性解析

数字显示：

Text(
  '$_count',
  style: const TextStyle(
    fontSize: 80,              // 大字体
    fontWeight: FontWeight.bold,
    color: Color(0xFF333333),
  ),
)

按钮样式：

ElevatedButton(
  onPressed: _increment,       // 点击回调
  style: ElevatedButton.styleFrom(
    backgroundColor: const Color(0xFF007DFF),  // 华为蓝
    foregroundColor: Colors.white,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),  // 圆角
    ),
  ),
  child: const Text('点击加 1'),
)

五、鸿蒙设备运行步骤

5.1 环境准备

确保已安装：

• Flutter SDK（支持鸿蒙版本）
• DevEco Studio
• 鸿蒙设备或模拟器

5.2 创建项目

flutter create counter_app
cd counter_app

5.3 运行应用

# 查看可用设备
flutter devices

# 运行到鸿蒙设备
flutter run -d ohos

5.4 在 DevEco Studio 中运行

1. 用 DevEco Studio 打开项目中的 ohos 目录
2. 启动鸿蒙模拟器：Tools → Device Manager
3. 点击 Run 按钮运行应用

六、运行效果

应用运行后，你会看到：

• 屏幕中央显示数字 0
• 底部有一个蓝色的"点击加 1"按钮
• 每次点击按钮，数字会自动加 1 并实时更新
  

七、总结

通过这个简单的计数器应用，我们学习了：

1. Flutter 基本结构：StatelessWidget 和 StatefulWidget 的使用
2. 状态管理：setState() 实现响应式数据绑定
3. 布局方式：使用 Column、Expanded、Center 实现灵活布局
4. 按钮样式：自定义 ElevatedButton 的外观
5. 鸿蒙适配：Flutter 应用在鸿蒙设备上的运行方法

这只是 Flutter 开发的入门，后续可以继续学习更多组件、动画、网络请求、状态管理框架（如 Provider、Riverpod）等内容。

---

如果觉得有帮助，欢迎点赞收藏！ 👍