TabBarView和BottomNavigationBar控制在脚手架
问题描述:
的身体有什么显示我不能兼得TabBarView和BottomNavigationBar控制在我的脚手架的身体显示内容。有了这段代码,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"),
),
]),
);
}
答
我调整了一下你的代码以实现我认为你所要求的。
只需单击标签或向左或向右滑动,即可在标签页之间切换。而不是使用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'),
);
}
}
如果您有任何疑问,请不要犹豫,问。