时间戳

首页 > 解决方案 > 从子小部件的 ListView 构建器中删除项目

flutter - 从子小部件的 ListView 构建器中删除项目

问题描述

我需要能够从子小部件中删除列表视图中的特定项目。然而，让这件事变得困难的是 ontap() 删除功能是在子小部件中定义的。

如何从孩子更改父小部件的状态？

父列表视图生成器

ListView.builder(
  shrinkWrap: true,
  physics:
      BouncingScrollPhysics(),
  itemCount: snapshot
      .data.datas.length,
  itemBuilder:
      (context, index) {
    if (snapshot
            .data
            .datas[index]
            .daysToOccurrence >=
        0) {
      if (_isSearching ==
          false) {
        return OrganizationList(
           
            id: snapshot
                .data
                .datas[index]
                .id);
      } else {
        return snapshot
                .data
                .datas[index]
                .id
                .toLowerCase()
                .contains(
                    _searchText
                        .toLowerCase())
            ? OrganizationList(
                
                id: snapshot
                    .data
                    .datas[
                        index]
                    .id,
              )
            : Container();
      }
    } else {
      return Container();
    }
  }),

OrganizationList 小部件（在子小部件中定义）

Align(
    alignment: Alignment.bottomLeft,
    child: GestureDetector(
      onTap: () async {
        setState(() {
          _isLoading = true;
        });
        await _organizationBloc
            .delete(widget.id);

        setState(() {
          _isLoading = false;
        });
      },
      child: Text(
        "Delete",
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.black54,
        ),
      ),
    ))

标签： flutter

解决方案

找到了解决方案。诀窍是在父窗口小部件中定义一个删除方法，将 ObjectKey() 传递给子窗口小部件，并将 voidCallback 参数传递给子窗口小部件。

voidCallback 将映射到父窗口小部件中的删除方法，您可以从子窗口小部件调用该函数。

父小部件

  void _deleteItem(Organization item, List<Organization> organizationList) {
    organizationList.remove(item);
    setState(() {});
  }

更新了 ListViewBuilder

ListView.builder(
  key: UniqueKey(),
  shrinkWrap: true,
  physics:
      BouncingScrollPhysics(),
  itemCount: snapshot
      .data.datas.length,
  itemBuilder:
      (context, index) {
    if (snapshot
            .data
            .datas[index]
            .daysToOccurrence >=
        0) {
      if (_isSearching ==
          false) {
        return OrganizationList(
           key: ObjectKey(
            snapshot.data
                    .datas[
                index]),
                onDeleteClicked: () =>
              _deleteItem(
                  snapshot.data.datas[
              index], snapshot.data.datas),
            id: snapshot
                .data
                .datas[index]
                .id);
      } else {
        return snapshot
                .data
                .datas[index]
                .id
                .toLowerCase()
                .contains(
                    _searchText
                        .toLowerCase())
            ? OrganizationList(
                
                id: snapshot
                    .data
                    .datas[
                        index]
                    .id,
              )
            : Container();
      }
    } else {
      return Container();
    }
  }),

然后在具有删除功能的子小部件中，我可以调用它：

widget.onDeleteClicked();

推荐阅读