Flutter TabBarView添加多内容报无children参数错误及用法咨询

首先明确：你的多迷你游戏用标签栏做切换的需求完全可以通过TabBarView实现，这也是TabBarView的典型适用场景。

报错原因 #

你遇到的Error: No named parameter with the name 'children'错误和TabBarView无关，是你错误给Center组件传了children参数：

• Center是单子组件，仅支持child参数，没有多子节点的children属性
• 你要在一个居中区域内放多个垂直排列的组件，需要在Center内部嵌套多子布局组件Column，把说明文本、按钮等放在Column的children里

修正后的关键代码 #

你只需要修改TabBarView下第一个标签页的代码即可：

TabBarView(
  children: <Widget>[
    Center(
      // Center仅传child参数，嵌套Column做多组件垂直排列
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'Dice Game',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          SizedBox(height: 30.0),
          Text(
            'Guess the next roll of the dice',
            style: TextStyle(
              fontSize: 15.0,
            ),
          ),
          Text(
            'If you guessed right you win',
            style: TextStyle(
              fontSize: 15.0,
            ),
          ),
          SizedBox(height: 30.0),
          // 新增跳转游戏页面的按钮
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => DiceHome()),
              );
            },
            child: Text('启动骰子游戏'),
          )
        ],
      ),
    ),
    Center(child: Text('loading...')),
    Center(child: Text('loading...')),
    Center(child: Text('loading...')),
  ],
)

后续扩展方案 #

剩下三个标签页直接对应替换成你其他游戏的介绍+启动按钮，或者直接嵌入对应游戏页面的根组件即可，不需要额外写页面切换逻辑，TabBarView会自动处理标签切换的滑动、动画效果，完全满足你减少重复代码的需求。

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