Flutter Provider.of<> 没有消费者不会改变我的状态

如何解决Flutter Provider.of<> 没有消费者不会改变我的状态

我正在尝试进入提供者主题，但是调用一个函数只有当我把它放入消费者时才有效

@override
Widget build(BuildContext context) {
return MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (_) => ClickerProvider()),],child: Scaffold(
      appBar: AppBar(
        title: Text(widget.title),),body: Center(
        child: Text("some text"),floatingActionButton: FloatingActionButton(
        onPressed: () => Provider.of<ClickerProvider>(context,listen: false)
                          .incrementCounter(),tooltip: 'Increment',child: Icon(Icons.add),));
}

在这个例子中，我的状态没有更新。但是，它已经适用于消费者。

floatingActionButton: Consumer<ClickerProvider>(
builder: (context,value,child) {
  return FloatingActionButton(
    onPressed: Provider.of<ClickerProvider>(context,listen: false)
        .incrementCounter,);
},)

我的代码有错误吗？

解决方法

您可以在此处的 Consumer 的 source code 中提及：

从其祖先获取 [Provider] 并将其值传递给 [builder]。

[Consumer] 小部件没有做任何花哨的工作。它只是调用 [Provider.of] 在一个新的小部件中，并将其 build 实现委托给 [builder]。

Provider.of<X> 取决于 listen 的值（true 或 false）来触发新的 State.build() 小部件和 State.didChangeDependencies() 的 StatefulWidget。

Consumer<X> 总是更新 UI，因为它使用 Provider.of<T>(context)，其中听是 true

在这种情况下，由于您的 listen 被设置为 false，但您将其放入 Consumer 使其成为 true。这就是 UI 将更新为 Consumer

的原因 ,

您可以复制粘贴运行下面的两个完整代码
原因：找不到ClickerProvider
解决方案 1：将 ClickerProvider 移到上层，例如 MyApp

class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MultiProvider(
            providers: [
              ChangeNotifierProvider(create: (_) => ClickerProvider()),],child: MaterialApp(

解决方案 2：使用 Builder

body: Center(child: Builder(builder: (BuildContext context) {
                return Text(context.watch<ClickerProvider>().getCounter.toString());
              })),floatingActionButton: Builder(builder: (BuildContext context) {
    return FloatingActionButton(
      onPressed: () =>
          Provider.of<ClickerProvider>(context,listen: false)
              .incrementCounter(),tooltip: 'Increment',child: Icon(Icons.add),);

完整代码1

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

class ClickerProvider extends ChangeNotifier {
  int _count = 0;

  int get getCounter {
    return _count;
  }

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [
          ChangeNotifierProvider(create: (_) => ClickerProvider()),child: MaterialApp(
          title: 'Flutter Demo',theme: ThemeData(
            primarySwatch: Colors.blue,),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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),body: Center(
          child: Text(context.watch<ClickerProvider>().getCounter.toString()),floatingActionButton: FloatingActionButton(
          onPressed: () => Provider.of<ClickerProvider>(context,));
  }
}

完整代码2

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

class ClickerProvider extends ChangeNotifier {
  int _count = 0;

  int get getCounter {
    return _count;
  }

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key,this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [
          ChangeNotifierProvider(create: (_) => ClickerProvider()),child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),body: Center(child: Builder(builder: (BuildContext context) {
            return Text(context.watch<ClickerProvider>().getCounter.toString());
          })),floatingActionButton: Builder(builder: (BuildContext context) {
            return FloatingActionButton(
              onPressed: () =>
                  Provider.of<ClickerProvider>(context,listen: false)
                      .incrementCounter(),);
          }),));
  }
}