我是Flutter的新手,我想拥有2个导航栏。我的TabBar
也可以正常工作,但是我的BottomAppBar
不能用于页面更改。是的,我想保留FAB BottomAppBar的设计,这就是为什么我不想使用BottomNavigationBar
。
我已经阅读了以下答案: 但是我的身体已经分配好了,所以我无法创建PageView。
我的代码:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: DefaultTabController(
length: 6,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
isScrollable: true,
tabs: [
Tab(text: "NewPay1.1"),
Tab(text: "NewMall 1.0"),
Tab(text: "海报"),
Tab(text: "企业版"),
Tab(text: "个版"),
Tab(text: "poa")
],
),
title: Text('tabBar'),
),
body: TabBarView(
children: [
TaskListPage(),
TestPage(),
],
),
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: CircularNotchedRectangle(),
child: Row(
children: <Widget>[
IconButton(onPressed: () {
print("home clicked");
TaskListPage();
},
icon: Icon(Icons.home),),
SizedBox(),
IconButton(onPressed: () {
print("third clicked");
TestPage();
},
icon: Icon(Icons.more))
],
mainAxisAlignment: MainAxisAlignment.spaceAround,
),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
return TestPage().createState();
},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
),
),
);
}
}
答案 0 :(得分:1)
输出:
这就是您需要的。
class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
TabController _tabController; // use this instead of DefaultTabController
@override
void initState() {
super.initState();
_tabController = TabController(length: 6, vsync: this); // initialise it here
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: _tabController,
isScrollable: true,
tabs: [
Tab(text: "NewPay1.1"),
Tab(text: "NewMall 1.0"),
Tab(text: "海报"),
Tab(text: "企业版"),
Tab(text: "个版"),
Tab(text: "poa"),
],
),
title: Text('tabBar'),
),
body: TabBarView(
controller: _tabController,
children: [ // these are your pages
Page1(),
Page2(),
Page3(),
Page4(),
Page5(),
Page6(),
],
),
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: CircularNotchedRectangle(),
child: Row(
children: <Widget>[
IconButton(
onPressed: () => _tabController.animateTo(0), // go to page1
icon: Icon(Icons.home),
),
SizedBox(),
IconButton(onPressed: () => _tabController.animateTo(1), // go to page 2
icon: Icon(Icons.more))
],
mainAxisAlignment: MainAxisAlignment.spaceAround,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
),
);
}
}