Flutter页面渲染时initState函数未执行，求排查解决

问题根源分析 #

• 异步执行顺序错误：getNews是异步函数，你在调用它后立刻执行print(ActualNews.leftNewsInfo[0])，此时异步请求还未完成，列表为空，访问索引0会抛出异常，导致后续print("hello world")也无法执行。
• 参数传递无效：getNews里的lInfo是局部参数，直接赋值lInfo = [...]只会修改局部变量的引用，不会改变ActualNews中的静态列表。
• 未触发UI更新：即使获取到数据，也没有调用setState通知Flutter刷新UI，NewsBox始终拿到空数据。
• 静态状态设计不合理：用StatefulWidget的静态变量存页面状态，会导致多个页面实例共享状态，引发不可预期的问题。

修复后的完整代码 #

import 'package:flutter/material.dart';
import 'package:news_upload/widgets/news_box.dart';
import 'package:simple_link_preview/simple_link_preview.dart';

class ActualNews extends StatefulWidget {
  static const routeName = '/actualNews';

  @override
  State<ActualNews> createState() => _ActualNewsState();
}

class _ActualNewsState extends State<ActualNews> {
  final leftNewsLink =
      "https://www.ndtv.com/india-news/goa-congress-requests-speaker-to-disqualify-mlas-michael-lobo-digambar-kamat-after-accusing-them-of-planning-defections-3146905";

  final rightNewsLink =
      "https://zeenews.india.com/india/kaali-poster-row-tmc-mp-insults-maa-kali-but-mamata-banerjee-smriti-irani-lashes-out-at-mahua-moitra-2484047.html";

  // 将状态移到State类中，避免静态变量的全局污染问题
  List<dynamic> leftNewsInfo = [];
  List<dynamic> rightNewsInfo = [];
  bool isLoading = true; // 新增加载状态，防止空数据报错

  Future<void> getNews() async {
    try {
      final L = await SimpleLinkPreview.getPreview(leftNewsLink);
      final R = await SimpleLinkPreview.getPreview(rightNewsLink);
      
      // 确保页面未销毁时再更新状态
      if (mounted) {
        setState(() {
          // 用空安全语法处理可能为空的预览数据
          leftNewsInfo = [L?.title ?? '', L?.image ?? ''];
          rightNewsInfo = [R?.title ?? '', R?.image ?? ''];
          isLoading = false;
        });
        // 数据获取完成后再打印
        print(leftNewsInfo[0]);
        print("hello world");
      }
    } catch (e) {
      print('获取新闻预览失败: $e');
      if (mounted) {
        setState(() {
          isLoading = false;
        });
      }
    }
  }

  @override
  void initState() {
    super.initState();
    getNews(); // 直接调用异步函数，无需多余的Future.delayed
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.topLeft,
        children: <Widget>[
          // 加载状态显示指示器，避免空数据传入NewsBox
          isLoading 
              ? const Center(child: CircularProgressIndicator())
              : NewsBox(leftNewsInfo, rightNewsInfo),
          IconButton(
            icon: const Padding(
              padding: EdgeInsets.all(20.0),
              child: Icon(Icons.arrow_back),
            ),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

关键修复说明 #

1. 移除静态状态：把新闻数据移到State类内部，避免多个页面实例共享同一状态的问题。
2. 修正异步逻辑：在异步请求完成后再执行打印操作，确保拿到有效数据；添加异常捕获，避免请求失败导致崩溃。
3. 触发UI更新：用setState通知Flutter刷新界面，同时通过isLoading状态控制加载中/数据就绪的UI切换，彻底解决空变量引发的URI错误。
4. 空安全优化：用?.和??处理可能为空的预览结果，替代强制解包!；添加mounted判断，防止页面销毁后调用setState引发警告。

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