弹奏列表视图分离器在过滤数据后显示

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也将为它提供Semperator。

要解决此情况，请将过滤列表传递到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);
            },
          )),
    );
  }