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

如何解决Flutter 从列表中删除项目导致完全重建

我实际上有一个带有删除按钮的列表。 按下后，它会显示一个对话框以确保我们要删除该项目。 删除后，我希望该项目从 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,index) {
    return Dialogs.materialDialog(msgStyle: TextStyle(fontSize: 16),msg: subTitle,title: title,color: Colors.indigo,context: context,actions: [
      IconsOutlineButton(
        onpressed: () {
          _confirmResult(false,context,index);
        },text: 'Cancel',iconData: Icons.cancel_outlined,textStyle: TextStyle(color: Colors.grey),iconColor: Colors.grey,IconsButton(
        onpressed: () {
          _confirmResult(true,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,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,index) {

result == null ：操作数不能为空，所以条件总是假的。 还有一些奇怪的事情，我进入页面，结果已加载，但是如果我按后退按钮并再次进入页面，则未加载任何结果，它保持为空 -> 列表？结果解决了错误信息 显示问题的 Gif。数据仅在我在 VSC xD 上执行 CTRL+S 时出现

解决方法

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()

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