Flutter ListView初始不显示列表，仅搜索时展示结果问题

核心问题 #

页面初始化时ListView不显示数据，仅搜索时才展示，根源在于：

• 数据加载完成后，未将完整技师列表同步到用于展示的_techniciansList
• 搜索文本清空时，未恢复展示全部数据
• 加载状态逻辑混乱，列表展示的条件判断存在漏洞
• 存在未使用的冗余变量，导致状态管理不一致

具体修复步骤 #

1. 修正数据加载后的列表初始化

在getData方法中，获取到接口数据后同步到展示列表，并规范加载状态的切换：

Future getData() async {
  SharedPreferences preferences = await SharedPreferences.getInstance();
  bearerToken = preferences.getString(AppConstants.appToken)!;

  String url = AppConstants.baseUrl + AppConstants.allTechnicianListApi;
  try {
    setState(() {
      // 开始加载时标记为true
      isDataLoading = true;
    });
    final response = await http.get(Uri.parse(url), headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization': 'Bearer $bearerToken',
    });
    debugPrint("Token: $bearerToken");
    debugPrint("Response::: ${response.body}");
    TechnicianModel model = TechnicianModel.fromJson(jsonDecode(response.body));
    _technicians = model.data!;
    // 将完整数据同步到展示列表
    _techniciansList = List.from(_technicians);
    setState(() {
      // 加载完成标记为false
      isDataLoading = false;
    });
    print("hello...: ${_technicians.length}");
  } catch (exception) {
    print(exception);
    setState(() {
      isDataLoading = false;
    });
  }
}

2. 修复搜索清空时的逻辑

修改searchTechnicians方法，当搜索文本为空时恢复展示全部数据，同时支持不区分大小写的搜索：

searchTechnicians(String text) {
  _techniciansList.clear();
  final lowerText = text.toLowerCase();
  if (lowerText.isEmpty) {
    // 文本清空时恢复所有数据
    _techniciansList = List.from(_technicians);
    setState(() {});
    return;
  }
  _technicians.forEach((element) {
    if (element.name!.toLowerCase().contains(lowerText)
        || element.email!.toLowerCase().contains(lowerText)
        || element.phone!.toLowerCase().contains(lowerText)) {
      _techniciansList.add(element);
    }
  });
  print("searchresults: ${_techniciansList.length}");
  setState(() {});
}

3. 简化列表展示的条件判断

重构_userListView，明确区分加载状态和数据展示逻辑：

Widget _userListView() {
  // 加载中显示进度条
  if (isDataLoading) {
    return const Expanded(
      child: Center(child: CircularProgressIndicator(
        color: ColorResources.primaryColor,)),
    );
  }

  // 数据加载完成后展示列表
  return Expanded(child: ListView.builder(
      itemCount: _techniciansList.length,
      itemBuilder: (context, index) {
        return Container(
          margin: EdgeInsets.symmetric(horizontal: 15.w),
          height: 32.h,
          child: Row(
            children: [
              Container(
                width: 80.w,
                height: double.infinity,
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.only(left: 10.w),
                child: Text(
                  _techniciansList[index].name!,
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      overflow: TextOverflow.ellipsis,
                      fontSize: 11.sp),
                ),
              ),
              Container(
                width: 170.w,
                height: double.infinity,
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.only(left: 10.w),
                child: Text(
                  _techniciansList[index].email!,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 11.sp),
                ),
              ),
              Expanded(
                child: Container(
                  height: double.infinity,
                  alignment: Alignment.centerLeft,
                  padding: EdgeInsets.only(left: 5.w),
                  child: Text(
                    _techniciansList[index].phone ?? '',
                    style: TextStyle(
                        color: Colors.black,
                        overflow: TextOverflow.ellipsis,
                        fontWeight: FontWeight.w400,
                        fontSize: 11.sp),
                  ),
                ),
              )
            ],
          ),
        );
      }
  ));
}

4. 清理冗余代码

移除未定义的getAllTechniciansData()调用和未使用的searchController变量：

@override
void initState() {
  getData();
  super.initState();
}

额外优化建议 #

• 使用List.from()复制列表，避免直接赋值引用导致的状态异常
• 可添加空数据状态提示，当接口返回空列表时显示友好提示
• 对接口请求添加超时处理，提升稳定性

内容的提问来源于stack exchange，提问作者Aqeel Mughal