Flutter中如何向页面数组内的Widget传递tabIndex参数？

报错原因 #

这是Dart的类实例初始化规则限制：你在定义pages变量时直接初始化数组，属于类的初始化阶段执行逻辑，这个阶段实例的其他成员（比如tabIndex）还未完成初始化，所以不允许直接访问。

可行解决方案 #

方案1：将pages改为计算属性getter（适配tabIndex动态变化的场景） #

每次调用pages时才实时生成页面数组，此时实例已经完成初始化，可以正常访问tabIndex，且每次切换tab都会传入最新的索引值：

class _RootAppState extends State<RootApp> {
  int tabIndex = 0;

  // 改为getter，不要直接初始化final数组
  List<Widget> get pages => [
    Start(tabIndex: tabIndex),
    Quiz(tabIndex: tabIndex),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: getBody(),
    );
  }

  Widget getBody() {
    return pages[tabIndex];
  }
}

方案2：在initState中初始化pages（适配tabIndex固定不变的场景） #

initState是实例初始化完成后才会调用的生命周期方法，此时可以正常访问所有实例成员，这种方案只会生成一次页面实例，性能开销更低：

class _RootAppState extends State<RootApp> {
  int tabIndex = 0;
  // 用late修饰，延后初始化
  late final List<Widget> pages;

  @override
  void initState() {
    super.initState();
    // 在initState里赋值
    pages = [
      Start(tabIndex: tabIndex),
      Quiz(tabIndex: tabIndex),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: getBody(),
    );
  }

  Widget getBody() {
    return pages[tabIndex];
  }
}

注意：如果后续你会修改tabIndex的值做页面切换，这个方案里pages里存储的页面实例还是初始化时的旧参数，不会更新索引值，不适用动态切换tab的场景。

方案3：数组存储页面构造函数（扩展性最优） #

数组里不直接存Widget实例，而是存接收索引参数、返回页面的构造函数，调用时再传入当前索引，适合页面需要多参数传递的场景：

class _RootAppState extends State<RootApp> {
  int tabIndex = 0;

  // 定义构造函数数组
  final List<Widget Function(int)> pageBuilders = [
    (index) => Start(tabIndex: index),
    (index) => Quiz(tabIndex: index),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: getBody(),
    );
  }

  Widget getBody() {
    // 调用构造函数传入当前索引
    return pageBuilders[tabIndex](tabIndex);
  }
}

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