listview - 使用回调删除 ListView 项的Flutter/Dart Issue

Question

这可能只是一个小错误，但我的回调无法正常工作。
我正在尝试使用回调删除Listview项，但是当我按下图标按钮时，什么也没有发生。
我写了一个示例代码，因为我的代码太长了。

我正在UserListView中构建listView并将数据传递到User小部件。

class UserListView extends StatefulWidget {
  @override
  _UserListViewState createState() => _UserListViewState();
}

class _UserListViewState extends State<UserListView> {
  List<User> user = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("User")),
        body: StreamBuilder<QuerySnapshot>(
            stream: userRef.snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                return Text("something happend");
              }
              user = snapshot.data.documents
                  .map((doc) => User.fromDocument(doc))
                  .toList();
              if (user.isEmpty) {
                return Text("no user");
              }
              return ListView.builder(
                itemCount: user.length,
                itemBuilder: (BuildContext context, int index) {
                  final item = user[index];
                  return User(
                    index: item.index,
                    username: item.username,
                    uid: item.uid,
                    country: item.country,
                    removeUser: () {
                      setState(() {
                        user.removeAt(item.index);
                      });
                    },
                  );
                },
              );
            }));
  }
}

在User中，我试图调用removeUser函数，但是什么也没有发生。

class User extends StatefulWidget {
  final int index;
  final String username;
  final String uid;
  final String country;
  final VoidCallback removeUser;

  User({this.username, this.country, this.uid, this.index, this.removeUser});

  factory User.fromDocument(DocumentSnapshot doc) {
    return User(
      uid: doc['uid'],
      username: doc['username'],
      country: doc['country'],
    );
  }

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

class _UserState extends State<User> {

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200.0,
      child: Column(
        children: <Widget>[
          Text(widget.uid),
          Text(widget.username),
          Text(widget.country),
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: () => widget.removeUser(),
          )
        ],
      ),
    );
  }
}

使用回调“removeUser”在这里我想念什么？

Answer 1

如下更改代码:

import 'package:flutter/material.dart';

class UserListView extends StatefulWidget {
  @override
  _UserListViewState createState() => _UserListViewState();
}

class _UserListViewState extends State<UserListView> {
  List<User> user = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("User")),
        body: StreamBuilder<QuerySnapshot>(
            stream: userRef.snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                return Text("something happend");
              }

              user = snapshot.data.documents
                  .map((doc) => User.fromDocument(doc))
                  .toList();

              if (user.isEmpty) {
                return Text("no user");
              }

              return ListView.builder(
                itemCount: user.length,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 200.0,
                    child: Column(
                      children: <Widget>[
                        Text(user[index].uid),
                        Text(user[index].username),
                        Text(user[index].country),
                        IconButton(
                            icon: Icon(Icons.delete),
                            onPressed: () => setState(() {
                                  user.removeAt(index);
                                }))
                      ],
                    ),
                  );
                },
              );
            }));
  }
}

class User {
  final String username;
  final String uid;
  final String country;

  User({this.username, this.uid, this.country});

  factory User.fromDocument(DocumentSnapshot doc) {
    return User(
        username: doc['username'], uid: doc['uid'], country: doc['country']);
  }
}

您不需要不必要地创建StatefulWidget类。只需创建List类型的用户的User即可。

另外，您需要将StreamBuilder从build方法移动到其他方法，并在streambuilder为null的情况下对user方法实现条件调用。

更新的解决方案:

import 'package:flutter/material.dart';

class UserListView extends StatefulWidget {
  @override
  _UserListViewState createState() => _UserListViewState();
}

class _UserListViewState extends State<UserListView> {
  static List<User> user = [];

  Widget _commonPart() {
    return ListView.builder(
      itemCount: user.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 200.0,
          child: Column(
            children: <Widget>[
              Text(user[index].uid),
              Text(user[index].username),
              Text(user[index].country),
              IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () => setState(() {
                        user.removeAt(index);
                      }))
            ],
          ),
        );
      },
    );
  }

  Widget _buildBody() {
    if (user == null) {
      // since the list is empty, fetch the data

      return StreamBuilder<QuerySnapshot>(
          stream: userRef.snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return Text("something happend");
            }

            user = snapshot.data.documents
                .map((doc) => User.fromDocument(doc))
                .toList();

            if (user.isEmpty) {
              return Text("no user");
            } else {
              return _commonPart();
            }
          });
    } else {
      return _commonPart();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text("User")), body: _buildBody());
  }
}

class User {
  final String username;
  final String uid;
  final String country;

  User({this.username, this.uid, this.country});

  factory User.fromDocument(DocumentSnapshot doc) {
    return User(
        username: doc['username'], uid: doc['uid'], country: doc['country']);
  }
}