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

最新推荐文章于 2025-03-12 15:11:05 发布

Hirabbit_jaden

最新推荐文章于 2025-03-12 15:11:05 发布

阅读量7.1k

点赞数

分类专栏： flutter 文章标签： flutter statusbar 兼容 IOS Android

本文链接：https://blog.youkuaiyun.com/email_jade/article/details/85701437

版权

flutter 专栏收录该内容

14 篇文章

订阅专栏

【原创不易，转载请注明出处：https://blog.youkuaiyun.com/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,
    );
  }
}

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

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

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

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

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

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

有了以上的思路，那么代码就很简单了，以下是我封装的一个兼容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,);
  }
}

效果如下：