Flutter 自定义AppBar标题栏
2020-08-13 本文已影响0人
AR7_
问题一:
要实现像AppStore里一样的标题栏风格,起初我是觉得很难的,因为想要将title设置到leading下面,想想都觉得不太可能,试了很多方式,最后都失败了,本来打算是在body里加上一部分的视图用来放置标题栏的标题的,但是如果这样做,那自定义AppBar标题栏就不好抽取组件来复用了,这样只能去研究AppBar的源码,发现有一个flexibleSpace
属性,位置是在leading和title下方的,真是天助我也,通过对flexibleSpace
位置的调整,也就实现了AppStore的标题栏风格
问题二:
在项目开发中,需要左侧实现一个跳转点击事件,因为文本是图标加上文本,然后发现,出现了内容溢出,导致布局报错,通过对leading进行宽度修改,但是一直没有生效,看了一下AppBar的源码,发现里面设置的leading是写死的,而且设置的是正方形
const double _kLeadingWidth = kToolbarHeight; // So the leading button is square.
如此看来,基本没办法实现我的需求,也就是图标加上4个字的文本,那么只能通过title来实现了,但是问题来了,如果不设置leading的话,默认是一个返回图标的,那么只能去研究怎么去掉leading占用的空间了,看了AppBar源码,有一个参数可以设置,那就是automaticallyImplyLeading
问题三:
想要在右上角使用菜单PopupMenuButton,怎么可以动态设置?毕竟这个不是每个页面都用到的,也就是怎么在自定义AppBar标题栏里的actions
加上自定义的Widget
,其实很简单,只要新加一个参数rightCustomWidget
就行了。
这样,自定义AppBar标题栏就完成了。