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'), 
    ); 
    } 
} 

如果您有任何疑問，請不要猶豫，問。