第二百六十六回

文章目录

[1. 概念介绍](#1. 概念介绍)
[2. 分析与解决](#2. 分析与解决)
- [2.1 分析问题](#2.1 分析问题)
- [2.2 解决方案](#2.2 解决方案)
[3. 示例代码](#3. 示例代码)
[4. 内容总结](#4. 内容总结)

我们在上一章回中介绍了"如何修改CircleAvatar的大小"相关的内容，本章回中将介绍如何修改StatusBar中文字的颜色.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

在实际项目中发现一个问题：程序顶部StatusBar中的的文字颜色从默认的黑色变成了白色，而且是时好时坏。我们在程序中没有直接修改过这些内容，估计是修改其它

内容引入的问题。本章回中将带着大家一起去分析并且解决这个问题。

2. 分析与解决

2.1 分析问题

我们没有修改过状态栏(即StatusBar)中的文字的颜色，但是我们修改过状态栏的颜色，这个在"第一百五十六回:如何实现沉浸式状态栏"章回中介绍过，我们通过把状

态的颜色设置成透明色来实现沉浸式效果。但是这个修改不会影响到状态栏中文字的颜色。于是我们继续查找问题的原因，后来发现我们创建沉浸状态栏时分没有AppBar

和有AppBar两种情况。从没AppBar的页面跳转到有AppBar的页面时一切正常，但是从有AppBar的页面跳转到没有AppBar的页面时问题就出现了。终于找到了可以百

分之百复现问题的方法。于是我们把问题定位到了AppBar上。修改AppBar的页面使用图片背景，详细的操作可以参考"第一百六十六回:如何创建以图片为背景的页面"

中的内容。为了让图片背景覆盖到状态栏，我们参考了创建沉浸式菜单的方法，修改了AppBar背景颜色：把AppBar的颜色设置为透明色。此时，通过导航返回到上一个

没有AppBar的页面时，该页面状态栏的文字变成了白色。看来就是修改AppBar的背景色影响了状态栏中文字的颜色。去掉该修改后状态栏中的文字颜色恢复正常。

2.2 解决方案

我们在分析问题时已经找到了解决问题的方法：在创建以图片为背景的页面时，不设置AppBar的颜色。只修改两个内容，详细如下：

在main文件中修改状态栏的背景颜色，将其设置为透明色；
在AppBar中不修改AppBar的背景颜色；
注意：我在这里说的不修改AppBar的背景颜色是指不通过background属性修改AppBar的背景颜色，而是把forceMaterialTransparency的属性值设置为true。

3. 示例代码

dart 复制代码

Scaffold(
  appBar: AppBar(
    title: const Text("Example of Background Image"),

    ///不通过这种方式修改AppBar的背景颜色，而是使用下面的方式修改背景颜色
    //background:Colors.white,
    ///让appBar变成透明色，不然会覆盖扩展的body内容
    forceMaterialTransparency: true,
  ),

  ///让body中的内容扩展到AppBar和statusBae,需要在runAppBar前设置状态栏为透明色
  extendBodyBehindAppBar: true,
  body: Stack(
    children: [
      const Image(
        width: double.infinity,
        height: double.infinity,
        fit: BoxFit.fill,
        image: AssetImage("images/ex.png"),
      ),
      Padding(
        //需要添加边距:status+appBar的高度，不然会上升屏幕最上方
        padding: const EdgeInsets.only(top: 56*2),
        child: SizedBox(
          width: double.infinity,
          height: double.infinity,

          ///调试时使用，方便观察容器的大小
          // color: Colors.green,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text(
                  style: TextStyle(
                    color: Colors.redAccent,
                    fontSize: 32,
                  ),
                  "body of page"),
              ElevatedButton(onPressed: () {}, child: const Text("button"))
            ],
          ),
        ),
      )
    ],
  ),
);

上面的示例代码演示了如何创建以图片为背景的页面，不过要注意修改AppBar背景颜色的方法。我们在代码中添加了注释，希望大家引起注意。

4. 内容总结

本章回中介绍的问题是实现沉浸式效果、实现以图片为背景的页面和页面导航三个知识点一起作用引起的问题，查找问题的原因比较复杂。我们先是找到复现问题的方法，

然后在此基础上找到了解决问题的文案。不过其背后的原因还不清楚：AppBar的背景颜色如何与状态栏中的文字颜色关联在了一起？欢迎大家在评论区交流与讨论。

最后，我们对本章回的内容做一个全面的总结：

实现沉浸式状态栏效果时分有无AppBar两种情况；
实现以图片为背景的页面时注意AppBar背景颜色的修改方式；
实现以图片为背景的页面时需要在沉浸式状态栏的基础上实现；
看官们，与"如何修改StatusBar中文字的颜色"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!