Flutter for OpenHarmony 实战：利用本地缓存实现输入内容的自动暂存与恢复

在移动开发领域，我们总是面临着选择与适配。今天，你的Flutter应用在Android和iOS上跑得正欢，明天可能就需要考虑一个新的平台：HarmonyOS（鸿蒙）。这不是一道选答题，而是很多团队正在面对的现实。Flutter的优势很明确——写一套代码，就能在两个主要平台上运行，开发体验流畅。而鸿蒙代表的是下一个时代的互联生态，它不仅仅是手机系统，更着眼于未来全场景的体验。

wulaladx

341人浏览 · 2026-02-06 22:19:59

wulaladx · 2026-02-06 22:19:59 发布

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

前言：跨生态开发的新机遇

在移动开发领域，我们总是面临着选择与适配。今天，你的Flutter应用在Android和iOS上跑得正欢，明天可能就需要考虑一个新的平台：HarmonyOS（鸿蒙）。这不是一道选答题，而是很多团队正在面对的现实。

Flutter的优势很明确——写一套代码，就能在两个主要平台上运行，开发体验流畅。而鸿蒙代表的是下一个时代的互联生态，它不仅仅是手机系统，更着眼于未来全场景的体验。将现有的Flutter应用适配到鸿蒙，听起来像是一个“跨界”任务，但它本质上是一次有价值的技术拓展：让产品触达更多用户，也让技术栈覆盖更广。

不过，这条路走起来并不像听起来那么简单。Flutter和鸿蒙，从底层的架构到上层的工具链，都有着各自的设计逻辑。会遇到一些具体的问题：代码如何组织？原有的功能在鸿蒙上如何实现？那些平台特有的能力该怎么调用？更实际的是，从编译打包到上架部署，整个流程都需要重新摸索。
这篇文章想做的，就是把这些我们趟过的路、踩过的坑，清晰地摊开给你看。我们不会只停留在“怎么做”，还会聊到“为什么得这么做”，以及“如果出了问题该往哪想”。这更像是一份实战笔记，源自真实的项目经验，聚焦于那些真正卡住过我们的环节。

无论你是在为一个成熟产品寻找新的落地平台，还是从一开始就希望构建能面向多端的应用，这里的思路和解决方案都能提供直接的参考。理解了两套体系之间的异同，掌握了关键的衔接技术，不仅能完成这次迁移，更能积累起应对未来技术变化的能力。

混合工程结构深度解析

项目目录架构

当Flutter项目集成鸿蒙支持后，典型的项目结构会发生显著变化。以下是经过ohos_flutter插件初始化后的项目结构：

my_flutter_harmony_app/
├── lib/                          # Flutter业务代码（基本不变）
│   ├── main.dart                 # 应用入口
│   ├── home_page.dart           # 首页
│   └── utils/
│       └── platform_utils.dart  # 平台工具类
├── pubspec.yaml                  # Flutter依赖配置
├── ohos/                         # 鸿蒙原生层（核心适配区）
│   ├── entry/                    # 主模块
│   │   └── src/main/
│   │       ├── ets/              # ArkTS代码
│   │       │   ├── MainAbility/
│   │       │   │   ├── MainAbility.ts       # 主Ability
│   │       │   │   └── MainAbilityContext.ts
│   │       │   └── pages/
│   │       │       ├── Index.ets           # 主页面
│   │       │       └── Splash.ets          # 启动页
│   │       ├── resources/        # 鸿蒙资源文件
│   │       │   ├── base/
│   │       │   │   ├── element/  # 字符串等
│   │       │   │   ├── media/    # 图片资源
│   │       │   │   └── profile/  # 配置文件
│   │       │   └── en_US/        # 英文资源
│   │       └── config.json       # 应用核心配置
│   ├── ohos_test/               # 测试模块
│   ├── build-profile.json5      # 构建配置
│   └── oh-package.json5         # 鸿蒙依赖管理
└── README.md

展示效果图片

flutter 实时预览效果展示
在这里插入图片描述

运行到鸿蒙虚拟设备中效果展示
在这里插入图片描述

功能代码实现

数据模型和缓存逻辑

在开发输入框"后悔药"功能时，首先需要设计清晰的数据模型和缓存逻辑。我们创建了 input_saver_model.dart 文件来实现核心数据结构和缓存功能：

内存缓存实现

由于在某些环境下 path_provider 插件可能不可用，我们采用了内存缓存作为主要存储方式，确保功能在各种情况下都能正常运行：

class InputSaver {
  // 内存缓存作为主要存储方式
  static final Map<String, Map<String, dynamic>> _memoryCache = {};

  // 保存输入内容到内存缓存
  static Future<void> saveInput(String key, String value) async {
    // 先保存到内存缓存
    _memoryCache[key] = {
      'value': value,
      'timestamp': DateTime.now().millisecondsSinceEpoch,
    };
  }

  // 从内存缓存加载输入内容
  static Future<String?> loadInput(String key) async {
    // 先检查内存缓存
    if (_memoryCache.containsKey(key)) {
      final cacheItem = _memoryCache[key];
      if (cacheItem != null) {
        final value = cacheItem['value'];
        return value;
      }
    }

    return null;
  }

  // 清除指定键的缓存
  static Future<void> clearInput(String key) async {
    // 清除内存缓存
    _memoryCache.remove(key);
  }

  // 清除所有缓存
  static Future<void> clearAll() async {
    // 清除内存缓存
    _memoryCache.clear();
  }
}

输入框配置类

为了方便配置不同类型的输入框，我们创建了 InputFieldConfig 类：

// 输入框配置类
class InputFieldConfig {
  final String key;
  final String hintText;
  final int maxLines;
  final bool autofocus;

  InputFieldConfig({
    required this.key,
    required this.hintText,
    this.maxLines = 1,
    this.autofocus = false,
  });
}

输入框组件

输入框组件 input_saver_widget.dart 是核心功能的实现，它负责处理用户输入、自动保存和恢复功能：

核心功能

实时检测用户输入并自动保存
提供"恢复上次输入"按钮
提供"清除"按钮
加载状态提示

实现代码

class InputSaverWidget extends StatefulWidget {
  final InputFieldConfig config;
  final ValueChanged<String>? onChanged;
  final Function()? onSubmit;

  const InputSaverWidget({
    Key? key,
    required this.config,
    this.onChanged,
    this.onSubmit,
  }) : super(key: key);

  @override
  _InputSaverWidgetState createState() => _InputSaverWidgetState();
}

class _InputSaverWidgetState extends State<InputSaverWidget> {
  final TextEditingController _controller = TextEditingController();
  bool _hasCachedContent = false;
  String? _cachedContent;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _loadCachedContent();
    _controller.addListener(_onTextChanged);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  // 加载缓存的内容
  Future<void> _loadCachedContent() async {
    setState(() {
      _isLoading = true;
    });

    try {
      final cachedContent = await InputSaver.loadInput(widget.config.key);
      setState(() {
        if (cachedContent != null && cachedContent.isNotEmpty) {
          _cachedContent = cachedContent;
          _hasCachedContent = true;
        }
        _isLoading = false;
      });
    } catch (e) {
      // 即使加载失败，也只设置 _isLoading 为 false，不清除缓存状态
      setState(() {
        _isLoading = false;
      });
    }
  }

  // 文本变化时自动保存
  void _onTextChanged() {
    final text = _controller.text;
    InputSaver.saveInput(widget.config.key, text);
    
    // 当用户输入时，更新缓存状态
    if (text.isNotEmpty) {
      setState(() {
        _cachedContent = text;
        _hasCachedContent = true;
      });
    }

    if (widget.onChanged != null) {
      widget.onChanged!(text);
    }
  }

  // 恢复上次输入
  void _restoreLastInput() {
    if (_cachedContent != null) {
      setState(() {
        _controller.text = _cachedContent!;
        _hasCachedContent = false;
      });
    }
  }

