Flutter中TabBarView添加多个内容答案

【问题标题】：Adding multiple content in TabBarView in FlutterFlutter中TabBarView添加多个内容
【发布时间】：2021-06-08 08:26:19
【问题描述】：

我正在尝试在颤动的 TabBarView 中制作多个内容，例如添加迷你指令和开始按钮以导航到游戏屏幕，但它不断给我类似的错误

“错误：没有名称为 'children' 的命名参数”

这是我的代码

import 'package:flutter/material.dart';
import 'DiceHome.dart';
import 'HclcHome.dart';
import 'HotHome.dart';
import 'JnpHome.dart';
import 'icons.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 4,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Pocket Money:'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(MyFlutterApp.dice)), //DiceTab
                Tab(icon: Icon(MyFlutterApp.hand)), //JnPTab
                Tab(icon: Icon(MyFlutterApp.clovers_card)), //HclcTab
                Tab(icon: Icon(MyFlutterApp.coins)), //HotTab
              ], //tabs
            ), //TabBar
          ), //appbar
          drawer: Drawer(), //drawer
          body: TabBarView(
            children: const <Widget>[
              Center(
                children: <Widget>[
                  Text(
                    'Dice Game',
                    style: TextStyle(
                      fontSize: 30.0,
                    ), //TextStyle
                  ), //Text
                  SizedBox(height: 30.0),
                  Text(
                    'Guess the next roll of the dice',
                    style: TextStyle(
                      fontSize: 15.0,
                    ), //TextStyle
                  ), //Text
                  Text(
                    'If you guessed right yo win',
                    style: TextStyle(
                      fontSize: 15.0,
                    ), //TextStyle
                  ), //Text
                  SizedBox(height: 30.0),
                ], //Children
              ), //Center,
              Center(child: Text('loading...')), //Center
              Center(child: Text('loading...')), //Center
              Center(child: Text('loading...')), //Center
            ], //children
          ), //TabBarView
        ), //Scaffold
      ), //DefaultTabController
    ); //MaterialApp
  } //build
}

我的目标是制作一个包含多个小游戏的应用，使用标签栏作为我的游戏选择器以减少屏幕代码，是否可以使用标签栏视图？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

Center 接受一个孩子（单个小部件）而不是孩子（一个小部件列表）。如果您希望在中心显示多个小部件，您应该使用行、列、堆栈等（任何带有子的小部件）。试试这个：

...
Center(
  child: Column(
    children: <Widget>[
      Text(
        'Dice Game',
        style: TextStyle(
          fontSize: 30.0,
        ), //TextStyle
      ), //Text
      SizedBox(height: 30.0),
      Text(
        'Guess the next roll of the dice',
        style: TextStyle(
          fontSize: 15.0,
        ), //TextStyle
      ), //Text
      Text(
        'If you guessed right yo win',
        style: TextStyle(
          fontSize: 15.0,
        ), //TextStyle
      ), //Text
      SizedBox(height: 30.0),
    ], //Children
  ), //Column
), //Center
...

【讨论】：