筛选数据后显示的 Flutter ListView 分隔符

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);
            },
          )),
    );
  }