  // 清除输入和缓存
  void _clearInput() {
    setState(() {
      _controller.clear();
      _hasCachedContent = false;
      _cachedContent = null;
    });
    InputSaver.clearInput(widget.config.key);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 输入框标题
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          child: Text(
            widget.config.hintText,
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),

        // 输入框容器
        Container(
          margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.grey[300]!,
              width: 1,
            ),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Column(
            children: [
              // 输入框
              TextField(
                controller: _controller,
                maxLines: widget.config.maxLines,
                autofocus: widget.config.autofocus,
                decoration: InputDecoration(
                  hintText: widget.config.hintText,
                  border: InputBorder.none,
                  contentPadding: const EdgeInsets.all(16),
                ),
                onSubmitted: (_) {
                  if (widget.onSubmit != null) {
                    widget.onSubmit!();
                  }
                },
              ),

              // 操作按钮
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                decoration: BoxDecoration(
                  border: Border(
                    top: BorderSide(
                      color: Colors.grey[200]!,
                      width: 1,
                    ),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    // 恢复按钮
                    if (_hasCachedContent)
                      TextButton.icon(
                        onPressed: _restoreLastInput,
                        icon: const Icon(
                          Icons.restore,
                          size: 16,
                          color: Colors.blue,
                        ),
                        label: const Text(
                          '恢复上次输入',
                          style: TextStyle(color: Colors.blue),
                        ),
                      ),

                    // 清除按钮
                    if (_controller.text.isNotEmpty)
                      TextButton.icon(
                        onPressed: _clearInput,
                        icon: const Icon(
                          Icons.clear,
                          size: 16,
                          color: Colors.grey,
                        ),
                        label: const Text(
                          '清除',
                          style: TextStyle(color: Colors.grey),
                        ),
                      ),
                  ],
                ),
              ),
            ],
          ),
        ),

        // 状态提示
        if (_isLoading)
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: const Text(
              '正在加载历史记录...',
              style: TextStyle(fontSize: 12, color: Colors.grey),
            ),
          ),
      ],
    );
  }
}

使用方法

InputSaverWidget(
  config: InputFieldConfig(
    key: 'post_content',
    hintText: '写点什么...',
    maxLines: 5,
  ),
  onSubmit: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('内容已提交'),
        duration: Duration(seconds: 1),
      ),
    );
  },
)

主仪表板组件

主仪表板组件 input_saver_dashboard.dart 整合了多个输入框，提供了一个完整的用户界面：

核心功能

管理多个输入框的配置
提供清除所有缓存的功能
显示使用说明
响应式布局设计

实现代码

class InputSaverDashboard extends StatefulWidget {
  const InputSaverDashboard({Key? key}) : super(key: key);

  @override
  _InputSaverDashboardState createState() => _InputSaverDashboardState();
}

class _InputSaverDashboardState extends State<InputSaverDashboard> {
  // 输入框配置
  final List<InputFieldConfig> _inputConfigs = [
    InputFieldConfig(
      key: 'post_content',
      hintText: '写点什么...',
      maxLines: 5,
    ),
    InputFieldConfig(
      key: 'email_subject',
      hintText: '邮件主题',
      maxLines: 1,
    ),
    InputFieldConfig(
      key: 'email_body',
      hintText: '邮件内容',
      maxLines: 4,
    ),
  ];

  // 清除所有缓存
  void _clearAllCache() {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('确认清除'),
          content: const Text('确定要清除所有输入缓存吗？此操作不可恢复。'),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('取消'),
            ),
            TextButton(
              onPressed: () async {
                await InputSaver.clearAll();
                Navigator.of(context).pop();
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('所有缓存已清除'),
                    duration: Duration(seconds: 2),
                  ),
                );
                // 刷新页面
                setState(() {});
              },
              child: const Text('确定'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '输入框"后悔药"',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 8),
                Text(
                  '自动保存输入内容，防止误操作导致内容丢失',
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.grey[600],
                  ),
                ),
              ],
            ),
          ),

          // 输入框列表
          Column(
            children: _inputConfigs.map((config) {
              return InputSaverWidget(
                config: config,
                onSubmit: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('${config.hintText} 已提交'),
                      duration: Duration(seconds: 1),
                    ),
                  );
                },
              );
            }).toList(),
          ),

          // 清除所有缓存按钮
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
            child: ElevatedButton.icon(
              onPressed: _clearAllCache,
              icon: const Icon(Icons.delete_sweep),
              label: const Text('清除所有缓存'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.red,
                foregroundColor: Colors.white,
                minimumSize: const Size(double.infinity, 48),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
            ),
          ),

          // 使用说明
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Container(
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.grey[100],
                borderRadius: BorderRadius.circular(8),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '使用说明',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  SizedBox(height: 8),
                  Text(
                    '1. 输入内容时会自动保存到本地',
                    style: TextStyle(fontSize: 14),
                  ),
                  Text(
                    '2. 误清空后可点击"恢复上次输入"按钮',
                    style: TextStyle(fontSize: 14),
                  ),
                  Text(
                    '3. 提交后内容会继续保存在本地',
                    style: TextStyle(fontSize: 14),
                  ),
                  Text(
                    '4. 可随时清除不需要的缓存',
                    style: TextStyle(fontSize: 14),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

首页集成

最后，我们将输入框"后悔药"功能集成到应用首页，确保用户可以直接在首页使用该功能：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SingleChildScrollView(
        child: InputSaverDashboard(),
      ),
    );
  }
}