我在Flutter中相对较新,我这样编写简单的TabBarView。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: ThemeData(
primaryColor: HexColor("#2E58A1"),
),
home: DefaultTabController(
length: 4,
child: new Scaffold(
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
new Page1(),
new Page2(),
new Page3(),
new Container(
color: Colors.red,
),
],
),
bottomNavigationBar: new TabBar(
tabs: [
Tab(
icon: new Icon(Icons.home),
),
Tab(
icon: new Icon(Icons.rss_feed),
),
Tab(
icon: new Icon(Icons.perm_identity),
),
Tab(icon: new Icon(Icons.settings),)
],
labelColor: HexColor("#2E58A1"),
unselectedLabelColor: HexColor("#CBCCCD"),
indicatorSize: TabBarIndicatorSize.label,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: HexColor("#2E58A1"),
),
backgroundColor: Colors.white,
),
),
);
}
在本机iOS应用程序中,它不会像这样重叠标签栏和滑块。
我应该如何重新编写代码?
用SafeArea小部件包裹MaterialApp。
或者您可以只用SafeArea包裹您的TabBar
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: new MaterialApp(
theme: ThemeData(),
home: DefaultTabController(
length: 4,
child: new Scaffold(
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
new Page1(),
new Page2(),
new Page3(),
new Container(
color: Colors.red,
),
],
),
bottomNavigationBar: new TabBar(
tabs: [
Tab(
icon: new Icon(Icons.home),
),
Tab(
icon: new Icon(Icons.rss_feed),
),
Tab(
icon: new Icon(Icons.perm_identity),
),
Tab(
icon: new Icon(Icons.settings),
)
],
labelColor: HexColor("#2E58A1"),
unselectedLabelColor: HexColor("#CBCCCD"),
indicatorSize: TabBarIndicatorSize.label,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: HexColor("#2E58A1"),
),
backgroundColor: Colors.white,
),
),
),
);
}
}