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

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 使您可以从您提供的 Widget 树中的任何位置访问您的 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),
          ),
    ),

  );

}