如何在ListView.Builder中过滤ListTile,仅显示含'a'的列表元素?
实现列表过滤只显示包含'a'的元素
当然可以,这里给你两种可行的实现方式:
方式一:先过滤列表再构建(推荐)
先对原列表做过滤处理,只保留值为'a'的元素,再用过滤后的列表来生成ListView,这种方式不会产生无效的空占位项,性能和布局表现更好:
// 第一步:过滤原列表,得到只包含'a'的新列表 final filteredList = list.where((item) => item == 'a').toList(); // 第二步:基于过滤后的列表构建ListView ListView.builder( itemCount: filteredList.length, shrinkWrap: true, builder: (context, index) { return ListTile( title: Text(filteredList[index]), onTap: () {}, ); }, )
注:你原来的代码里Text(list.index)是语法错误,正确写法是Text(list[index]),上面的示例已经修正了这个问题。
方式二:在列表构建时动态判断(不推荐)
如果不想额外生成过滤后的列表,也可以在builder回调里判断当前元素是否为'a',非'a'元素返回空容器,但这种方式itemCount还是原列表的长度,会生成空的占位项,可能影响列表性能和布局:
ListView.builder( itemCount: list.length, shrinkWrap: true, builder: (context, index) { final item = list[index]; // 仅渲染值为'a'的元素,其他返回空容器 if (item != 'a') { return const SizedBox.shrink(); } return ListTile( title: Text(item), onTap: () {}, ); }, )
内容的提问来源于stack exchange,提问作者Victor Woode
相关产品推荐
相关产品推荐

