TabBarView和BottomNavigationBar控制在脚手架

Question

的身体有什么显示我不能兼得TabBarView和BottomNavigationBar控制在我的脚手架的身体显示内容。有了这段代码，TabBarView可以有控制或BottomNavigationBar。

我希望能够在所有四页之间横向滚动以及选择HOME和FAVORITES来控制显示在屏幕上的内容。

@override 
Widget build(BuildContext context) { 
    return new Scaffold(
    appBar: new AppBar(
     title: new Text("Traveler"), 
     bottom: new TabBar(controller: controller, tabs: <Tab>[ 
     new Tab(text: "NEW"), 
     new Tab(text: "HOTELS"), 
     new Tab(text: "FOOD"), 
     new Tab(text: "FUN"), 
     ]), 
    ), 
    body: new Stack(
     children: <Widget>[ 
     new Offstage(
      offstage: index != 0, 
      child: new TickerMode(
      enabled: index == 0, 
      child: new Material(child: new NewPage()), 
     ), 
     ), 
     new Offstage(
      offstage: index != 1, 
      child: new TickerMode(
      enabled: index == 1, 
      child: new Material(child: new HotelsPage()), 
     ), 
     ), 
     new TabBarView(controller: controller, children: <Widget>[ 
      new NewPage(), 
      new HotelsPage(), 
      new FoodPage(), 
      new FunPage(), 
     ]), 
     ], 
    ), 
    bottomNavigationBar: new BottomNavigationBar(
     currentIndex: index, 
     onTap: (int index) { 
      setState(() { 
      this.index = index; 
      }); 
     }, 
     items: <BottomNavigationBarItem>[ 
      new BottomNavigationBarItem(
      icon: new Icon(Icons.home), 
      title: new Text("Home"), 
     ), 
      new BottomNavigationBarItem(
      icon: new Icon(Icons.favorite), 
      title: new Text("Favorites"), 
     ), 
     ]), 
); 
} 

Answer 1

我调整了一下你的代码以实现我认为你所要求的。
只需单击标签或向左或向右滑动，即可在标签页之间切换。而不是使用Offstages，您可以创建所需类的新实例。

这里是一个正在运行的例子，我希望它能帮助：

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     home: new MyHomePage(), 
    ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    @override 
    State createState() => new MyHomePageState(); 
} 

class MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { 
    TabController _controller; 
    int _index; 

    @override 
    void initState() { 
    super.initState(); 
    _controller = new TabController(length: 4, vsync: this); 
    _index = 0; 
    } 

    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text("Traveler"), 
     bottom: new TabBar(controller: _controller, tabs: <Tab>[ 
      new Tab(text: "NEW"), 
      new Tab(text: "HOTELS"), 
      new Tab(text: "FOOD"), 
      new Tab(text: "FUN"), 
     ]), 
    ), 
     body: new TabBarView(
     controller: _controller, 
     children: <Widget>[ 
      new NewPage(_index), 
      new HotelsPage(_index), 
      new FoodPage(_index), 
      new FunPage(_index), 
     ], 
    ), 
     bottomNavigationBar: new BottomNavigationBar(
      currentIndex: _index, 
      onTap: (int _index) { 
      setState(() { 
       this._index = _index; 
      }); 
      }, 
      items: <BottomNavigationBarItem>[ 
      new BottomNavigationBarItem(
       icon: new Icon(Icons.home), 
       title: new Text("Home"), 
      ), 
      new BottomNavigationBarItem(
       icon: new Icon(Icons.favorite), 
       title: new Text("Favorites"), 
      ), 
      ]), 
    ); 
    } 
} 

class NewPage extends StatelessWidget { 
    final int index; 

    NewPage(this.index); 

    @override 
    Widget build(BuildContext context) { 
    return new Center(
     child: new Text('NewPage, index: $index'), 
    ); 
    } 
} 

class HotelsPage extends StatelessWidget { 
    final int index; 

    HotelsPage(this.index); 

    @override 
    Widget build(BuildContext context) { 
    return new Center(
     child: new Text('HotelsPage, index: $index'), 
    ); 
    } 
} 

class FoodPage extends StatelessWidget { 
    final int index; 

    FoodPage(this.index); 

    @override 
    Widget build(BuildContext context) { 
    return new Center(
     child: new Text('FoodPage, index: $index'), 
    ); 
    } 
} 

class FunPage extends StatelessWidget { 
    final int index; 

    FunPage(this.index); 

    @override 
    Widget build(BuildContext context) { 
    return new Center(
     child: new Text('FunPage, index: $index'), 
    ); 
    } 
} 

如果您有任何疑问，请不要犹豫，问。