使用 SafeArea widget来包裹tabbar的widget即可解决问题
问题如下
image.png
问题代码
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new DefaultTabController(
length: 3,
child: new Scaffold(
body: new TabBarView(
children: <Widget>[
new FitstTabView(),
new SecondTabView(),
new ThirdTabView(),
],
),
bottomNavigationBar: new TabBar(
tabs: <Widget>[
new Tab(icon: new Icon(Icons.directions_car)),
new Tab(icon: new Icon(Icons.directions_transit)),
new Tab(icon: new Icon(Icons.directions_bike)),
],
labelColor: Colors.blue,
unselectedLabelColor: Colors.white,
indicatorColor: Colors.blue,
),
backgroundColor: Colors.black,
),
);
}
}
解决的关键代码(使用 SafeArea widget来包裹)
bottomNavigationBar: SafeArea(
child: new TabBar(
tabs: <Widget>[
new Tab(icon: new Icon(Icons.directions_car)),
new Tab(icon: new Icon(Icons.directions_transit)),
new Tab(icon: new Icon(Icons.directions_bike)),
],
labelColor: Colors.blue,
unselectedLabelColor: Colors.white,
indicatorColor: Colors.blue,
),
),
其它相关资料参考
iPhone X: Additional bottom padding for BottomNavigationBar · Issue #12099 · flutter/flutter · GitHub
Account for bottom safe area for interactive widgets · Issue #12883 · flutter/flutter · GitHub
Differentiate between Window padding and margins in dart:ui · Issue #12895 · flutter/flutter · GitHub