Flutter 从列表中删除项目导致完全重建

Question

我实际上有一个带有删除按钮的列表。按下后，它会显示一个对话框以确保我们要删除该项目。删除后，我希望该项目从 UI 中消失而不重建完整列表。我只需要删除相关项目。所以它不应该做任何加载过程。

实际上，列表已完全重建。我使用的是无状态小部件，现在它是有状态小部件。我以为这会对我有帮助..

源代码：

class ListGroupsOfUser extends StatefulWidget {
  final String title;
  ListGroupsOfUser({
    required this.emailParameter,
    required this.title,
    Key? key,
  }) : super(key: key);
  final String emailParameter;

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

class _ListItem extends State<ListGroupsOfUser> {
  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
          child: Column(children: [
        // Padding(padding: const EdgeInsets.all(5)),
        Padding(
          padding: const EdgeInsets.only(top: 10, bottom: 8),
          child: Badge(
            toAnimate: true,
            animationDuration: Duration(seconds: 2),
            shape: BadgeShape.square,
            badgeColor: Colors.indigo,
            borderRadius: BorderRadius.circular(8),
            badgeContent: Text("Utilisateur : " + widget.emailParameter, style: TextStyle(color: Colors.white, fontSize: 18)),
          ),
        ),
        Expanded(
            // padding: EdgeInsets.all(16),
            child: FutureBuilder<List<User>>(
                future: UsersAndGroupsService.fetchGroupsOfUser(widget.emailParameter),
                builder: (context, snapshot) {
                  if (snapshot.hasData && snapshot.connectionState == ConnectionState.done) {
                    final result = snapshot.data!;

                    return ListView.separated(
                      separatorBuilder: (BuildContext context, int index) => const Divider(),
                      itemCount: result.length,
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: const EdgeInsets.only(left: 10, right: 10),
                          child: Card(
                            child: Column(
                              children: <Widget>[
                                ListTile(
                                  title: Text(result[index].name),
                                  leading: Icon(Icons.group),
                                  trailing: IconButton(
                                    icon: Icon(Icons.clear, color: Colors.red),
                                    onPressed: () {
                                      confirm(context, "Suppression", "Voulez-vous vraiment supprimer le groupe " + result[index].name + " de l'utilisateur ?", result, index);
                                    },
                                  ),
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                    );
                  } else {
                    return Center(child: CircularProgressIndicator());
                  }
                }))
      ])));

  _confirmResult(bool isYes, BuildContext context, List<User> result, index) {
    if (isYes) {
      print("HELL YES!");
      print(result.length);
      setState(() {
        result.removeAt(index);
      });

      print(result.length);
      // print(userInputController.text);
      // _write();
      Navigator.pop(context);
    } else {
      print("HELL NO!");
      // print(input);

      Navigator.pop(context);
    }
  }

  confirm(BuildContext context, String title, String subTitle, List<User> result, index) {
    return Dialogs.materialDialog(msgStyle: TextStyle(fontSize: 16), msg: subTitle, title: title, color: Colors.indigo, context: context, actions: [
      IconsOutlineButton(
        onPressed: () {
          _confirmResult(false, context, result, index);
        },
        text: 'Cancel',
        iconData: Icons.cancel_outlined,
        textStyle: TextStyle(color: Colors.grey),
        iconColor: Colors.grey,
      ),
      IconsButton(
        onPressed: () {
          _confirmResult(true, context, result, index);
        },
        text: 'Delete',
        iconData: Icons.delete,
        color: Colors.red,
        textStyle: TextStyle(color: Colors.white),
        iconColor: Colors.white,
      ),
    ]);
  }
}

回答后更新：

late Future<List<User>> result2;

  @override
  void initState() {
    super.initState();
    result2 = getUserList();
  }

  Future<List<User>> getUserList() async {
    return await UsersAndGroupsService.fetchGroupsOfUser(widget.emailParameter);
  }

...

child: FutureBuilder(
  future: result2,
  builder: (context, snapshot) {
    if (snapshot.hasData && snapshot.connectionState == ConnectionState.done) {
    Don't know if updates needed after that

更新 2：

List<User> result = [];

  @override
  void initState() {
    super.initState();
    getUserList();
  }

  getUserList() async {
    result = await UsersAndGroupsService.fetchGroupsOfUser(widget.emailParameter);
  }

...
Expanded(
            // padding: EdgeInsets.all(16),
            child: result == null
                ? CircularProgressIndicator()
                : ListView.separated(
                    separatorBuilder: (BuildContext context, int index) => const Divider(),
                    itemCount: result.length,
                    itemBuilder: (context, index) {

result == null : 操作数不能为空，因此条件始终为假。奇怪的是，我进入页面，结果已加载，但如果我按下后退按钮并再次进入页面，则没有加载任何结果，它保持为空 -> 名单？结果解决了错误信息显示问题的 Gif。只有当我在 VSC xD 上执行 CTRL+S 时才会出现数据

Answer 1

setState 将重建您的整个构建方法，因此您的 FutureBuilder 将再次重新加载，这就是它再次加载的原因。

删除 FutureBuilder 并在 initState.

中调用 UsersAndGroupsService.fetchGroupsOfUser(widget.emailParameter)

当数据到来时初始化列表并使用该列表。

代码：

List<User> result;

@override
void initState() {
 super.initState();
  getUserList();
}

getUserList() async {
  result = await UsersAndGroupsService.fetchGroupsOfUser(widget.emailParameter);
  setState(() {});
}

在构建方法中

result == null ? CircularProgressIndicator() : Listview()

现在您可以安静地执行您的代码了:)

Flutter 从列表中删除项目导致完全重建

Flutter delete item from list causing full rebuilt

listview

flutter

statefulwidget