All in Flutter

Flutter 解决iphoneX底部小黑条遮盖内容的方法

2019-12-30  本文已影响0人  头发还没秃
image

解决办法有两种:

1、使用以下代码获取手机状态栏和底部黑线的高度,然后设置 Widget 的 Padding 或者 Margin:

//获取状态栏高度(上边距)
final double topPadding = MediaQuery.of(context).padding.top;
//获取下边黑线高度(下边距)
final double bottomPadding = MediaQuery.of(context).padding.bottom;

2、使用 SafeArea(推荐),直接在外面包一层这个 Widget:

class _MainPageState extends State<MainPage> with SingleTickerProviderStateMixin {
 
  TabController _tabController;
 
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //使用 SafeArea 适配 iPhone X 等刘海屏不规则手机
      bottomNavigationBar: SafeArea(
        //使用 Material 改变 TabBar 背景色
        child: Material(
          color: Colors.blue,
          child: TabBar(
              ...
          ),
        ),
      ),
      body: TabBarView(
        ...
      ),
    );
  }
}
image
上一篇 下一篇

猜你喜欢

热点阅读