Flutter TextField搜索无匹配项时页面除AppBar外空白

页面空白是列表渲染逻辑的索引和计数错误导致的：

• 你将搜索栏作为ListView.builder的第0项（index=0）渲染，但itemCount直接取_itemsForDisplay的长度。当输入无匹配内容时，_itemsForDisplay长度为0，itemCount变为0，列表不会渲染任何子项——包括搜索栏本身，直接出现空白。
• 列表项取值索引存在偏移：搜索栏占了index=0的位置，实际数据项从index=1开始，原代码直接用_itemsForDisplay[index]取值，会出现索引错位，无结果时还会触发数组越界异常。

调整列表计数、索引逻辑，增加无结果兜底提示：

• itemCount固定在搜索结果长度基础上加1，永远为搜索栏预留渲染位置
• 渲染数据项时，将列表index减1后再去结果数组取对应数据，修正索引偏移
• 无匹配结果时显示提示文案，避免空白

修复后的核心代码如下：

// 替换原有的ListView.builder部分
Expanded(
  child: ListView.builder(
    itemBuilder: (context, index) {
      // 固定第0位渲染搜索栏
      if (index == 0) return _searchBar();
      // 计算数据项在结果数组中的真实索引
      final realItemIndex = index - 1;
      // 无匹配结果时显示兜底提示
      if (realItemIndex >= _itemsForDisplay.length) {
        return const Padding(
          padding: EdgeInsets.symmetric(vertical: 30),
          child: Center(child: Text('未找到匹配内容')),
        );
      }
      return _ListItem(realItemIndex);
    },
    // 计数固定+1，给搜索栏留位置
    itemCount: _itemsForDisplay.length + 1,
  ),
)

_ListItem组件无需额外修改，传入修正后的realItemIndex后，原有_itemsForDisplay[index]的取值逻辑可以正常工作。

可选优化：搜索逻辑中可增加输入为空时直接返回全量列表的判断，避免不必要的遍历

onChanged: (text) {
  final searchKey = text.toLowerCase().trim();
  setState(() {
    if (searchKey.isEmpty) {
      _itemsForDisplay = _items;
      return;
    }
    _itemsForDisplay = _items.where((item) {
      final itemTitle = item.toString().toLowerCase();
      return itemTitle.contains(searchKey);
    }).toList();
  });
},

内容的提问来源于stack exchange，提问作者Ahmed Azeez