顶部选项卡仅显示主页,并且通过滚动或点击显示 3 个不同的页面,底部选项卡则显示整个应用程序(如菜单)。
当我编写代码时,我会得到如下图所示的视图,但我无法点击或重定向页面。
导航代码我只给出了顶部或底部选项卡,而不是两个选项卡。
主页.dart
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
TabController tabController;
//TabController bottomController;
Icon searchBtn = new Icon(Icons.search);
Widget appBarTitle = new Text('Invoices');
@override
void initState(){
super.initState();
tabController = new TabController(vsync: this, length: 3);
//bottomController = new TabController(vsync: this, length: 4);
}
@override
void dispose(){
tabController.dispose();
//bottomController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
color: Colors.purpleAccent,
debugShowCheckedModeBanner: false,
home: DefaultTabController(
length: 3,
child:Scaffold(
appBar: new AppBar(
centerTitle: false,
title: appBarTitle,
backgroundColor: Color(0xFF832685),
actions: <Widget>[
new IconButton(
icon: searchBtn,
onPressed: (){
setState(() {
if(this.searchBtn.icon == Icons.search){
this.searchBtn = new Icon(Icons.close);
this.appBarTitle = new TextField(
style: new TextStyle(
color: Colors.white,
),
decoration: new InputDecoration(
//fillColor: Colors.white,
border: InputBorder.none,
// focusedBorder: OutlineInputBorder(
// borderRadius: BorderRadius.all(Radius.circular(5.0)),
// borderSide: BorderSide(color: Colors.white)),
filled: true,
prefixIcon: new Icon(Icons.search,
color: Colors.white),
hintText: "Search...",
hintStyle: new TextStyle(color: Colors.white),
),
);
}
else{
this.searchBtn = new Icon(Icons.search);
this.appBarTitle = new Text('Invoices');
}
});
},
)
],
bottom: new TabBar(
indicatorColor: Color(0xFF832685),
controller: tabController,
tabs: <Tab>[
new Tab(text: 'Unpaid'.toUpperCase(),),
new Tab(text: 'Draft'.toUpperCase(),),
new Tab(text: 'All'.toUpperCase(),),
],
),
),
//bottomNavigationBar: BottomNavBar(),
//bottomNavigationBar: _BottomBar(),
// bottomNavigationBar: new TabBar(
// indicatorColor: Color(0xFF832685),
// labelColor: Color(0xFF832685),
// //controller: bottomController,
// tabs: <Tab>[
// new Tab(icon: new Icon(Icons.home),text: 'Home',),
// new Tab(icon: new Icon(Icons.home),text: 'Home',),
// new Tab(icon: new Icon(Icons.home),text: 'Home',),
// new Tab(icon: new Icon(Icons.home),text: 'Home',),
// ],
// ),
body: new TabBarView(
controller: tabController,
children: <Widget>[
new first.UnpaidInvoicePage(),
new second.PaidInvoicePage(),
new third.AllInvoicePage(),
],
),
//body: Container(),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
tooltip: 'New Invoice',
backgroundColor: Color(0xFF832685),
onPressed: (){
//Navigator.of(context).pushNamed('NewInvoicePage');
Navigator.push(context, MaterialPageRoute(builder: (context) => NewInvoicePage()));
},
),
),
),
);
}
}
谢谢 !