Question

下面的ListView显示了一个数据列表，该数据可以正确显示，并且在每个项目下方都有一个分隔符，但是当过滤列表时，分隔符仍然会显示。

Expanded(
        child: ListView.separated(
            separatorBuilder: (context, index) => Divider(
                  color: Colors.grey,
                ),
            itemCount: list.length,
            itemBuilder: (BuildContext context, int index) {
              return filter == null || filter == ""
                  ? ListTile(
                      trailing: Icon(Icons.keyboard_arrow_right),
                      title: Text(
                        list[index].title,
                      ),
                      onTap: () {
                        _edit(list[index].docid);
                      },
                    )
                  : list[index].term.toLowerCase().contains(filter)
                      ? ListTile(
                          trailing: Icon(Icons.keyboard_arrow_right),
                          title: Text(
                            list[index].title,
                          ),
                          onTap: () {
                            _edit(list[index].docid);
                          },
                        )
                      : Container();
            }),
        // ),
      ),

**编辑**

由于我想在搜索框中键入内容时显示和过滤列表，因此我使用了正确的答案代码，如下所示：

Widget _renderList() {
    List filteredList;

    if (filter != null && filter != '') {
      filteredList = list
          .where(
            (item) =>
                item.term.toLowerCase().contains(filter),
          )
          .toList();
    } else {
      filteredList = list.toList();
    }
    return Expanded(
      child: ListView.separated(
          separatorBuilder: (context, index) => Divider(
                color: Colors.grey,
              ),
          itemCount: filteredList.length,
          itemBuilder: (BuildContext context, int index) => ListTile(
                trailing: Icon(Icons.keyboard_arrow_right),
                title: Text(
                  filteredList[index].term,
                ),
                onTap: () {
                  _editTerm(filteredList[index].docid);
                },
              )),
    );
  }

Answer 1

ListView.seperated（...）创建一个固定长度的可滚动线性数组，其中包含列表项“分隔符”分隔的列表“项”。

在您的代码中，当您应用过滤器时，如果某个项目与该过滤器不匹配，则会将其呈现为空的容器。该容器仍然是一个列表项，尽管是空的。因此，ListView也将为其呈现分隔符。

要解决此问题，请将经过过滤的列表传递给ListView。

按如下所示重构代码

Widget renderList() {
    List filteredList = list
        .where((item) => filter != null && filter != '' && item.term.toLowerCase().contains(filter))
        .toList();
    return Expanded(
      child: ListView.separated(
          separatorBuilder: (context, index) =>
              Divider(
                color: Colors.grey,
              ),
          itemCount: filteredList.length,
          itemBuilder: (BuildContext context, int index) => ListTile(
            trailing: Icon(Icons.keyboard_arrow_right),
            title: Text(
              filteredList[index].title,
            ),
            onTap: () {
              _edit(filteredList[index].docid);
            },
          )),
    );
  }

过滤数据后显示的Flutter ListView分隔符

1 个答案: