Question

我正在尝试使用提供程序跨页面设置状态。但它没有改变。

我已经在main.dart中添加了changeNotifierProvider main.dart

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MultiProvider(
          providers: [
            ChangeNotifierProvider(builder: (context) => GlobalState())
          ],
        child: MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            routes: {
              '/': (context) => HomePage(),
              '/products': (context) => ProductsPage()
            }
          )
        );
      }
    }

我正在尝试设置并获取一个简单的名称字符串

globatState.dart

    class GlobalState extends ChangeNotifier{
      String _name = 'Hello';
      String get getName => _name;
      void setName(String value){
        _name = value;
        notifyListeners();
      }
    }

在主页中，我正在设置状态，并且可以使用导航器pushNamed路线移至产品页面。

homepage.dart

    class HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context){
        GlobalState gs = GlobalState();
        return Scaffold(
          appBar: AppBar(title: Text('Home'),),
          body: Container(
            child: Column(children: <Widget>[
              RaisedButton(onPressed: ((){
                gs.setName('World');
                }),
                child: Text('Set data'),
              ),
              RaisedButton(
                onPressed: () => Navigator.pushNamed(context, '/products'),
                child: Text('Products'),
              ),
            ],)

          ),
        );
      }
    }

在产品页面中，我正在使用消费者获取状态 productsPage.dart

    class ProductsPage extends StatelessWidget{
      @override
      Widget build(BuildContext context){
        return Scaffold(appBar: AppBar(title: Text('Products'),
        ),
        body: Container(child:Column(children: <Widget>[
          Text('This is the productPage'),
          Container(
            child:Consumer<GlobalState>(
              builder: (context, gs, child){
                return Text('this is the data: ${gs.getName}');
              },
            )
          )
        ],))
        );
      }
    }

但是在产品页面中，我仅获得状态的初始值，而不是更改后的状态。我错过了什么还是导航方式错误？

Answer 1

GlobalState gs = GlobalState();

将创建您的GlobalState类的新实例。尚未注册为提供者的人。

请改为使用提供商提供的实例

GlobalState gs = Provider.of<GlobalState>(context, listen:false);
gs.setName('world');

Answer 2

尝试使用 pub.dev 上的 equatable 包，链接如下 ->

https://pub.dev/packages/equatable

您可以从 Equatable 扩展一个类，然后在该类中您可以使用该类的所有属性/成员变量覆盖 getter 道具。

发生这种情况是因为当您的数据由于 Flutter 使用的性能优化技术而从数据源 (REST API) 更新时，它不会比较类实例中的每个属性/成员变量，而是指对象在内存中的位置只要。使用 equatable，您基本上可以覆盖内存中类的每个对象的 == 运算符和 hashCode，它会将 props getter 变量中每个定义属性的旧值与新值进行比较，如果任何属性不匹配，则它将覆盖它，然后您的提供者/消费者将更新 UI 并反映更新后的状态。

Flutter提供者状态未在使用者小部件中更新

2 个答案: