阅读 860

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值,设置标题居中用的,大家可以自己设置下试试看。

文章分类
iOS
文章标签