我在 bottomNavigationBar 中使用了 TabBar。在哪里插入这些选项卡的内容?
I've used TabBar inside bottomNavigationBar. Where do I insert content for these tabs?
我在 bottomNavigationBar 中使用了 TabBar,只是想知道我应该在这些选项卡中的什么位置插入内容。
我基本上是在创建一个类似于 facebook 的应用程序,所以我需要在这些选项卡中输入内容并浏览它们
在这里,我附上了代码,我期待着一些指导。有没有一种方法可以在不使用 TabBarView 的情况下做到这一点?
小部件构建(BuildContext 上下文){
Widget menu() {
return Container(
color: Colors.white,
child: TabBar(
labelColor: Color(int.parse("0xff3A5FCD")),
unselectedLabelColor: Colors.grey,
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Colors.blue,
onTap: (index){
},
tabs: [
InkWell(
onTap: (){},
child: Tab(
text: "Home",
icon: Icon(Icons.home,size: 30,),
),
),
InkWell(
onTap: (){
Navigator.pushNamed(context, MyRoutes.friendsRoute);
setState(() {
});
},
child: Tab(
text: "Friends",
icon: Icon(Icons.people,size: 30,),
),
),
InkWell(
onTap: (){},
child: Tab(
text: "Notifications",
icon: Icon(Icons.notifications,size: 30,),
),
),
InkWell(
onTap: (){},
child: Tab(
text: "Menu",
icon: Icon(Icons.menu,size: 30,),
),
),
],
),
);
}
return DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
elevation: 0,
foregroundColor: Colors.white10,
automaticallyImplyLeading: false,
title: Text("facebook",textScaleFactor: 1.6,style: TextStyle(
color: Colors.indigo,
fontWeight: FontWeight.bold
),),
backgroundColor: Colors.white10,
actions: <Widget>[
Row(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(28),
color: Color(int.parse("0xffEBEBEB"))
),
// color: Colors.grey,
child: IconButton(
onPressed: () {},
icon: FaIcon(FontAwesomeIcons.search),
color: Colors.black,
iconSize: 23,
),
),
SizedBox(width: 10,),
Container(
width: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(28),
color: Color(int.parse("0xffEBEBEB"))
),
child: IconButton(
onPressed: (){},
icon: FaIcon(FontAwesomeIcons.facebookMessenger),
color: Colors.black,
iconSize: 23,
),
),
SizedBox(width: 10,height: 10,),
],
),
],
),
bottomNavigationBar: menu(),
将 Scaffold
的 body
设置为 TabBarView
并像这样设置每个内容的子项:
Scaffold:
body: TabBarView(
children: [
Container(child: Text("Home")),
Container(child: Text("Friends")),
Container(child: Text("Notifications),
Container(child: Text("Menu")),
]
),
),
我在 bottomNavigationBar 中使用了 TabBar,只是想知道我应该在这些选项卡中的什么位置插入内容。 我基本上是在创建一个类似于 facebook 的应用程序,所以我需要在这些选项卡中输入内容并浏览它们 在这里,我附上了代码,我期待着一些指导。有没有一种方法可以在不使用 TabBarView 的情况下做到这一点?
小部件构建(BuildContext 上下文){
Widget menu() {
return Container(
color: Colors.white,
child: TabBar(
labelColor: Color(int.parse("0xff3A5FCD")),
unselectedLabelColor: Colors.grey,
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Colors.blue,
onTap: (index){
},
tabs: [
InkWell(
onTap: (){},
child: Tab(
text: "Home",
icon: Icon(Icons.home,size: 30,),
),
),
InkWell(
onTap: (){
Navigator.pushNamed(context, MyRoutes.friendsRoute);
setState(() {
});
},
child: Tab(
text: "Friends",
icon: Icon(Icons.people,size: 30,),
),
),
InkWell(
onTap: (){},
child: Tab(
text: "Notifications",
icon: Icon(Icons.notifications,size: 30,),
),
),
InkWell(
onTap: (){},
child: Tab(
text: "Menu",
icon: Icon(Icons.menu,size: 30,),
),
),
],
),
);
}
return DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
elevation: 0,
foregroundColor: Colors.white10,
automaticallyImplyLeading: false,
title: Text("facebook",textScaleFactor: 1.6,style: TextStyle(
color: Colors.indigo,
fontWeight: FontWeight.bold
),),
backgroundColor: Colors.white10,
actions: <Widget>[
Row(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(28),
color: Color(int.parse("0xffEBEBEB"))
),
// color: Colors.grey,
child: IconButton(
onPressed: () {},
icon: FaIcon(FontAwesomeIcons.search),
color: Colors.black,
iconSize: 23,
),
),
SizedBox(width: 10,),
Container(
width: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(28),
color: Color(int.parse("0xffEBEBEB"))
),
child: IconButton(
onPressed: (){},
icon: FaIcon(FontAwesomeIcons.facebookMessenger),
color: Colors.black,
iconSize: 23,
),
),
SizedBox(width: 10,height: 10,),
],
),
],
),
bottomNavigationBar: menu(),
将 Scaffold
的 body
设置为 TabBarView
并像这样设置每个内容的子项:
Scaffold:
body: TabBarView(
children: [
Container(child: Text("Home")),
Container(child: Text("Friends")),
Container(child: Text("Notifications),
Container(child: Text("Menu")),
]
),
),