flutter - 如何使用 flutter 提供程序监听列表中的更改？

Question

我有一个提供商正在监听 playerList 的变化类(class):

import 'package:flutter/material.dart';
import 'package:scam_artist/constants/PlayerColors.dart';
import 'package:scam_artist/models/Player.dart';

class PlayerList with ChangeNotifier {
  List<Player> _players = [];

  List<Player> get players {
    return [..._players];
  }

  void addPlayer(Key key, String name, int index) {
    _players.add(
        new Player(key: key, color: PlayerColors.colors[index], name: name));
    notifyListeners();
  }

  void editPlayerName(String newName, int index) {
    _players[index].name = newName;
    notifyListeners();
  }

  void editPlayerColor(Color newColor, int index) {
    _players[index].color = newColor;
    notifyListeners();
  }
}

但是，当我调用函数将值更改为 Player 之一时对象(例如更改名称)，列表不会用新数据更新对象。

Player 是否需要另一个提供商？类(class)？如果是这样，我该如何制作 PlayerList provider 监听 Player 中的变化供应商？

做一些研究，我认为 ProxyProvider 可能是我正在寻找的，但我不确定如何实现它。

这是我的 Player如果有帮助，请上课:

import 'package:flutter/material.dart';

class Player {
  // id will be for database if implemented
  String uid;
  Key key;
  String name;

  //position is the order where the player plays
  int position;
  Color color;
  bool isTurn;
  bool isFakeArtist;
  bool isWinner;

  Player({this.key, this.name, this.color});
}

这就是我创建 ChangeNotifierProvider 的地方:

import 'package:flutter/material.dart';
import 'package:scam_artist/UserListener.dart';
import 'package:scam_artist/models/user.dart';
import 'package:scam_artist/providers/PlayerList.dart';
import 'package:scam_artist/services/AuthService.dart';
import 'package:provider/provider.dart';
import 'package:scam_artist/views/Lobby.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        StreamProvider<User>.value(value: AuthService().user),
        ChangeNotifierProvider(create: (context) => PlayerList())
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: UserListener(),
        routes: {Lobby.routeName: (ctx) => Lobby()},
      ),
    );
  }
}

Answer 1

这里有很多错误。
1. 修复您的 PlayerList 声明行。

//CORRECT
class PlayerList extends ChangeNotifier {...}

//WRONG
class PlayerList with ChangeNotifier {...}

4.修复你的球员 setter/getter 线。
用这个:

List<Player> get players => _players;

3. 你需要更多关于提供者的概念知识。
基本上，Provider 使您的 PlayerList 可以从您提供它的小部件树中的任何位置访问。例如，您从 MaterialApp 的顶部提供.所以你可以在你的 HomePage 中访问它或 Lobby .
访问您的 PlayerList , 你必须使用 Consumer小部件或 Selector小部件，但对于您的情况， Consumer足够。 Selector用于高级用途。
这是从您的 PlayerList 读取实时值的代码.

class Lobby extends StatelessWidget {

  @override
  Widget build(BuildContext context) => Scaffold(
    body: _body(),
  );

  _body() => Container(
    child: Consumer<PlayerList>(
      builder: (BuildContext context, PlayerList bloc) => 
          ListView.builder(
            itemCount: bloc.players.length,
            itemBuilder: 
               (BuildContext context, int index) => Text(bloc.players[index].name),
          ),
    ),

  );

}