TabBarView和BottomNavigationBar来控制在Scaffold主体上显示的内容
问题内容:
我不能同时使用 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
您还可以创建所需类的新实例。
这是一个正在运行的示例,希望对您有所帮助:
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'),
);
}
}
如果对此有任何疑问,请不要犹豫。