如何使用 StreamBuilder 检索特定用户数据？

Question

1) 这是查看团队/查看花名册屏幕。 https://imgur.com/a/k63lQrt

  class ViewTeamScreen extends StatelessWidget {
  static const routeName = '/view-team';
  const ViewTeamScreen({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return StreamProvider<List<User>>.value(
      value: DBService().getAllUsers,
      child: Scaffold(
        body: TeamList()
      ),
    );
  }
}

2) 这是在 ViewTeamScreen 上显示所有用户数据并返回我创建的 TeamTile 小部件的团队列表代码。

class TeamList extends StatefulWidget {
  @override
  _TeamListState createState() => _TeamListState();
}

class _TeamListState extends State<TeamList> {
  @override
  Widget build(BuildContext context) {
    final users = Provider.of<List<User>>(context) ?? [];
    //print(users);

    return ListView.builder(
      itemCount: users.length,
      itemBuilder: (context, index) {
        return TeamTile(
          user: users[index],
        );
      },
    );

3) 这是 TeamTile，一旦团队成员注册应用，它就会返回 ListViewBuilder。

class TeamTile extends StatelessWidget {
  final User user;
  TeamTile({this.user});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 8.0),
      child: Card(
        margin: EdgeInsets.fromLTRB(20, 6, 20, 0),
        child: ListTile(
          leading: CircleAvatar(
            radius: 30.0,
            backgroundColor: Colors.brown,
          ),
          title: Text(
            '${user.firstName}'
            " "
            '${user.lastName}', //how do i make the first letter of name always CAPS?
            style: TextStyle(fontSize: 23, letterSpacing: 1.0),
          ),
          trailing: Text(user.email),
          subtitle: Text('+44 0000 000 000'),
          onTap: () async {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => TeamDetailScreen(),
              ),
            );
          },
        ),

4) 这是团队详情屏幕，一旦用户点击 ViewTeamScreen 中的 ListTile，就会出现此页面。 https://imgur.com/a/7tSUO1c

class TeamDetailScreen extends StatelessWidget {
  @override
Widget build(BuildContext context) {
    final user = Provider.of<User>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Employee Contact Info'),
      ),
      body: StreamBuilder<User>(
        stream: DBService(uid: user.uid).usersData,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            User userData = snapshot.data;

            return Column(children: <Widget>[
              Expanded(
                  child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'Name: ${userData.firstName}'
                  " "
                  '${userData.lastName}\n'
                  'Email: ${userData.email}',
                  style: TextStyle(fontSize: (20)),
                ),
              )),
            ]);
          } else {
            return Loading();

Answer 1

这将排除 StreamProvider 并仅使用 StreamBuilder。这个概念很容易理解，因为我们所做的只是将 widget.index 作为参数传递给其他 Widget。

1

class ViewTeamScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List<User>>(
        stream: DBService().getAllUsers,
        builder: (context, snapshot) {

          if (snapshot.hasData) {
            List<User> userData = snapshot.data;

            return Scaffold(body: TeamList(myData: userData));
          } else {
            return Loading();
          }
        });
  }
}

2

 class TeamList extends StatefulWidget {
      final List<User> myData;

      TeamList({this.myData});

      @override
      _TeamListState createState() => _TeamListState();
    }

    class _TeamListState extends State<TeamList> {
      @override
      Widget build(BuildContext context) {
        return ListView.builder(
          itemCount: widget.myData.length,
          itemBuilder: (context, index) {
            return TeamTile(
              usersInfo: widget.myData[index],
            );
          },
        );
      }
    }

3

class TeamTile extends StatelessWidget {
  final User usersInfo;
  TeamTile({this.usersInfo});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 8.0),
      child: Card(
        margin: EdgeInsets.fromLTRB(20, 6, 20, 0),
        child: ListTile(
          leading: CircleAvatar(
            radius: 30.0,
            backgroundColor: Colors.brown,
          ),
          title: Text(
            '${usersInfo.firstName}'
            " "
            '${usersInfo.lastName}', //how do i make the first letter of name always CAPS?
            style: TextStyle(fontSize: 23, letterSpacing: 1.0),
          ),
          trailing: Text(usersInfo.email),
          subtitle: Text('+44 0000 000 000'),
          onTap: () async {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => TeamDetailScreen(myDetails: usersInfo),
              ),
            );
          },
        ),
      ),
    );
  }
}

4

 class TeamDetailScreen extends StatelessWidget {
      final User myDetails;
      TeamDetailScreen({this.myDetails});

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: Column(children: <Widget>[
            Expanded(
                child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'Name: ${myDetails.firstName}'
                " "
                '${myDetails.lastName}\n'
                'Email: ${myDetails.email}',
                style: TextStyle(fontSize: (20)),
              ),
            )),
          ]),
        );
      }
    }