Flutter TabBar 和 TabBarView 在应用程序的主体内答案

【问题标题】：Flutter TabBar and TabBarView inside body of the applicationFlutter TabBar 和 TabBarView 在应用程序的主体内
【发布时间】：2019-08-17 09:01:52
【问题描述】：

我试图为我的应用程序构建这样的 UI。但是选项卡的视图是不可见的。我在许多 Flutter 应用程序中都使用过标签，但 UI 必须完全如下所示

以图片为背景的应用栏
应用栏部分用户图像的一半，其余部分位于其下方
这些下方的标签栏。 . . .

我的代码在这里

class _MyHomePageState extends State<MyHomePage> with 
TickerProviderStateMixin{
double screenSize;
double screenRatio;
AppBar appBar;
List<Tab> tabList = List();
TabController _tabController;
@override
void initState() {
tabList.add(new Tab(text:'Overview',));
tabList.add(new Tab(text:'Workouts',));
_tabController = new TabController(vsync: this, length: 
tabList.length);
super.initState();
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
screenSize = MediaQuery.of(context).size.width;
appBar = AppBar(
 backgroundColor: Colors.transparent,
 elevation: 0.0,
);
return Container(
 color: Colors.white,
 child: Stack(
   children: <Widget>[
     new Container(
       height: 300,
       width: screenSize,
       decoration:new BoxDecoration(
         image: new DecorationImage(
           image: new AssetImage("images/app_image.jpg"),
           fit: BoxFit.cover,
         ),
       ),
     ),
     Scaffold(
       backgroundColor: Colors.transparent,
       appBar: appBar,
       body:
         Stack(
           children: <Widget>[
             new Positioned(
               child: Column(
                 children: <Widget>[
                   Center(
                     child: Container(
                       child: CircleAvatar(
                           backgroundImage: 
NetworkImage('http://res.cloudinary.com/'),
                         backgroundColor: Colors.green,
                         radius: 20,
                       ),
                     ),
                   ),
                   SingleChildScrollView(
                     child: Container(
                       color: Colors.white,
                       child: Column(
                         mainAxisAlignment: MainAxisAlignment.center,
                         children: <Widget>[
                           new Text('* * * * *',textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0,color: Colors.pink),),
                           new Text('CAPTAIN',textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0)),
                         ],
                         crossAxisAlignment: CrossAxisAlignment.center,
                       ),
                     ),
                   ),
                 ],
               ),
               width: screenSize,
               top: 170,
             ),
              new Positioned(
                width: screenSize,
                top: 310,
                child: Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: new Column(
                   children: <Widget>[
                     new Container(
                       decoration: new BoxDecoration(color: Theme.of(context).primaryColor),
                       child: new TabBar(
                         controller: _tabController,
                         indicatorColor: Colors.pink,
                         indicatorSize: TabBarIndicatorSize.tab,
                         tabs: tabList
                       ),
                     ),
                     new Container(
                       height: 20.0,
                       child: new TabBarView(
                         controller: _tabController,
                         children: tabList.map((Tab tab){
                           _getPage(tab);
                         }).toList(),
                       ),
                     )
                   ],
             ),
                ),
              )
           ],
         ),
     ),
   ],
 ),
 );
 }
Widget _getPage(Tab tab){
switch(tab.text){
  case 'Overview': return OverView();
  case 'Orders': return Workouts();
 }
}
}

【问题讨论】：

只是让你知道......你不必做 width: screenSize... 你可以做 width: double.infinity 并且使宽度填满屏幕（也就是你的屏幕宽度）

标签： flutter flutter-layout

【解决方案1】：

children: tabList.map((Tab tab){
         _getPage(tab);
         }).toList(),

您的逻辑上面的某些内容将如何为 TabBarView 获取 null 子级，因此选项卡的视图不可见，需要检查它。

否则，您可以手动分配 TabBarView 的子级

children: <Widget>[
  OverView(),
  Workouts(),
],

【讨论】：

@rafidkotta 那么问题的确切原因是什么，您能分享一下吗？
地图应该返回_getPage，即tabList.map((Tab tab){ return _getPage(tab); })

【解决方案2】：

tabList.map((Tab tab){
   _getPage(tab);
}).toList()

上面的部分来自您提供的代码，您在地图中调用了 _getPage(tab) 而没有返回语句。只需对此稍作改动

tabList.map((Tab tab){
   return _getPage(tab);
}).toList()

或者

tabList.map((Tab tab) => _getPage(tab)).toList()

【讨论】：