使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例

1. 使用 Provider 实现局部刷新

示例 1:ChangeNotifier + Consumer

通过 ChangeNotifierConsumer 实现局部刷新。

dart 复制代码
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => CounterProvider(),
      child: MyApp(),
    ),
  );
}

class CounterProvider extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners(); // 通知监听者刷新
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider 局部刷新')),
        body: Column(
          children: [
            Consumer<CounterProvider>(
              builder: (context, counterProvider, child) {
                return Text('计数器值: ${counterProvider.counter}');
              },
            ),
            ElevatedButton(
              onPressed: () {
                context.read<CounterProvider>().increment();
              },
              child: Text('增加计数'),
            ),
          ],
        ),
      ),
    );
  }
}
示例 2:Provider + select

通过 select 方法监听特定状态的变化,避免不必要的刷新。

dart 复制代码
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => CounterProvider(),
      child: MyApp(),
    ),
  );
}

class CounterProvider extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider 局部刷新 - select')),
        body: Column(
          children: [
            Selector<CounterProvider, int>(
              selector: (_, provider) => provider.counter,
              builder: (_, counter, __) {
                return Text('计数器值: $counter');
              },
            ),
            ElevatedButton(
              onPressed: () {
                context.read<CounterProvider>().increment();
              },
              child: Text('增加计数'),
            ),
          ],
        ),
      ),
    );
  }
}

2. 使用 GetX 实现局部刷新

示例 1:GetBuilder

通过 GetBuilder 实现局部刷新。

dart 复制代码
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class CounterController extends GetxController {
  int counter = 0;

  void increment() {
    counter++;
    update(); // 通知 GetBuilder 刷新
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GetX 局部刷新 - GetBuilder')),
        body: Column(
          children: [
            GetBuilder<CounterController>(
              init: CounterController(),
              builder: (controller) {
                return Text('计数器值: ${controller.counter}');
              },
            ),
            ElevatedButton(
              onPressed: () {
                Get.find<CounterController>().increment();
              },
              child: Text('增加计数'),
            ),
          ],
        ),
      ),
    );
  }
}
示例 2:Obx

通过 ObxRx 实现局部刷新。

dart 复制代码
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class CounterController extends GetxController {
  var counter = 0.obs; // 使用 Rx 变量

  void increment() {
    counter++;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GetX 局部刷新 - Obx')),
        body: Column(
          children: [
            Obx(() {
              final controller = Get.put(CounterController());
              return Text('计数器值: ${controller.counter}');
            }),
            ElevatedButton(
              onPressed: () {
                Get.find<CounterController>().increment();
              },
              child: Text('增加计数'),
            ),
          ],
        ),
      ),
    );
  }
}

3. Provider 与 GetX 的对比

特性 Provider GetX
刷新方式 notifyListeners + Consumer update(GetBuilder)或 obs(Obx)
局部刷新支持 支持(Consumerselect 支持(GetBuilderObx
学习曲线 较陡,需要理解 ChangeNotifier 较平缓,语法简单
状态管理复杂度 适合中小型项目 适合中大型项目
依赖注入 手动注入 内置依赖注入

总结

  • Provider

    • 适合需要精细控制状态监听的场景。
    • 使用 Consumerselect 实现局部刷新。
  • GetX

    • 语法简单,适合快速开发。
    • 使用 GetBuilderObx 实现局部刷新。

根据项目需求选择合适的状态管理方式。如果项目较小且需要简单的局部刷新,GetX 是一个不错的选择;如果项目较复杂且需要精细的状态管理,Provider 更加灵活。


参考来源

  1. Flutter实现局部刷新的几种方式
  2. GetX状态管理局部刷新
  3. 使用Provider搞定Flutter的局部刷新
  4. Flutter刷新方案对比

消息来源

相关推荐
Tttian62220 分钟前
Python办公自动化(3)对Excel的操作
开发语言·python·excel
再学一点就睡1 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
独好紫罗兰1 小时前
洛谷题单2-P5713 【深基3.例5】洛谷团队系统-python-流程图重构
开发语言·python·算法
闪电麦坤952 小时前
C#:base 关键字
开发语言·c#
Mason Lin3 小时前
2025年3月29日(matlab -ss -lti)
开发语言·matlab
DREAM.ZL3 小时前
基于python的电影数据分析及可视化系统
开发语言·python·数据分析
難釋懷3 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
海姐软件测试3 小时前
Postman参数化设置如何设置?
开发语言·jmeter
松树戈3 小时前
Java常用异步方式总结
java·开发语言
weisian1513 小时前
Java常用工具算法-3--加密算法2--非对称加密算法(RSA常用,ECC,DSA)
java·开发语言·算法