如何将多个小部件添加到小部件列表答案

【问题标题】：How to add multiple widgets to widget list如何将多个小部件添加到小部件列表
【发布时间】：2021-03-01 19:12:09
【问题描述】：

我目前正在开发我的第一个 Flutter 应用程序并且仍在学习。我想我有点想出如何组合和添加多个小部件。水龙头栏实际上正在工作。当我在列中添加点击栏时，它不再工作了。我想添加一个底部导航栏。它也可以在没有 TapBar 的情况下工作。但是与 Column 和 Widget List 结合使用都不起作用，我不知道为什么。

Widget build(BuildContext context) {
 return new Scaffold(
   appBar: new TabBar(
       controller: controller,
       labelColor: Colors.white,
       tabs: <Tab>[
         new Tab(
           icon: new Icon(
           Icons.arrow_back,
           color: Theme.of(context).primaryColor,
         )),
         new Tab(
             icon: new Icon(
           Icons.swap_calls,
           color: Theme.of(context).primaryColor,
         )),
         new Tab(
             icon: new Icon(
           Icons.favorite,
           color: Theme.of(context).primaryColor,
         )),
       ]),
   
   body: Column(
     children: <Widget>[
       new TabBarView(
         controller: controller,
         children: <Widget>[
           new first.Outfits(),
           new second.Swaps(),
           new third.Favorites()
         ],
       ),

       //BottomNavigationBar
       /*  new BottomNavigationBar(
         items: const <BottomNavigationBarItem>[
           BottomNavigationBarItem(
             icon: Icon(Icons.home),
             title: Text('Home'),
           ),
           BottomNavigationBarItem(
             icon: Icon(Icons.people),
             title: Text('Friends'),
           ),
           BottomNavigationBarItem(
             icon: Icon(Icons.person),
             title: Text('Profile'),
           ),
         ],
         // currentIndex: _selectedIndex,
         // onTap: _onItemTab,
       ),*/
       //  ],
       //),
     ],
   ),
 );
}```

Does anybody know what might be the reason ? Maybe it is the other Widgetlist in my TabBar Widget ? 
Thank you!

【问题讨论】：

您能否补充一些细节，比如您从 Flutter 中得到了什么样的错误？

标签： flutter dart widget flutter-widget

【解决方案1】：

因为您已经使用了Scaffold，所以只需使用它的bottomNavigationBar

直接在bottomNavigationBar属性中设置BottomNavigationBar

[bottomNavigationBar] 在 [persistentFooterButtons] 下方呈现和[身体]。

【讨论】：

【解决方案2】：

很简单，将 TabBarView 包裹在 Expanded 小部件中，以便在 Column 中使用它

     Column(
        children: <Widget>[
          Expanded(
            child: new TabBarView(
              controller: controller,
              children: <Widget>[
                Text('Hi 1'),
                Text('Hi 2'),
                Text('Hi 3'),
              ],
            ),
          ),
        ],
     ),

【讨论】：