第四百零一回 自定义标题栏

我们在上一章回中介绍了"给geolocator插件提交问题的结果"相关的内容，本章回中将介绍 自定义标题栏.闲话休提，让我们一起Talk Flutter吧。

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组件,通过自定义可以实现一些复杂的标题.与400内容相匹配
  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),
      ],
    ),
  ),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

上面的示例代码完全按照实现方法中的步骤来实现，不过我们在Row组件外层嵌套了一个SizedBox,它主要用来控制title显示的范围。

代码中省略了Scaffold以及其它的代码，只保留了AppBar相关的代码。

编译并且运行上面的程序可以看到一个标题栏，标题左边是返回箭头，然后就是我们自定义的文本和图标。此外还可以通过AppBar的titleSpacing属性来调整返回箭头和标题之间的距离。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

4. 内容总结

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

看官们，与"自定义标题栏"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!