flutter - Flutter TabBar 和 TabBarView 在应用程序的主体内

Question

我试图像这样为我的应用程序构建一个 UI。但是选项卡的视图是不可见的。我在许多颤振应用程序中使用过标签，但 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();
 }
}
}

标签： flutterflutter-layout

Answer 1

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

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

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

或者

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