Flutter底部导航栏传选中索引跳转页面报错如何解决？

核心问题梳理 #

• 可选入参无默认值，存在空值赋值风险：LayOutScreen的selectedIndex为可选参数，未配置默认值，当未传参时int类型的_selectedIndex会被赋值为null，触发类型异常。
• 标题与选中索引不同步：initState中仅更新了选中索引，未同步更新对应标题，会出现页面内容和顶部AppBar标题不匹配的问题。
• 跳转逻辑不符合需求：当前用Navigator.push跳转的是全新的LayOutScreen实例，会在原有页面上堆叠新页面，而非在原有Scaffold结构下切换tab，会额外出现返回按钮、页面层级冗余的问题。

具体代码修复 #

1. 修复入参与标题同步问题 #

修改LayOutScreen的构造函数和initState逻辑：

class LayOutScreen extends StatefulWidget {
  static const String id = "layOutScreen";
  // 给可选参数加默认值，避免空值
  final int selectedIndex;
  LayOutScreen({this.selectedIndex = 1});

  @override
  _LayOutScreenState createState() => _LayOutScreenState();
}

class _LayOutScreenState extends State<LayOutScreen> {
  int _selectedIndex = 1;
  String _title;
  // 把scaffoldKey移到State内部，避免全局冲突
  final _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  initState(){
    super.initState();
    _selectedIndex = widget.selectedIndex;
    // 根据传入的索引同步设置标题
    switch(_selectedIndex) {
      case 0: _title = 'Anime Quiz'; break;
      case 1: _title = 'Home'; break;
      case 2: _title = 'Anime News'; break;
    }
  }
  // 把方法改成公开，方便子页面调用
  void onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      switch(index) {
        case 0: { _title = 'Anime Quiz'; }
        break;
        case 1: { _title = 'Home'; }
        break;
        case 2: { _title = 'Anime News'; }
        break;
      }
    });
  }
  // 其余原有代码保持不变
}

2. 优化跳转逻辑（保留原有Scaffold结构） #

如果点击按钮的位置是LayOutScreen的子页面（比如HomeScreen内的按钮），不要新开页面，直接调用父组件的切换方法即可：

SimpleCard(
    title1: 'ANIME',
    title2: 'QUIZ',
    onTap: () {
      // 查找父级LayOutScreen的状态实例，直接切换tab
      final layOutState = context.findAncestorStateOfType<_LayOutScreenState>();
      layOutState?.onItemTapped(0);
    },
 ),

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