Question

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

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

我的代码在这里

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();
 }
}
}

Answer 1

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

您的逻辑上方的某些内容将如何为TabBarView赢得null个子代，因此不可见选项卡的视图，需要对其进行检查。

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

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

Answer 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()

在应用程序主体内部颤动TabBar和TabBarView

2 个答案: