Flutter配置BottomNavigationBar后HTTP请求结果无法展示如何解决

问题原因 #

• 你将_widgetOptions的初始化逻辑放在了仅执行一次的initState生命周期中，初始化时HTTP请求尚未返回，posts为空数组，你提前创建的两个Tab页组件绑定的都是初始状态的空数据。
• 后续请求完成调用setState更新posts时，你提前创建好的_widgetOptions中的静态组件不会自动重建，无法获取到最新的posts数据，因此列表无法正常渲染。

解决方案 #

你只需要调整_widgetOptions的生成时机，将其从initState中移除，改为每次页面build时动态生成即可，修改后的核心代码如下：

class _MyHomePageState extends State<MyHomePage> {
  late List<Post> posts = <Post>[];
  late bool loading;
  int _selectedIndex = 0;

  // 改为getter，每次访问时用最新的状态动态生成页面组件
  List<Widget> get _widgetOptions => [
    // 第一个Tab页的Column代码和你之前写的完全一致，直接复制过来即可
    Column(...),
    // 第二个Tab页的Column代码和你之前写的完全一致，直接复制过来即可
    Column(...),
  ];

  @override
  void initState() {
    super.initState();
    loading = true;
    Services.getPosts().then((list) {
      setState(() {
        posts
          ..clear()
          ..addAll(list);
        loading = false;
      });
    });
    // 删掉原来在initState里的_widgetOptions初始化代码
  }

  // build方法其余逻辑保持不变
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 原有AppBar、BottomNavigationBar代码不变
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
    );
  }
}

优化建议 #

你两个Tab页的内容完全一致，可以把公共部分抽成独立的组件，避免冗余代码：

// 抽成独立的公共组件
class PostListPage extends StatelessWidget {
  final List<Post> posts;
  const PostListPage({super.key, required this.posts});

  @override
  Widget build(BuildContext context) {
    return Column(
      // 把你之前写的Tab页Column内容直接复制到这里即可
    );
  }
}

// 然后_widgetOptions就可以简化为
List<Widget> get _widgetOptions => [
  PostListPage(posts: posts),
  PostListPage(posts: posts),
];

内容的提问来源于stack exchange，提问作者OE SEOK HWANG