为什么Flutter的initState中异步加载数据不生效？如何实现启动自动加载？

问题原因 #

你的代码核心问题是异步请求获取到数据后没有调用setState通知Flutter框架更新UI：

• _getNews方法中更新了itemList的值后，没有触发UI重绘，界面始终显示初始的空列表，所以启动时呈现空白状态。
• 下拉刷新能显示内容属于时序巧合：_getData中调用的setState会触发一次UI重绘，如果此时异步请求刚好返回了数据，界面就会展示出内容，本身逻辑写法是不规范的。

修复方案 #

1. 调整_getNews逻辑，数据加载完成后主动调用setState触发重绘
2. 修正_getData的错误写法，不要把异步操作包裹在setState回调内
3. 可选：增加加载状态处理，优化用户体验

修改后的完整代码如下：

class _MyAppState extends State<MyApp> {
  List<NewsItem> itemList = [];
  // 可选加载状态，用来展示加载中提示
  bool _isLoading = false;

  Future<void> _getNews() async {
    _isLoading = true;
    // 若需要展示加载中状态，可在这里调用一次setState
    // setState(() {});
    try {
      final news = await http.get(Uri.parse(
          'https://newsapi.org/...'));
      if (news.statusCode == 200) {
        itemList.clear();
        var articles = jsonDecode(news.body)['articles'];

        for (int i = 0; i < articles.length; i++) {
          var newsItem = articles[i];
          var item = NewsItem.fromJson(newsItem);
          itemList.add(item);
        }
      } else {
        throw Exception('Failed to retrieve news.');
      }
    } catch(e) {
      // 可选：自行添加异常提示逻辑
      debugPrint('加载新闻失败: $e');
    } finally {
      _isLoading = false;
      // 数据更新完成后调用setState触发重绘
      setState(() {});
    }
  }

  Future<void> _getData() async {
    // 直接调用加载方法即可，不需要包裹setState
    await _getNews();
  }

  @override
  void initState() {
    super.initState();
    // 启动时自动加载数据
    _getNews();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NewsAPI.org Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("News App")),
        body: _isLoading 
          ? const Center(child: CircularProgressIndicator())
          : RefreshIndicator(
              onRefresh: _getData,
              child: ListView.builder(
                itemCount: itemList.length,
                itemBuilder: (context, i) {
                  return GestureDetector(
                    onTap: () {
                      if (itemList[i].url != null) {
                        var _url = itemList[i].url!;
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => DisplayWebPage(_url)),
                        );
                      }
                    },
                    child: Card(
                      elevation: 10,
                      shadowColor: Colors.black,
                      child: Padding(
                        padding: const EdgeInsets.all(10),
                        child: Column(
                          children: [
                            Image.network(itemList[i].urlToImage ?? ''),
                            Text(itemList[i].title ?? '',
                                style: const TextStyle(
                                    fontWeight: FontWeight.bold, fontSize: 14)),
                            Text(itemList[i].description ?? ''),
                            const Divider(
                              color: Colors.black,
                              height: 25,
                              thickness: 2,
                            ),
                          ],
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
      ),
    );
  }
}

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