第四百一十一回

1. 概念介绍

我们在这里说的标题栏是指页面最上方的显示页面标题的地方，注意它位于手机状态栏（显示信号条）的下方。如果我们使用Scaffold来搭建页面的话，那么这个标题栏
就是AppBar.我们在本章回中将介绍如何自定义标题栏相关的内容。

2. 思路与方法

2.1 实现思路

我们自定义标题栏并不是重写相关的组件，而是使用把多个组件组合在一起的形成新的标题栏。组合的内容依据自己的需求来制定。比如，我们对标题栏的需求是：显示文
本和图标，这比单独的文本内容要好看一些。有了这个需求后，我们就可以自定义标题栏了，文本通过Text组件实现，图标可以用Image或者Icon组件实现。它们需要
显示在一个水平维度上，因此使用Row来组合它们。

2.2 实现方法

接下来，我们按照自定义标题栏的思路来实现这个标题栏，下面是详细的实现步骤：

• 创建一个Row组件，用来组合文本和图标；
• 在Row组件中添加文本和图标组件，并且调整它们之间的间隔；
• 把Row组件当作一个自定义标题栏赋值给AppBar的title属性；
  有看官可能感觉比较抽象，不用担心，我们将在后面的小节中通过示例代码来演示具体的内容。

3. 示例代码

appBar: AppBar(
  // title: Text("Example of Video Image Picker like wechat"),
  ///控制title内容与返回箭头之间的距离
  titleSpacing: 0.0,
  ///自定义的标题，取代简单的Text Widget组件,通过自定义可以实现一些复杂的标题.
  title: SizedBox(
    width: screenWidth/4,
    child: const Row(
      children: [
        ///使用Expand是为了显示长字符
        Expanded(
          child: Text("Example of Video Image Picker like wechat",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
        Icon(Icons.favorite),
      ],
    ),
  ),

上面的示例代码完全按照实现方法中的步骤来实现，不过我们在Row组件外层嵌套了一个SizedBox,它主要用来控制title显示的范围。代码中省略了Scaffold以及其
它的代码，只保留了AppBar相关的代码。
编译并且运行上面的程序可以看到一个标题栏，标题左边是返回箭头，然后就是我们自定义的文本和图标。此外还可以通过AppBar的titleSpacing属性来调整返回箭头
和标题之间的距离。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

4. 内容总结

我们在本章回中演示了如何自定义标题栏，并且通过一个需求：显示文本和图标的标题栏，介绍了自定义标题栏的思路和方法。大家可以结合自己在项目中的需求来自定义
标题栏，自定义的思路就是依据需求组合现有的组件形成新的组件。总之，只要是组件就可以，因为AppBar的title属性是Widget类型，我们需要把自定义的标题栏赋
值给该属性，这样才可以在显示到标题栏中。
看官们，与"自定义标题栏"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!