是否可以通过在颤振中使用 Provider 来跨页面更新值？

Question

我正在与Provider合作

provider: ^4.1.2

我有 2 页：A、B。

页面 A 和 B 显示相同的简单设计，代码如下：

PageA.dart

class PageA extends StatelessWidget {

   var songTitle = '';

   @override
   Widget build(BuildContext c) {
     return Column(children: <Widget>[
         FloatingActionButton.extended(
            onPressed: () {
                 // LOGIC : TRANSFER TO PAGE B AFTER CLICKED BUTTON FROM PAGE A
                 Navigator.push(context, MaterialPageRoute(
                     builder: (context) => PageB()));
            },
            label: Text('Click'),
           ),
         ),
         Text('$songTitle');
         // STEP 2 : while page B already got `songTitle` 
         // to show on UI, I want `songTitle` also update on this page A 
         // in the same time
     ]);
      
  }
}

PageB.dart

class PageB extends StatelessWidget {

   var songTitle = '';

   @override
   Widget build(BuildContext c) {
     return Text('$songTitle');
   }

   @override
   void initState() {
     super.initState();

     // LOGIC : CALL API TO GET `songTitle` TO UPDATE ON UI
     api.request().then((title) {
        setState(() {
           this.songTitle = title;
           // STEP 1 : this causes update to page B 
           // show `songTitle` got from api success
        });
     });
   }

}

这些代码运行时没有错误。

我想要的是Step 1得到songTitle数据之后，

它会将其数据更新到页面 A (Step 2) 和页面 B (Step 1) 同时使用Provider（例如Provider.of(context) ...）

知道的人

请告诉我，

谢谢，

更新我已经在下面得到了正确的@Chichebe 答案。

Answer 1

ma​​in.dart

import 'dart:async';

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

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [ChangeNotifierProvider<Song>(create: (context) => Song())],
      child: MaterialApp(home: PageA()),
    );
  }
}

歌曲模型

class Song extends ChangeNotifier {
  String songTitle = 'Title';

  void updateSongTitle(String newTitle) {
    songTitle = newTitle;

    notifyListeners();
  }
}

页面A

class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Consumer<Song>(builder: (context, song, child) {
          print('Consumer() : ${song.songTitle}');

          return Column(
            children: <Widget>[
              // SONG TITLE
              Text(song.songTitle),
              // Button
              MaterialButton(
                onPressed: () => Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => PageB()),
                ),
                child: Text('Button'),
              ),
            ],
            mainAxisAlignment: MainAxisAlignment.center,
          );
        }),
      ),
    );
  }
}

页面B

class PageB extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return PageBState();
  }
}

class PageBState extends State<PageB> {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    Timer(Duration(seconds: 2), () {
      final song = Provider.of<Song>(context, listen: false);

      song.updateSongTitle('New Title');
    });
  }

  @override
  Widget build(BuildContext c) {
    return Container(
      child: Text('Page B'),
      color: Colors.white,
    );
  }
}

p/s：我明白了

• 使用 Provider 包管理您的状态并将数据向下传递到您的小部件树。
• 使用 ChangeNotifier 和 ChangeNotifierProvider 来实现这一点。

Answer 2

您是否阅读过 Provider 示例？

• 在颤振中不要让你的小部件处理逻辑操作，例如发出 API 请求，你可以在你的提供者中这样做，甚至更好地创建一个独立的类来为你处理 HTTP 请求，然后你将它注入你的提供者代码，

你可以这样做：

class Song{
  String title;

  Song(this.title);
}

class MyProvider extends ChangeNotifier{
   Song song;

   void getSongInformation(String song) async{
       try{
          final req = await doYourAPIRequest();
          song = Song(req['title']);

          notifyListeners(); // Notify the listeners about this change

       }catch(e){
          // handle the error
       }
   }
}

然后在您的小部件中

Consumer<Song>(
  builder: (context, song, child) {
    return Text(song.title);
  },
)

因此，当您调用notifyListeners() 时，任何正在监听歌曲更改的 Widget 都会收到任何更改的通知，如果您只需要 Provider 通知单个歌曲更改，那么您也可以使用 ValueNotifierProvider。此外，最好将您的 Consumer 置于 Widget 树的最深处，以便仅重建依赖于该值的 Widget。