首页 > 解决方案 > 提供程序不在另一个屏幕中显示更新状态,而仅在模态类和更改通知程序所在的第一个屏幕上显示

问题描述

所以我使用提供程序和更改通知程序,问题是当我在同一个文件中更改状态并通知侦听器时,用户界面会更新,但是当我尝试从另一个屏幕中的模型访问相同的数据时,它仍然保留原始或第一个版本而不是更新版本,另一个文件中的类甚至使用更改通知提供者和消费者,就像里面有模态类的文件一样,但没有改变值,它只保留初始值,第二个文件只有 changenotifierprovider 和 consumer,但它只显示初始的不是更新的,而是第一个带有模型类的文件,并且 change notifier 函数在其小部件中显示更新的版本

标签: androidflutterdart

解决方案


以下是我通常使用 Provider 将数据从小部件树中的一个小部件一直共享到小部件树的整个其他区域中的某个其他小部件的方式。

例如:

定义扩展 ChangeNotifier 的提供程序类

import 'package:flutter/material.dart';
import 'package:app/utils/AppUser.dart';

class UserProvider extends ChangeNotifier {
  /// You can either set an initial value here or use a UserProvider object 
  /// and call the setter to give it an initial value somewhere in your app, like in main.dart

  AppUser _user; /// or AppUser _user = AppUser("firstName", "lastName");

  AppUser get user => _user;

  set user(AppUser newUser) {
    _user = newUser;

    /// MAKE SURE YOU NOTIFY LISTENERS IN YOUR SETTER
    notifyListeners();
  }

}

像这样使用 Provider Widget 包装您的应用程序

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


void main() {
  runApp(
    MaterialApp(
      initialRoute: '/root',
      routes: {
        '/root': (context) => MyApp(),
      },
      title: "Your App Title",
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
/// Multiprovider allows you to have more than one provider, which is great for more 
/// complex apps where you might need to share data about something else than just the user
    return MultiProvider(
      providers: [
        /// THIS WILL MAKE SURE ALL WIDGETS IN YOUR APP, THAT LISTEN TO THE PROVIDER CHANGES,
        /// WILL BE NOTIFIED AND THE SHARED DATA WILL BE PROVIDED TO THEM
        ChangeNotifierProvider<UserProvider>.value(value: UserProvider()),
      ],
      child: MaterialApp(
        home: Wrapper(),
      ),
    );
  }
}

在应用程序中的任何位置访问和数据

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
/// MAKE SURE TO IMPORT THE UserProvider.dart file
import 'package:app/services/UserProvider.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  UserProvider userProvider;

  @override
  Widget build(BuildContext context) {
    /// LISTEN TO THE CHANGES / UPDATES IN THE PROVIDER
    userProvider = Provider.of<UserProvider>(context);

    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Text(
            /// THIS IS HOW YOU GET THE UPDATED DATA FROM THE PROVIDER
            userProvider.user.firstName,
          ),
        ),
      ),
    );
  }
}

在应用程序的任何位置更新数据

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
/// MAKE SURE TO IMPORT THE UserProvider.dart file
import 'package:app/services/UserProvider.dart';

class AnotherScreen extends StatefulWidget {
  @override
  _AnotherScreenState createState() => _AnotherScreenState();
}

class _AnotherScreenState extends State<AnotherScreen> {
  UserProvider userProvider;

  @override
  Widget build(BuildContext context) {
    /// LISTEN TO THE CHANGES / UPDATES IN THE PROVIDER
    userProvider = Provider.of<UserProvider>(context);

    return Scaffold(
      body: SafeArea(
        child: Center(
          child: RaisedButton(

            /// THIS IS HOW YOU UPDATE THE DATA IN THE PROVIDER
            onPressed: () {
              userProvider.user = AppUser("new", "user");
              setState(() {});
            },
            child: Text("Update user"),
          ),
        ),
      ),
    );
  }
}

希望这有助于并解决您的问题。


推荐阅读