美文网首页
Flutter 自定义AppBar标题栏

Flutter 自定义AppBar标题栏

作者: AR7_ | 来源:发表于2020-08-13 11:00 被阅读0次

    问题一:

    要实现像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标题栏就完成了。

    相关文章

      网友评论

          本文标题:Flutter 自定义AppBar标题栏

          本文链接:https://www.haomeiwen.com/subject/qylbdktx.html