flutter - Flutter：futurebuilder => item => dialog，按子项删除后刷新视图

Question

嗨，我做了一个未来构建器，它在收到一些日期后构建我一个包含一些项目的列表视图。

        FutureBuilder(
          future: getAllInstructors(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              List<Instructor> instructors = snapshot.data;
              return Expanded(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 30),
                  child: Column(
                    children: [
                      Align(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          instructors.length.toString() + " Instructors",
                          style: const TextStyle(
                            fontWeight: FontWeight.w600,
                            fontSize: 16,
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 20,
                      ),
                      Expanded(
                        child: ListView.separated(
                          itemBuilder: (context, int index) =>
                              InstructorItem(
                            instructor: instructors[index],
                          ),
                          separatorBuilder: (context, index) =>
                              const Divider(
                            color: Colors.grey,
                          ),
                          itemCount: instructors.length,
                        ),
                      ),
                    ],
                  ),
                ),
              );
            } else {
              return const Center(child: CircularProgressIndicator());
            }
          },
        ),

所以我现在的问题是，如果我滑动项目以调用它的功能delete()但页面不刷新

class InstructorItem extends StatelessWidget {
  const InstructorItem({
    Key? key,
    required this.instructor,
  }) : super(key: key);

  final Instructor instructor;

  @override
  Widget build(BuildContext context) {
    return Slidable(
      actionPane: const SlidableDrawerActionPane(),
      actionExtentRatio: 0.25,
      child: ListTile(
        leading: CircleAvatar(
          backgroundColor: Colors.white,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(45.0),
            child: Image(
              height: 35,
              width: 35,
              fit: BoxFit.cover,
              image: NetworkImage(instructor.image),
            ),
          ),
          foregroundColor: Colors.white,
        ),
        title: Text(
          instructor.getFullName(),
          style: const TextStyle(
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
      secondaryActions: <Widget>[
        IconSlideAction(
          color: Colors.transparent,
          iconWidget: Container(
            padding: const EdgeInsets.all(15),
            decoration: BoxDecoration(
              color: const Color(0xffFFECEC),
              borderRadius: BorderRadius.circular(15),
            ),
            child: const Icon(
              Icons.delete,
              color: Colors.red,
              size: 30,
            ),
          ),
          onTap: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return const CustomDialogBox(
                  title: "Warning",
                  descriptions:
                      "Are you sure you want to delete this instructor?",
                  type: DialogType.warning,
                );
              },
            ).then((value){
              if(value) delete(instructor);
            });
          },
        ),
      ],
    );
  }
}

所以我的问题是：如果对话框中的值是真的，我该如何正确编码它会删除讲师并刷新视图？

标签： flutterdart

Answer 1

我认为这是因为您在删除讲师模型时使用了不同的上下文。尝试这个：

如果要使用StatelessWidget，请创建一个可在类外使用的函数回调。

class InstructorItem extends StatelessWidget {
  final Function onDelete;
  const InstructorItem({
    Key? key,
    required this.instructor,
  }) : super(key: key);

  final Instructor instructor;

  @override
  Widget build(BuildContext context) {
    return Slidable(
      actionPane: const SlidableDrawerActionPane(),
      actionExtentRatio: 0.25,
      child: ListTile(
        leading: CircleAvatar(
          backgroundColor: Colors.white,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(45.0),
            child: Image(
              height: 35,
              width: 35,
              fit: BoxFit.cover,
              image: NetworkImage(instructor.image),
            ),
          ),
          foregroundColor: Colors.white,
        ),
        title: Text(
          instructor.getFullName(),
          style: const TextStyle(
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
      secondaryActions: <Widget>[
        IconSlideAction(
          color: Colors.transparent,
          iconWidget: Container(
            padding: const EdgeInsets.all(15),
            decoration: BoxDecoration(
              color: const Color(0xffFFECEC),
              borderRadius: BorderRadius.circular(15),
            ),
            child: const Icon(
              Icons.delete,
              color: Colors.red,
              size: 30,
            ),
          ),
          onTap: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return const CustomDialogBox(
                  title: "Warning",
                  descriptions:
                      "Are you sure you want to delete this instructor?",
                  type: DialogType.warning,
                );
              },
            ).then((value) {
              if (value) onDelete;
            });
          },
        ),
      ],
    );
  }
}

在具有 FutureBuilder 的类中调用它。

 FutureBuilder(
                  future: getAllInstructors(),
                  builder: (BuildContext context, AsyncSnapshot snapshot) {
                    if (snapshot.hasData) {
                      List<Instructor> instructors = snapshot.data;
                      return Expanded(
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 30),
                          child: Column(
                            children: [
                              Align(
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  instructors.length.toString() + " Instructors",
                                  style: const TextStyle(
                                    fontWeight: FontWeight.w600,
                                    fontSize: 16,
                                  ),
                                ),
                              ),
                              const SizedBox(
                                height: 20,
                              ),
                              Expanded(
                                child: ListView.separated(
                                  itemBuilder: (context, int index) =>
                                      InstructorItem(
                                    instructor: instructors[index],
                                    onDelete: setState(() => onDelete(instructors[index])),
                                  ),
                                  separatorBuilder: (context, index) =>
                                    const Divider(
                                    color: Colors.grey,
                                  ),
                                  itemCount: instructors.length,
                                ),
                              ),
                            ],
                          ),
                        ),
                      );
                    } else {
                      return const Center(child: CircularProgressIndicator());
                    }
                  },
                )