如何使用颤振提供程序侦听列表中的更改？

Question

我有一个提供者正在侦听对playerList类的更改：

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 类需要另一个提供程序吗？如果是，如何让PlayerList 提供程序侦听 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.修复玩家的吸气线.

用这个：

List<Player> get players => _players;

3.您需要更多关于Provider.的概念知识

基本上，提供程序使您的PlayerList可以从您所提供的Widget下面的任何地方访问。例如，您是从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),
          ),
    ),

  );

}

Answer 2

我也有同样的问题。

我解决它的一种方法(虽然不是最漂亮的)是在ChangeNotifier中有一个方法来返回一个特定的对象，然后观察变化。

// in ChangeNotifier

Player getPlayer(int index) => _players[index];

然后在小部件中有

context.watch<PlayerList>().getPlayer(index).updateName("newName")

Answer 3

如果您是从父PlayerList修改，那么这就是方法，因为在您的情况下，父母已经在通知了。

import 'package:flutter/material.dart';
class Player with ChangeNotifier {
  Player({String name, Color color}) {
    this.color = color;
    this.name = name;
  }

  String uid;
  Key key;
  String _name;

  String get name => _name;

  set name(String value) {
    _name = value;
    notifyListeners();
  }

  int position;
  Color _color;
  bool isTurn;
  bool isFakeArtist;
  bool isWinner;

  Color get color => _color;

  set color(Color value) {
    _color = value;
    notifyListeners();
  }
}

如果您正在从播放机内部修改，并且希望父通知，则为

import 'package:flutter/material.dart';
class Player with ChangeNotifier {
  Player({String name, Color color, this.playerList}) {
    this.color = color;
    this.name = name;
  }

  final PlayerList playerList;
  String uid;
  Key key;
  String _name;

  String get name => _name;

  set name(String value) {
    _name = value;
    notifyListeners();
    playerList.notifyListeners();
  }

  int position;
  Color _color;
  bool isTurn;
  bool isFakeArtist;
  bool isWinner;

  Color get color => _color;

  set color(Color value) {
    _color = value;
    notifyListeners();
    playerList.notifyListeners();
  }
}