有没有办法在按下按钮后从树中删除小部件？

Question

新手来了。我正在试着列一个简单的待办事项清单，用来提高我的技能。这个想法是有一个待办事项列表，你可以上下移动属性，一旦你完成了一个任务，你就把它选中，它应该会显示一个复选标记，也许最终会播放一个动画并删除它。现在，我只是坚持删除它，我有一些实现的想法，但其中很多都需要我重新启动代码。有没有一种方法可以让我在处理完某个特定的小部件后，可以删除它或用另一个小部件替换它，并注意到这些小部件都在列表中？参考代码：

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var checkboxes = [
    Checkboxstate(title: "test"),
    Checkboxstate(title: "test2"),
    Checkboxstate(title: "test3"),
    Checkboxstate(title: "tes4t"),
  ];
  bool value = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("To-Do"),
        backgroundColor: Colors.purple,
      ),
      backgroundColor: Colors.blue,
      body: Container(
        padding: EdgeInsets.all(10),
        child: ReorderableListView(
          shrinkWrap: true,
          onReorder: (int oldIndex, int newIndex) {
            setState(() {
              if (oldIndex < newIndex) {
                newIndex -= 1;
              }
              var item = checkboxes.removeAt(oldIndex);
              checkboxes.insert(newIndex, item);
            });
          },
          children: [
            ...checkboxes.map(buildBox).toList(),
          ],
        ),
      ),
    );
  }

  Card buildBox(Checkboxstate checkbox) {
    return Card(
      key: UniqueKey(),
      child: CheckboxListTile(
        title: Text(checkbox.title),
        key: UniqueKey(),
        controlAffinity: ListTileControlAffinity.leading,
        value: checkbox.value,
        onChanged: (value) {
          setState(() {
            checkboxes.removeAt();
            checkbox.value = value;
          });
        },
      ),
    );
  }
}

class Checkboxstate {
  String title;
  bool value;
  Checkboxstate({this.title, this.value = false});
}

编辑:按照Prabhanshu的建议，我遵循了他的步骤，而不是使用项目构建器；然而，有一个新的问题: reorderablelistview现在不能工作。我的想法是，原因是可重排序列表的索引与我创建的复选框小部件的索引不同，但我仍然无法找到解决方案。

新代码：

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var checkboxes = [
    Checkboxstate(title: "test"),
    Checkboxstate(title: "test2"),
    Checkboxstate(title: "test3"),
    Checkboxstate(title: "tes4t"),
  ];
  bool value = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("To-Do"),
        backgroundColor: Colors.purple,
      ),
      backgroundColor: Colors.blue,
      body: Container(
        padding: EdgeInsets.all(10),
        child: ReorderableListView.builder(
          shrinkWrap: true,
          onReorder: (int oldIndex, int newIndex) {
            setState(() {
              if (oldIndex < newIndex) {
                newIndex -= 1;
              }
              var item = checkboxes.removeAt(oldIndex);
              checkboxes.insert(newIndex, item);
            });
          },
          itemCount: checkboxes.length,
          itemBuilder: (context, index) {
            Checkboxstate box = checkboxes.elementAt(index);
            return buildBox(box, index);
          },
        ),
      ),
    );
  }

  Card buildBox(Checkboxstate checkbox, int index) {
    return Card(
      key: UniqueKey(),
      child: CheckboxListTile(
        title: Text(checkbox.title),
        key: UniqueKey(),
        controlAffinity: ListTileControlAffinity.leading,
        value: checkbox.value,
        onChanged: (value) {
          setState(() {
            checkbox.value = value;
            checkboxes.removeAt(index);
          });
        },
      ),
    );
  }
}

class Checkboxstate {
  String title;
  bool value;
  Checkboxstate({this.title, this.value = false});
}

Answer 1

如果可以选择“拖动以清除”，则为：

您在这里寻找的是Dismissible小部件，正如文档所描述的那样，它是一个小部件，可以通过在指定的方向上拖动来关闭它。

有关如何使用此小部件的详细说明，请查看flutter cookbook tutorial。

Answer 2

这肯定会对你有帮助。

将build方法体替换为

Scaffold(
  appBar: AppBar(
    title: Text("To-Do"),
    backgroundColor: Colors.purple,
  ),
  backgroundColor: Colors.blue,
  body: Container(
    padding: EdgeInsets.all(10),
    child: ReorderableListView.builder(
      shrinkWrap: true,
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          var item = checkboxes.removeAt(oldIndex);
          checkboxes.insert(newIndex, item);
        });
      },
      itemCount: checkboxes.length,
      itemBuilder: (context, index) {
        Checkboxstate box = checkboxes.elementAt(index);
        return buildBox(box, index);
      },
    ),
  ),
);

和

也替换此方法

Card buildBox(Checkboxstate checkbox, int index) {
return Card(
  key: UniqueKey(),
  child: CheckboxListTile(
    title: Text(checkbox.title),
    key: UniqueKey(),
    controlAffinity: ListTileControlAffinity.leading,
    value: checkbox.value,
    onChanged: (value) {
      setState(() {
        checkboxes.removeAt(index);
        checkbox.value = value;
      });
    },
  ),
);

}