flutter入门之兼容Android和IOS的状态栏

2019年7月13日 275次阅读 来源: Hirabbit_jaden

    【原创不易，转载请注明出处：https://blog.csdn.net/email_jade/article/details/85701437】

    flutter最大的优势是跨平台，Android和IOS可以共用同一套代码，不过我们在开发的过程中，还是有些地方需要单独定制的，比如说应用图标，比如说应用启动图（splash），还有就是插件开发，今天我们要讲的是IOS和Android的状态栏适配。

    flutter默认是忽略状态栏的高度的，也就是说，我们写一个app，如果不对状态栏做处理，那么我们的应用是这样的：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Text(
        'hello',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40,
          color: Colors.black,
        ),
      ),
      color: Colors.white,
    );
  }
}

《flutter入门之兼容Android和IOS的状态栏》

    可以看到，这样的界面严重影响用户体验。

    因此，为了给用户最佳的体验，那么我们必须先计算出状态栏的高度，然后再将内容布局到状态栏以下。

    对于IOS和Android两个不同的平台，计算状态栏的高度已经被flutter封装好了，我们只用调用即可。

    EdgeInsets padding = MediaQuery.of(context).padding;
    double top = math.max(padding.top , EdgeInsets.zero.top);

    虽然以上的方法可以避免将内容布局到状态栏，但是某些时候，尤其是兼容IOS和Android两个平台的时候，状态栏默认的背景颜色跟状态栏字体颜色冲突，导致我们无法查看状态栏信息，比如以下场景：

《flutter入门之兼容Android和IOS的状态栏》

    为了解决以上问题，我们可以将布局分解成两部分，首先求取状态栏的高度，将状态栏填充不会冲突的背景颜色，然后将我们的布局放到状态栏以下。

    有了以上的思路，那么代码就很简单了，以下是我封装的一个兼容IOS和Android状态栏的库：

import 'package:flutter/material.dart';
import 'dart:math' as math;

class TopAreaWidget extends StatelessWidget{
  final Widget child; //布局
  final Color color; //背景颜色

  TopAreaWidget({@required this.child, this.color=Colors.blueGrey});

  @override
  Widget build(BuildContext context) {
    EdgeInsets padding = MediaQuery.of(context).padding;
    double top = math.max(padding.top , EdgeInsets.zero.top); //计算状态栏的高度

    return Flex(
      direction: Axis.vertical,
      children: <Widget>[
        Container(
          width: double.infinity,
          height: top,
          color: color,
        ),
        Expanded(child: child),
      ],
    );
  }

}

    使用方法：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TopAreaWidget(
      child: Container(
        child: Text("加载中..."),
      ),
      color:Colors.cyan,);
  }
}

    效果如下：

《flutter入门之兼容Android和IOS的状态栏》

 

    原文作者：Hirabbit_jaden
    原文地址: https://blog.csdn.net/email_jade/article/details/85701437
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