Flutter开发 - 写一个漂亮的导航栏

在iOS中，你要写一个漂亮的导航栏，如果想要自己定制，那是需要花点时间的，甚至可能你要完全重写，而且导航栏中存在很多你设置后不生效的东西，对于初学者，甚至入门三四年的人的来说，依然是一个噩梦。

而在Flutter中，Flutter为我们提供了丰富的组件，你可以选择像在iOS里那样自定义一个view，来作为导航栏，但是相较于iOS中的使用，Flutter更为强大，接下来，博主就带大家来看一下Flutter的导航栏。

1.结构
要想使用系统的导航栏，必须要按照一定的结构来写页面。

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text('设置圆角:ClipRRect'),
      ),
      body: Container(),
    );
  }

2.案例
上面是一个最基础的导航栏，默认导航栏颜色和返回按钮都是白色，无法清楚的识别到，这里给了黑色，看下效果：
在这里插入图片描述
是不是还不错呢？你还可以在这里设置标题的样式：

title: Text('设置圆角:ClipRRect', style: TextStyle(fontSize: 12, color: Colors.red),),

在这里插入图片描述
是不是更灵活多变一点？接下来，来设置下右侧的按钮：

actions: [
          CloseButton(),
          IconButton(
            tooltip: '按钮',
            icon: Icon(Icons.share),
            iconSize: 30,
            color: Colors.white,
            onPressed: () {},
          )
        ],

这里设置了一个关闭按钮，一个分享按钮，来看下效果：
在这里插入图片描述
你需要几个按钮，就放几个按钮，非常方便。除了按钮，你也可以设置普通的文字按钮，只需要放widget就可以。那么右边的按钮我们学会了，左边的按钮要怎么设置呢？

leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: Colors.white,
            size: 20,
          ),
          color: const Color(0xFF1C2026),
          tooltip: MaterialLocalizations.of(context).backButtonTooltip,
          onPressed: () {
            Navigator.maybePop(context);
          },
        ),

在这里插入图片描述
你会发现title怎么往左边移动了？需要在title的Text组件外套一个Center组件：

title: Center(
            child: Text(
              '设置圆角:ClipRRect', 
              style: TextStyle(
                  fontSize: 12, 
                  color: Colors.red
              ),
            )
        ),

在这里插入图片描述
别急，还没有结束，接下来，我们来调整下组件颜色，如下：

有没有发现哪里有什么不对？对，就是导航栏下面那根线，属于安卓的风格，怎么来变成iOS的风格呢？

elevation: 0.5,

加上上面这个设置后，高度就变成0.5了，效果看下：
在这里插入图片描述
美观度立马就上来了，请大家忽略我对主标题字体的设置，主要是为了让大家看出来效果的差异。除了我展示给大家的之外，还有一些其他的属性可以设置，大家看需求自取吧，以上几种算是比较常用的，能满足大部分的需求了。

	this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation,
    this.shadowColor,
    this.shape,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.actionsIconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.excludeHeaderSemantics = false,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
    this.toolbarHeight,
    this.leadingWidth,

这里有个很好玩的地方，title和centerTitle，刚刚我们设置的是title是加了一个center组件，centerTitle是bool值，设置标题居中用的，大家可以自己设置下试试看。