iOS 设备中的 Flutter TabBarView 覆盖底部区域(滑块)
Flutter TabBarView cover bottom area (Slider) in iOS device
我是 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 new MaterialApp(
theme: ThemeData(),
home: SafeArea(
child: 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,
),
),
),
);
}
}
将您的小部件包装到 SafeArea 它会添加足够的填充以避免操作系统的入侵
也建议设置
BottomNavigationBar(
...
elevation: 0,
我是 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
包裹你的 TabBarclass MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: ThemeData(),
home: SafeArea(
child: 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,
),
),
),
);
}
}
将您的小部件包装到 SafeArea 它会添加足够的填充以避免操作系统的入侵
也建议设置
BottomNavigationBar(
...
elevation: 0,