Flutter Provider 改造代码，UI 与业务分离更清晰！

2023-10-04 02:43:17

在上一节中，我们探讨了 Flutter 中的 Provider 状态管理。在本节中，我们将深入探讨如何使用 Provider 改造现有的代码，以实现 UI 层和业务层代码的分离。通过实际的案例，您将了解到 Provider 的强大功能，以及它如何帮助您编写更清晰、更可维护的 Flutter 代码。

Provider 的优势

Provider 的最大优势之一就是能够分离 UI 层和业务层代码。在传统的 Flutter 代码中，状态通常存储在 UI 组件中，这会导致代码混乱且难以维护。通过使用 Provider，您可以将状态从 UI 组件中移出，将其存储在单独的模型或服务中。这使得 UI 代码更加简洁，同时提高了业务代码的复用性。

Provider 的局部刷新

另一个优点是 Provider 的局部刷新特性。传统的 Flutter 代码中，当状态发生变化时，整个界面都会重新渲染。这对于大型或复杂的界面来说可能非常耗费性能。Provider 提供了一种局部刷新的机制，只更新受状态变化影响的部分界面。这大大提高了界面渲染的性能，从而提供了更好的用户体验。

实际案例

让我们通过一个实际案例来展示如何使用 Provider 改造代码。考虑以下示例代码，该代码在 UI 组件中管理状态：

class MyHomePage extends StatelessWidget {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text('$counter'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            counter++;
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

这段代码中，状态（counter）存储在 MyHomePage 组件中。每当用户点击浮动按钮时，都会调用 setState 方法，重新渲染整个界面。

现在，让我们使用 Provider 改造这段代码：

// 创建一个 CounterProvider，将 counter 存储在其中
class CounterProvider extends ChangeNotifier {
  int counter = 0;

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

// 在 MaterialApp 中创建 CounterProvider 实例
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => CounterProvider(),
      child: MaterialApp(
        title: 'Provider Example',
        home: MyHomePage(),
      ),
    );
  }
}

// 在 MyHomePage 中使用 CounterProvider
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text('${counter.counter}'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}