Flutter页面ListView默认无数据，仅点击搜索/热重载后加载的问题

我在开发Flutter应用时遇到了一个头疼的问题：进入这个搜索页面时，ListView始终是空的，但实际上应该有不少数据。只有点击搜索栏或者执行热重载之后，数据才会加载并正确显示。我想要实现的是，进入页面时默认展示全部数据，然后再根据用户输入进行搜索过滤，有没有大佬能帮忙看看怎么解决？

我的代码： #

class _SearchState extends State<Search> {
  List _searchResult = [];
  TextEditingController controller = new TextEditingController();
  var userDetails = {};
  List returnTicketDetails;

  @override
  Widget build(BuildContext context) {
    // 修复：原代码缺少Scaffold包裹，补充符合Flutter页面结构规范
    return Scaffold(
      body: new Column(
        children: <Widget>[
          new Container(
            color: Theme.of(context).primaryColor,
            child: new Padding(
              padding: const EdgeInsets.all(8.0),
              child: new Card(
                child: new ListTile(
                  leading: new Icon(Icons.search),
                  title: new TextField(
                    controller: controller,
                    decoration: new InputDecoration(
                        hintText: 'Search', border: InputBorder.none),
                    onChanged: onSearchTextChanged,
                  ),
                  trailing: new IconButton(
                    icon: new Icon(Icons.cancel),
                    onPressed: () {
                      controller.clear();
                      onSearchTextChanged('');
                    },
                  ),
                ),
              ),
            ),
          ),
          new Expanded(
            child: _searchResult.length != 0 || controller.text.isNotEmpty
                ? new ListView.builder(
                    itemCount: _searchResult.length,
                    itemBuilder: (context, i) {
                      return new Card(
                        child: new Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            new Row(children: <Widget>[
                              new Container(
                                  width: 80.0,
                                  height: 80.0,
                                  decoration: new BoxDecoration(
                                      shape: BoxShape.circle,
                                      image: new DecorationImage(
                                          fit: BoxFit.fill,
                                          image: new NetworkImage(
                                              "https:.....")))),
                              new Text(" " +
                                  userDetails[returnTicketDetails[i]["user_id"]]["first_name"] +
                                  " " +
                                  (userDetails[returnTicketDetails[i]["user_id"]]["last_name"]),
                              )
                            ])
                          ],
                        ),
                      );
                    },
                  )
                : new ListView.builder(
                    itemCount: _searchResult.length,
                    itemBuilder: (context, i) {
                      return new Card(
                        child: new ListTile(),
                        margin: const EdgeInsets.all(0.0),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }

  onSearchTextChanged(String text) async {
    _searchResult.clear();
    if (text.isEmpty) {
      for (int i = 0; i < returnTicketDetails.length; i++) {
        _searchResult.add(userDetails[returnTicketDetails[i]["user_id"]]);
      }
      setState(() {});
      return;
    }
    for (int i = 0; i < returnTicketDetails.length; i++) {
      if (userDetails[returnTicketDetails[i]["user_id"]]["first_name"]
              .toString()
              .toLowerCase()
              .contains(text.toLowerCase()) ||
          userDetails[returnTicketDetails[i]["user_id"]]["last_name"]
              .toString()
              .toLowerCase()
              .contains(text.toLowerCase()) ||
          returnTicketDetails[i]["code"]
              .toString()
              .toLowerCase()
              .contains(text.toLowerCase())) {
        _searchResult.add(userDetails[returnTicketDetails[i]["user_id"]]);
      }
    }
    setState(() {});
  }
}

问题分析 #

你的核心问题是页面初始化时没有主动触发数据加载逻辑：
当前onSearchTextChanged方法只有在搜索框内容变化、点击取消按钮时才会被调用，页面刚启动时完全没有触发它，导致_searchResult一直是空数组，ListView自然没有内容。而点击搜索栏/热重载时，间接触发了方法执行，数据才被加载进来。

另外还要注意：如果returnTicketDetails和userDetails是异步获取的（比如从API接口、本地数据库加载），那还要确保这两个数据在调用加载方法前已经准备好，否则即使调用了onSearchTextChanged，也会因为数据源为空而加载不到内容。

解决方案 #

1. 初始化时主动触发全量数据加载

在initState方法里调用onSearchTextChanged('')，利用你已经写好的空文本逻辑来加载全部数据。这里推荐用addPostFrameCallback确保页面构建完成后再执行，避免可能的上下文问题：

@override
void initState() {
  super.initState();
  // 页面首次构建完成后，调用搜索方法加载全量数据
  WidgetsBinding.instance.addPostFrameCallback((_) {
    onSearchTextChanged('');
  });
}

2. 处理异步数据源的情况

如果returnTicketDetails和userDetails是异步获取的，比如在页面初始化时调用API获取，那需要等待数据加载完成后再调用onSearchTextChanged，示例如下：

@override
void initState() {
  super.initState();
  // 先获取数据，再加载列表
  _loadInitialData().then((_) {
    onSearchTextChanged('');
  });
}

// 模拟异步获取数据的方法
Future<void> _loadInitialData() async {
  // 这里替换成你的实际数据获取逻辑，比如调用API、读取本地存储
  // returnTicketDetails = await ApiService.getTicketDetails();
  // userDetails = await ApiService.getUserDetails();
}

3. 修复build方法的小问题

原代码的build方法直接返回Column不符合Flutter规范，需要用Scaffold包裹起来，我已经在代码示例里补充了这一点。

这样修改后，页面一启动就会自动加载全部数据并展示在ListView里，之后用户输入搜索内容时也能正常过滤。

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