flutter Provider

猫尾巴
291 阅读3分钟

原始代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

添加 Provider 依赖：

dependencies:
  provider: ^6.0.2

默认应用程序基本上是一个有状态的 widget ，每次单击 FloatingActionButton（调用 setState() ）时都会重新构建。

但是现在我们要把它转换成一个无状态的 widget 。

创建 Provider

让我们继续创建我们的 Provider 。这将是我们应用程序的唯一真实来源。这是我们存储状态的地方，在这种情况下是当前计数。

创建一个名为 Counter 的类并添加 count 变量：

import 'package:flutter/material.dart';

class Counter {
  var _count = 0;
}

要将其转换为 Provider 类，请从 material.dart 包中扩展 ChangeNotifier。这为我们提供了 notifyListeners() 方法，并在我们更改值时通知所有侦听器。

现在添加一个方法来增加计数器：

import 'package:flutter/material.dart';

class Counter extends ChangeNotifier {
  var _count = 0;
  void incrementCounter() {
    _count += 1;
  }
}

在此方法结束时，我们将调用 notifyListeners()。这将触发整个应用程序对正在侦听它的任何 widget 的更改。

这就是 Flutter 中提供者模式的美妙之处——您不必关心手动分派到流。

最后，创建一个 getter 来返回计数器值。我们将使用它来显示最新值：

import 'package:flutter/material.dart';

class Counter extends ChangeNotifier {
  var _count = 0;
  int get getCounter {
    return _count;
  }

  void incrementCounter() {
    _count += 1;
    notifyListeners();
  }
}

聆听按钮点击

现在我们已经设置了 Provider ，我们可以继续在我们的主 widget 中使用它。

首先，让我们将 MyHomePage 转换为无状态 widget 而不是有状态 widget 。我们必须删除 setState() 调用，因为它只在 StatefulWidget 中可用：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  int _counter = 0;
  final String title;
  MyHomePage({this.title});
  void _incrementCounter() {}
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

完成此操作后，我们现在可以使用 Flutter 中的 Provider 模式来设置和获取计数器值。在每次单击按钮时，我们需要将计数器值增加 1。

因此，在 _incrementCounter 方法（按下按钮时调用）中添加以下行：

Provider.of<Counter>(context, listen: false).incrementCounter();

这里发生的情况是，已经要求 Flutter 在 widget 树中向上查找提供 Counter 的第一个位置。 这就是 Provider.of() 所做的。

泛型（< > 括号内的值）告诉 Flutter 要查找哪种类型的 Provider 。然后 Flutter 向上遍历 widget 树，直到找到提供的值。如果在任何地方都没有提供该值，则会引发异常。

最后，一旦你有了 Provider ，你就可以调用它上面的任何方法。这里我们调用我们的 incrementCounter 方法。

但是我们还需要一个上下文，所以我们接受上下文作为参数并改变 onPressed 方法来传递上下文：

void _incrementCounter(BuildContext context) {
  Provider.of<Counter>(context, listen: false).incrementCounter();
}

注意：我们将 listen 设置为 false，因为我们不需要在这里监听任何值。我们只是发送一个要执行的动作。

提供 Provider

Flutter 中的 Provider 模式将寻找提供的最新值。下图将帮助您更好地理解。

image.png

在此图中，绿色对象 A 将对其下方的其余元素可用，即 B、C、D、E 和 F。

现在假设我们想向应用程序添加一些功能，并创建另一个提供程序 Z。E 和 F 需要 Z。

那么添加它的最佳位置在哪里？

我们可以将它添加到 A 上面的根目录中。这样可以：

image.png

但是这种方法效率不高。

Flutter 会遍历上面所有的 widget ，然后最终到达根目录。如果你有很长的 widget 树——你肯定会在生产应用程序中这样做——那么把所有东西都放在根不是一个好主意。

相反，我们可以查看 E 和 F 的公分母。即 C。因此，如果我们将 Z 放在 E 和 F 的上方，它会起作用。

image.png

但是如果我们想添加另一个 E 和 F 需要的对象 X 怎么办？我们会做同样的事情。但请注意这棵树是如何不断生长的。

image.png

有更好的方法来管理它。如果我们在一个层次上提供所有对象怎么办？

image.png

这是完美的，也是我们最终在 Flutter 中实现 provider 模式的方式。我们将使用称为 MultiProvider 的东西，它允许我们在一个级别上声明多个 provider 。

我们将让 MultiProvider 来包装 MaterialApp widget：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(
          value: Counter(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: "AndroidVille Provider Pattern"),
      ),
    );
  }
}

这样，我们就为我们的 widget 树提供了提供程序，并且可以在树中此级别以下的任何位置使用它。

还剩下一件事：我们需要更新显示的值。

更新文本

要更新文本，请在 MyHomePage widget 的构建函数中获取提供程序。我们将使用我们创建的 getter 来获取最新的值。

然后只需将此值添加到下面的文本 widget 。

我们完成了！这是您最终的 main.dart 文件的外观：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_pattern_explained/counter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(
          value: Counter(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: "AndroidVille Provider Pattern"),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({this.title});
  void _incrementCounter(BuildContext context) {
    Provider.of<Counter>(context, listen: false).incrementCounter();
  }

  @override
  Widget build(BuildContext context) {
    var counter = Provider.of<Counter>(context).getCounter;
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _incrementCounter(context),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

注意：在这种情况下，我们没有设置 listen:false ，因为我们想监听计数值的任何更新。

avatar
文章
阅读
粉丝