文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >专栏 >Flutter for OpenHarmony前置知识《Flutter 状态管理入门实战：使用 Provider 构建计数器应用》

Flutter for OpenHarmony前置知识《Flutter 状态管理入门实战：使用 Provider 构建计数器应用》

作者头像
@VON
发布于 2025-12-21 12:21:14
发布于 2025-12-21 12:21:14
1580
举报
在这里插入图片描述
在这里插入图片描述

🧠使用 Provider 构建计数器应用

在 Flutter 开发中，状态管理（State Management） 是构建可维护、可扩展应用的核心技能之一。本文将通过一个简洁但完整的“计数器”示例，深入讲解如何使用官方推荐的状态管理方案 —— Provider，实现数据驱动 UI 更新。

一、为什么选择 Provider？

Provider 是 Flutter 团队推荐的轻量级状态管理工具，具有以下优势：

  • 基于 InheritedWidget 封装，性能优秀
  • 语法简洁，学习曲线平缓
  • 支持响应式更新（自动 rebuild 相关 Widget）
  • 与 Flutter 框架深度集成，社区支持广泛

二、项目结构概览

整个应用包含四个核心部分：

  1. 状态模型（CounterModel）：管理计数逻辑
  2. 应用入口（main 函数）：注入状态到 Widget 树
  3. 主界面（MyApp）：配置 MaterialApp
  4. 计数器页面（CounterScreen）：展示状态并提供交互

下面我们逐段解析。

三、定义状态模型：CounterModel

代码语言：javascript
复制
class CounterModel with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  void reset() {
    _count = 0;
    notifyListeners();
  }
}
✅ 关键点解析：
  • with ChangeNotifier 使该类具备通知能力。当调用 notifyListeners() 时，所有监听此对象的 Widget 会自动重建。
  • 私有变量 _count + 公共 getter 封装数据，防止外部直接修改，确保状态只能通过方法变更（符合状态管理最佳实践）。
  • notifyListeners() 触发 UI 更新的关键。每次状态改变后必须调用，否则界面不会刷新。

⚠️ 注意：不要在 build 方法中直接调用 notifyListeners()，否则会导致无限循环！

四、应用入口：注入状态

代码语言：javascript
复制
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: const MyApp(),
    ),
  );
}
✅ 关键点解析：
  • ChangeNotifierProvider 是 Provider 提供的专门用于包裹 ChangeNotifier 子类的 Provider。
  • create 回调 在此处创建 CounterModel 实例，并将其“注入”到 Widget 树中。整个 App 的子组件都可以通过 Provider.of 或 Consumer 访问它。
  • 作用域 由于放在 MyApp 外层，CounterModel 对整个应用可见。

五、 主界面：MyApp

代码语言：javascript
复制
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider 状态管理测试',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CounterScreen(),
    );
  }
}

这是一个标准的 Flutter 应用壳，无特殊逻辑，仅用于启动 CounterScreen 页面。

六、 计数器页面：CounterScreen

代码语言：javascript
复制
class CounterScreen extends StatelessWidget {
  const CounterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterModel>(context);

    return Scaffold(
      appBar: AppBar(title: const Text('VON - 状态管理测试')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('当前计数:', style: TextStyle(fontSize: 18)),
            Consumer<CounterModel>(
              builder: (context, model, child) {
                return Text('${model.count}', style: TextStyle(fontSize: 48));
              },
            ),
            ElevatedButton(onPressed: counter.increment, child: Text('➕ 增加')),
            ElevatedButton(onPressed: counter.reset, child: Text('↺ 重置')),
          ],
        ),
      ),
    );
  }
}
✅ 关键点解析：
（1）读取状态：Provider.of
代码语言：javascript
复制
final counter = Provider.of<CounterModel>(context);
  • 这行代码从上下文中获取 CounterModel 实例。
  • 默认情况下，Provider.of 会监听变化（即当 notifyListeners() 被调用时，当前 Widget 会 rebuild）。

🔍 如果你只想读取一次而不监听，可传入 listen: false： Provider.of<CounterModel>(context, listen: false)

（2）响应式显示：Consumer
代码语言：javascript
复制
Consumer<CounterModel>(
  builder: (context, model, child) {
    return Text('${model.count}');
  },
)
  • Consumer 是一种更精细的监听方式，只重建其内部的 builder 部分，而非整个 CounterScreen。
  • 推荐用于局部状态更新，提升性能。

💡 在本例中，其实两种方式效果相同。但若页面复杂，Consumer 更高效。

（3）事件绑定
代码语言：javascript
复制
onPressed: counter.increment
  • 直接调用状态模型中的方法，触发状态变更 → 自动通知 UI 更新。

七、运行效果与总结

当你运行此应用：

  • 初始显示 0
  • 点击“增加” → 数字递增
  • 点击“重置” → 回到 0
  • 所有更新均由 Provider 驱动，无需手动调用 setState
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
✅ 优点总结：
  • 逻辑与 UI 分离（关注点分离）
  • 状态集中管理，易于调试和测试
  • 代码简洁，可读性强
  • 符合 Flutter 响应式编程思想

🌟 结语：状态管理不是炫技，而是为了写出更清晰、更可维护的代码。从 Provider 入手，是你迈向 Flutter 高阶开发的重要一步。

完整代码
代码语言：javascript
复制
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// 1. 状态模型：继承 ChangeNotifier
class CounterModel with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 通知所有监听者重建
  }

  void reset() {
    _count = 0;
    notifyListeners();
  }
}

// 2. 主应用入口
void main() {
  runApp(
    // 将 CounterModel 提供给整个 App
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: const MyApp(),
    ),
  );
}

// 3. 主界面
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider 状态管理测试',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CounterScreen(),
    );
  }
}

// 4. 计数器页面
class CounterScreen extends StatelessWidget {
  const CounterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // 通过 Provider 读取状态
    final counter = Provider.of<CounterModel>(context);

    return Scaffold(
      appBar: AppBar(title: const Text('VON - 状态管理测试')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '当前计数:',
              style: TextStyle(fontSize: 18),
            ),
            // 使用 Consumer 自动监听变化（也可用 Selector 优化）
            Consumer<CounterModel>(
              builder: (context, model, child) {
                return Text(
                  '${model.count}',
                  style: const TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
                );
              },
            ),
            const SizedBox(height: 30),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: counter.increment,
                  child: const Text('➕ 增加'),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: counter.reset,
                  child: const Text('↺ 重置'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-12-12，如有侵权请联系 cloudcommunity@tencent.com 删除
入门
flutter
openharmony
provider
管理

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

入门
flutter
openharmony
provider
管理
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 🧠使用 Provider 构建计数器应用
    • 一、为什么选择 Provider？
    • 二、项目结构概览
    • 三、定义状态模型：CounterModel
      • ✅ 关键点解析：
    • 四、应用入口：注入状态
      • ✅ 关键点解析：
    • 五、 主界面：MyApp
    • 六、 计数器页面：CounterScreen
      • ✅ 关键点解析：
    • 七、运行效果与总结
      • ✅ 优点总结：
      • 完整代码
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2026 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论