我不能同时使用 TabBarView 和 BottomNavigationBar来 控制在脚手架主体上显示的内容。使用此代码,TabBarView可以控制或BottomNavigationBar。
我希望能够在所有四个页面之间横向滚动以及选择“主页”和“收藏夹”来控制屏幕上显示的内容。
@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"), ), ]), ); }
我对您的代码进行了一些调整,以实现我认为您要的功能。 您可以通过单击选项卡或向左或向右滑动来在for选项卡之间切换。除了使用之外,Offstages您还可以创建所需类的新实例。
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'), ); } }
如果对此有任何疑问,请不要犹豫。