精华内容
下载资源
问答
  • Flutter 之 AppBar 这样的骚操作你知道吗?
    2020-12-19 09:17:02

    好久不见了,这阵子在忙公司的项目,加班比较严重,这周终于抽了点时间来帮国外一家公司做一款跨平台的 App。由于去年九月份在上海参加过 Google 举办的 Google develop days, 受益颇多,特别在其目前正在大力热推的 Flutter 框架。相比于目前热门的跨平台框架 React Native,Flutter在 UI 绘制以及性能方便不遑多让。因此,这款 app 打算基于 Dart 语言,并采用 Flutter 框架来完成。

    花了大概几天时间熟悉了下 Dart 语法和 Flutter 基本组成控件,就开始摸索着做一个练手项目。AppBar 想必大家都用过,当其处于启动页面时是隐藏 leading 的,而处于其他页面时左边默认携带返回按钮。目前,我们的需求是:首页的  AppBar 最左边为用户头像,点击用户头像可以自动打开左侧抽屉栏。

    最终效果图如下所示:

    效果图

    初学者一开始总是痛苦的,还好,解决问题的途径“万变不离其宗”。我们先来查看一下 Flutter 官方文档发现,要使用 AppBar来操作页面,决定其左边点击事件的属性就是 leading :AppBar({

    Key key,

    Widget leading,bool automaticallyImplyLeading: true,

    Widget title,

    List actions,

    Widget flexibleSpace,

    PreferredSizeWidget bottom,double elevation,

    Color backgroundColor,

    Brightness brightness,

    IconThemeData iconTheme,

    TextTheme textTheme,bool primary: true,bool centerTitle,double titleSpacing: NavigationToolbar.kMiddleSpacing,double toolbarOpacity: 1.0,double bottomOpacity: 1.0})

    可以看到,我们 AppBar 中的 leading 属性是一个 Widget 类型,那么它接收的参数范围就很广了,换句话说,我们可以直接将一个按钮传递给它,并在 onPressed 方法中处理左边侧滑栏的开启和关闭状态。,有思路了咱们久开始试验一下:final GlobalKey _scaffoldKey = new                                                  GlobalKey();

    @override

    Widget build(BuildContext context) {    return new DefaultTabController(

    length: _pages.length,

    child: new Scaffold(

    key: _scaffoldKey,

    appBar: new AppBar(            /// 第一种方式

    /// 通过可监听点击的IconButton传入widget,

    /// 并在onPressed中处理drawer开启,借助于GlobalKey

    leading: new IconButton(

    icon: new Container(

    padding: EdgeInsets.all(3.0),

    child: new CircleAvatar(

    radius: 30.0,

    backgroundImage: AssetImage("assets/images/moosphon_logo.jpeg")

    ),

    ),

    onPressed: (){

    _scaffoldKey.currentState.openDrawer();

    },

    ),

    centerTitle: true,

    title: new TabBar(

    isScrollable: true,

    labelPadding: EdgeInsets.all(14),

    indicatorSize: TabBarIndicatorSize.label,

    indicatorColor: Colors.white,

    tabs: _titles.map((String title) =>                new Tab(text: title)).toList()

    ),

    actions: [              new IconButton(

    icon: new Icon(Icons.search),

    tooltip: '搜索',

    onPressed: (){

    NavigatorUtil.intentToPage(context, new SearchPage(), pageName: "SearchPage");

    }

    )

    ],

    ),

    body: new TabBindingView(),

    drawer: new Drawer(

    child: new HomeLeftDrawerPage(),

    ),

    )

    );

    }

    为了不影响篇幅,这里我只贴了关键代码,至于 Drawer 用法相信大家没什么问题,这里我们给 AppBar 的leading 参数传了一个 IconButton  控件,里面我还实现了圆形头像。这样一来,我们的用户头像就可以被点击了响应了,接下来我们需要处理头像点击事件与 Drawer 的联动性了。这里我们通过设置 GlobalKey 来让 Scaffold 容器获取到其内部的 Drawer 组件,进而控制它的开闭,这样,我们就已经可以通过点击自定义的用户头像来开启左边侧滑栏啦。

    细心的小伙伴一定会发现,上面的代码中我注释这只是第一种实现方式,难道还有第二种实现方式?哈哈,没错,的确还有第二种思路。其实,通过查看 AppBar 的源码,我们可以发现:AppBar内部已经自动实现了 AppBar 的 leading 与 Drawer 抽屉栏的关联:Widget leading = widget.leading;    if (leading == null && widget.automaticallyImplyLeading) {      if (hasDrawer) {

    leading = IconButton(

    icon: const Icon(Icons.menu),

    onPressed: _handleDrawerButton,

    tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,

    );

    } else {        if (canPop)

    leading = useCloseButton ? const CloseButton() : const BackButton();

    }

    }    if (leading != null) {

    leading = ConstrainedBox(

    constraints: const BoxConstraints.tightFor(width: _kLeadingWidth),

    child: leading,

    );

    }

    由于代码较多,这里我只放上了 build 方法中关于 leading 部分的关键代码,通过分析我们可以发现:leading 如果 为空并且 automaticallyImplyLeading 属性为true,那么就会自动推断出 leading 的 Widget 的类型和用途,另外如果当前 Scaffold 中存在 Drawer ,则会自动创建一个 IconButton 作为leading  使用,同时它的点击事件中处理了与 Drawer 抽屉栏的关联事件,无需开发者再处理。也就是说,在这种情况下,如果我们自定义了 leading (例如当前我们给它传的是用户的头像 Widget ),那么 leading 就无法自动关联 Drawer ,也就是说关联 Drawer  的这部分代码需要开发者自行实现。

    如果  leading 不为空呢?并且 automaticallyImplyLeading 开关关闭,那么 leading 的空间就会被 title 给占据。

    说了这么多,最终的结论是:如果我们想要自定义 leading ,那么目前官方源码中 AppBar 中 leading  自动关联 Drawer 的处理我们没办法使用。如果我们非要用呢?那就只能修改源码啦:/// 注意,前方高能来袭,以下为修改的部分code

    Widget leading = widget.leading;    if (/*leading == null && */widget.automaticallyImplyLeading) {      if (hasDrawer) {

    leading = IconButton(

    icon: /*const Icon(Icons.menu)*/ leading ?? Icon(Icons.home), // 如果leading指定了widget那么

    onPressed: _handleDrawerButton,

    tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,

    );

    } else {        if (canPop)

    leading = useCloseButton ? const CloseButton() : const BackButton();

    }

    }    if (leading != null) {

    leading = ConstrainedBox(

    constraints: const BoxConstraints.tightFor(width: _kLeadingWidth),

    child: leading,

    );

    }

    铛铛铛铛~这就改好啦,改动的地方是不是很少?哈哈,其实只要把 leading 为空的限制条件去掉,并且可以传入我们自己定义的 Widget 就好啦!

    这样一来,我们就不用手动去处理 leading 与 Drawer 的关联事件,只需要交给系统帮我们完成就可以啦:@override

    Widget build(BuildContext context) {    return new DefaultTabController(

    length: _pages.length,

    child: new Scaffold(

    key: _scaffoldKey,

    appBar: new DrawerAutoBindingAppBar(            /// 第二种方式

    /// 通过修改[AppBar]源码来将普通widget作为icon传给IconButton

    /// 源码中已处理onPressed关联drawer事件,无需额外处理,详情见[DrawerAutoBindingAppBar]

    leading: new Container(

    padding: EdgeInsets.all(3.0),

    child: new CircleAvatar(

    radius: 30.0,

    backgroundImage: AssetImage("assets/images/moosphon_logo.jpeg")

    )

    ),

    centerTitle: true,

    title: new TabBar(

    isScrollable: true,

    labelPadding: EdgeInsets.all(14),

    indicatorSize: TabBarIndicatorSize.label,

    indicatorColor: Colors.white,

    tabs: _titles.map((String title) =>                new Tab(text: title)).toList()

    ),

    actions: [              new IconButton(

    icon: new Icon(Icons.search),

    tooltip: '搜索',

    onPressed: (){

    NavigatorUtil.intentToPage(context, new SearchPage(), pageName: "SearchPage");

    }

    )

    ],

    ),

    body: new TabBindingView(),

    drawer: new Drawer(

    child: new HomeLeftDrawerPage(),

    ),

    )

    );

    }

    代码就不多做解释了,效果是和之前一样的,好啦,这样我们就更加了解 AppBar 的用法以及 leading 的背后“小彩蛋”啦。

    作者:水月沐風

    链接:https://www.jianshu.com/p/3117293aebe1

    更多相关内容
  • 主要介绍了Flutter 滚动监听及实战appBar滚动渐变,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 网上看到篇《AppBar的WTL实现》,觉得是比较正规的有关窗口停靠的代码,故翻译成易语言供参考。  其中主要的API函数是SHAppBarMessage,具体功能可见MSDN。 参考资料: SHAppBarMessage: ...(VS.85).aspx ...
  • calendar_appbar 带有日历的自定义AppBar颤振包。 入门 要获得Flutter入门方面的帮助,请查看我们的,其中提供了教程,示例,有关移动开发的指南以及完整的API参考。
  • Win32 AppBar with Qt-开源

    2021-04-26 03:06:14
    QAppBar是用于Qt 4的Win32应用程序桌面工具栏(在Win32术语中为“ appbar”)小部件。C++和Python提供了实现。 令我惊讶的是,正如我想象的那样,Google搜索并没有出现这样的情况
  • CAppBar和AppBar的WTL实现

    2021-04-08 03:13:22
    可重用的WTL基类,以支持AppBar
  • Flutter AppBar组件是应用的工具栏,是由多个组件组成。下面详细介绍appBar使用方法、TabBar使用方法、去掉头部的appBar、仿美团发现AppBar(可滚动TabBar)
  • AppBar 布局的使用方式 AppBar的开发标准模板,Created by C.L. Wang
  • Flutter开发携程App,实现滚动渐变的AppBar,更多技术文章请关注【码农帮派】。使用到Stack布局,NotificationListener监听,MediaQuery.removePadding方法以及Opacity组件实现透明渐变效果。
  • 主要介绍了Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • Flutter 导航栏AppBar

    万次阅读 多人点赞 2020-09-03 22:35:20
    恢弘志士之气,不宜妄自菲薄。——诸葛亮 People of noble ambition should... } } 参考: Flutter 基础Widgets之AppBar详解 Flutter 来实现一个渐变色的 AppBar Flutter之AppBar属性分析 Flutter AppBar设置渐变色背景

     恢弘志士之气,不宜妄自菲薄。——诸葛亮

     

    People of noble ambition should not belittle themselves.     zhugeliang

    以上效果是谷歌团队创建的AppBar最初版,经典呀!!!

    [知乎]听 Flutter 创始人 Eric 为你讲述 Flutter 的故事

    AppBar  

    App 应用

            Bar 条  

    简称 应用导航条

    final Widget title 标题 app_bar.png

    AppBar(title: Text('AppBarTitle'),)

     final bool centerTitle 标题居中 app_bar.png

    AppBar(
            title: Text('AppBarTitle'),
            backgroundColor: Colors.lightBlue,
            centerTitle: true,
    )

    final Color backgroundColor 背景颜色 app_bar.png

    AppBar(
            title: Text('AppBarTitle'),
            backgroundColor: Colors.red,
    )

      

     final List<Widget> actions Widget集合 app_bar.png

    AppBar(
            title: Text('AppBarTitle'),
            backgroundColor: Colors.green,
            actions: <Widget>[
              IconButton(icon: const Icon(Icons.add),),
              IconButton(icon: const Icon(Icons.clear),),
              IconButton(icon: const Icon(Icons.arrow_drop_down),),
            ],
    )

      

    final double elevation 阴影大小(Z轴方向) app_bar.png

    AppBar(
            title: Text('AppBarTitle'),
            backgroundColor: Colors.red,
            actions: <Widget>[
              IconButton(icon: const Icon(Icons.add),),
              IconButton(icon: const Icon(Icons.clear),),
              IconButton(icon: const Icon(Icons.arrow_drop_down),),
            ],
            elevation: 50,
    )
    AppBar(
            title: Text('AppBarTitle'),
            backgroundColor: Colors.red,
            actions: <Widget>[
              IconButton(icon: const Icon(Icons.add),),
              IconButton(icon: const Icon(Icons.clear),),
              IconButton(icon: const Icon(Icons.arrow_drop_down),),
            ],
            elevation: 0,
    )

      

     final ShapeBorder shape  边框形状 app_bar.png

    / 圆角/

    AppBar(
            title: Text('AppBarTitle'),
            backgroundColor: Colors.greenAccent,
            elevation: 4,
            shape: RoundedRectangleBorder(
                side: BorderSide.none,
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(50.0),
                    bottomRight: Radius.circular(30.0))),
            actions: <Widget>[
              IconButton(
                icon: const Icon(Icons.add),
              ),
              IconButton(
                icon: const Icon(Icons.clear),
              ),
              IconButton(
                icon: const Icon(Icons.arrow_drop_down),
              ),
            ],
          )

       

       

    /斜角/

    AppBar(
            title: Text('AppBarTitle'),
            backgroundColor: Colors.greenAccent,
            elevation: 4,
            shape: BeveledRectangleBorder(
                side: BorderSide.none,
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(20.0),
                    bottomRight: Radius.circular(20.0))),
            actions: <Widget>[
              IconButton(
                icon: const Icon(Icons.add),
              ),
              IconButton(
                icon: const Icon(Icons.clear),
              ),
              IconButton(
                icon: const Icon(Icons.arrow_drop_down),
              ),
            ],
          )

       

       

    final PreferredSizeWidget bottom  底部widgetapp_bar.png

    AppBar(
            title: Text('AppBarTitle'),
            backgroundColor: Colors.lightBlue,
            elevation: 4,
            actions: <Widget>[
              IconButton(
                icon: const Icon(Icons.add),
              ),
              IconButton(
                icon: const Icon(Icons.clear),
              ),
              IconButton(
                icon: const Icon(Icons.arrow_drop_down),
              ),
            ],
            centerTitle: true,
            bottom: PreferredSize(child: Text('AppBarBottom')),
          )

    AppBar(
            title: Text('AppBarTitle'),
            backgroundColor: Colors.lightBlue,
            elevation: 4,
            actions: <Widget>[
              IconButton(
                icon: const Icon(Icons.add),
              ),
              IconButton(
                icon: const Icon(Icons.clear),
              ),
              IconButton(
                icon: const Icon(Icons.arrow_drop_down),
              ),
            ],
            centerTitle: true,
            bottom: PreferredSize(child: Text('AppBarBottom'),preferredSize: Size.fromHeight(100.0))
          )

    final Widget flexibleSpace 弹性空间app_bar.png

    AppBar(
              title: Text('AppBarTitle'),
              backgroundColor: Colors.lightBlue,
              elevation: 4,
              actions: <Widget>[
                IconButton(
                  icon: const Icon(Icons.add),
                ),
                IconButton(
                  icon: const Icon(Icons.clear),
                ),
                IconButton(
                  icon: const Icon(Icons.arrow_drop_down),
                ),
              ],
              centerTitle: true,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: const Text('Flight Report'),
              ),
              bottom: PreferredSize(child: Text('AppBarBottom'),
    preferredSize: Size.fromHeight(50.0)))

    AppBar(
              title: Text('AppBarTitle'),
              backgroundColor: Colors.lightBlue,
              elevation: 4,
              actions: <Widget>[
                IconButton(
                  icon: const Icon(Icons.add),
                ),
                IconButton(
                  icon: const Icon(Icons.clear),
                ),
                IconButton(
                  icon: const Icon(Icons.arrow_drop_down),
                ),
              ],
              centerTitle: true,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: const Text('Flight Report'),
              ),
              bottom: PreferredSize(child: Text('AppBarBottom'),preferredSize: Size.fromHeight(200.0)))

    final Widget leading 靠前widget

     AppBar(
              title: Text('AppBarTitle'),
              backgroundColor: Colors.lightBlue,
              leading: Builder(builder: (BuildContext context){
                return IconButton(icon: Icon(Icons.menu), onPressed: null);
              },),
              elevation: 4,
              actions: <Widget>[
                IconButton(
                  icon: const Icon(Icons.add),
                ),
                IconButton(
                  icon: const Icon(Icons.clear),
                ),
                IconButton(
                  icon: const Icon(Icons.arrow_drop_down),
                ),
              ],
              centerTitle: true,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: const Text('Flight Report'),
              ),
              bottom: PreferredSize(child: Text('AppBarBottom'),preferredSize: Size.fromHeight(100.0))),

     App导航栏悬浮 app_bar_pinned.mp4   app_bar.mp4

            

    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
             return Scaffold(
               body: CustomScrollView(
                 physics: const BouncingScrollPhysics(),
                 slivers: <Widget>[
                   SliverAppBar(
                     stretch: false,
                     onStretchTrigger: () {
                       // Function callback for stretch
                       return;
                     },
                     pinned: true,
                     expandedHeight: 300.0,
                     flexibleSpace: FlexibleSpaceBar(
                       stretchModes: <StretchMode>[
                         StretchMode.zoomBackground,
                         StretchMode.blurBackground,
                         StretchMode.fadeTitle,
                       ],
                       centerTitle: true,
                       title: const Text('Flight Report'),
                       background: Stack(
                         fit: StackFit.expand,
                         children: [
                           Image.network(
                             'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
                             fit: BoxFit.cover,
                           ),
                           const DecoratedBox(
                             decoration: BoxDecoration(
                               gradient: LinearGradient(
                                 begin: Alignment(0.0, 0.5),
                                 end: Alignment(0.0, 0.0),
                                 colors: <Color>[
                                   Color(0x60000000),
                                   Color(0x00000000),
                                 ],
                               ),
                             ),
                           ),
                         ],
                       ),
                     ),
                   ),
                   SliverList(
                     delegate: SliverChildListDelegate([
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Sunday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Monday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Sunday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Monday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Sunday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Monday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Sunday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Monday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Sunday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Monday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Monday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Monday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Monday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Monday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       ListTile(
                         leading: Icon(Icons.wb_sunny),
                         title: Text('Monday'),
                         subtitle: Text('sunny, h: 80, l: 65'),
                       ),
                       // ListTiles++
                     ]),
                   ),
                 ],
               ),
             );
      }
    }
    

    参考:

    Flutter 基础Widgets之AppBar详解

    Flutter 来实现一个渐变色的 AppBar

    Flutter之AppBar属性分析

    Flutter AppBar设置渐变色背景

    展开全文
  • appbar滑动视差效果

    2019-02-24 22:28:13
    CSDN博文:https://blog.csdn.net/gaoxiaoweiandy/article/details/87907558
  • flutter appbar

    2022-04-21 00:57:33
    自定义AppBar实现滚动渐变 1、 滑动过程中AppBar在不透明和透明之间进行变化 2、 为l使AppBar能够滚动,我们需要一个列表,这个列表足够长,以至于我们能够监听列表的滚动,来改变顶部的AppBar的背景...

    自定义AppBar实现滚动渐变

    1、

    滑动过程中AppBar在不透明和透明之间进行变化

    2、

    为l使AppBar能够滚动,我们需要一个列表,这个列表足够长,以至于我们能够监听列表的滚动,来改变顶部的AppBar的背景色

    添加底部的列表,让AppBar可以滑动

    3、移除listview和顶部的padding

    这个padding可能是开发团队考虑到了手机的适配,比如iphonX的适配,提前把顶部的安全区域预留下来了。但是对于我们来说,是需要这个banner在顶部的位置进行展示的,所以,需要将顶部的banner进行移除

    那么在flutter里面,如何将顶部的banner移除呢?那么需要用到一个类,这个类是MediaQuery,它由一个removePadding()这个函数

    但是MediaQuery.removePadding并没有生效

    因为它不知道该移除哪边,所以需要加上removeTop:true这句话

    4、监听列表的滚动

    在flutter里面监听列表的滚动需要用到一个类:NotificationListener()

    添加滚动监听

    虽然没有发生滚动,但是在不停地打印距离,而且是伴随着banner滚动发生的,所以说,有一个可能是Notification监听到了swiper它的滚动,所以需要做一个处理,只需要在listview滚动的时候才触发这样一个监听

    过滤listview的监听以后,如果不滑动时就不会一直触发监听打印日志了

    只有滑动的时候会打印日志

    5、实现一个AppBar,可以悬浮在上面

    需要自定义一个AppBar

    需要自定义一个AppBar在listView上面进行显示,所以需要一个Flutter布局的一个类,这个布局是Stack

    在Flutter里面,需要改变元素透明度的时候,需要用要给Opacity来包裹它。

    Stack布局中,后面的元素会覆盖上面的元素,所以使用Opacity包裹的元素要放在Stack的下面

    显示一个悬浮的AppBar

    6、改变appbar的透明度

    动态改变alpha的透明度:

    需要根据滑动监听动态改变AppBar的值

    默认情况下是透明的:

    移动过程中,AppBar逐渐变为白色的背景

    实际开发中,应该移除AppBar顶部的边距

    7、为了实现AppBar有一个滚动渐变的效果,由透明变成不透明,由不透明变为透明,使用了listview。

    由于listview是作为首页的根元素存在的,所以说它顶部会有一个padding,通过MediaQuery.removePadding进行移除

    为了实现对列表的监听,使用了NotificationListener,NotificationListener它接收一个scrollNotification的监听,列表每次滚动的时候都会回调这个函数,这个函数会检查它的根widget是否进行滚动,检查它的子widget是否进行滚动,依次进行检查,所以说它会监听很多很多widget,因为这里只监听外部的widget,所以将深度设置为0。NotificationListener在app加载的时候也会回调onNotification,但是scrollNotification类型不是ScrollUpdateNotification,所以只需要判断scrollNotification is ScrollUpdateNotification,也就是滚动的时候进行回调

    在对alpha值进行设置的时候,根据offset进行设置,对于alpha值进行一个保护逻辑,如果alpha值大于1的时候设置为1,小于0的时候设置为0,最后通过setState()对alpha值进行修改。修改之后,通过对opacity属性赋值才能有效。在对某个控件进行透明度控制的时候,都可以通过Opacity进行包裹,通过改变opacity这个参数,就可以改变这个控件的透明度。

    展开全文
  • flutter 自定义 Appbar

    千次阅读 2022-02-21 11:15:02
    最近用的很好的Appbar工具类分享一下 下面是方法名意思 1.backAppbar 仅含 左侧返回按钮 及中间标题 2.baseNoBackAppbar 仅含 及中间标题 3.baseRTextAppbar backAppbar 仅含 左侧返回按钮 及中间标题 ...

    最近用的很好的Appbar工具类分享一下

    
    

    下面是方法名意思

    1.backAppbar 仅含 左侧返回按钮 及中间标题
    2.baseNoBackAppbar 仅含 及中间标题
    
    3.baseRTextAppbar backAppbar 仅含 左侧返回按钮 及中间标题 右边是文字比如(确定按钮)
    4.baseRImageAppbar仅含 左侧返回按钮 及中间标题 右边是图片比如(确定按钮)
    5.baseRWidgetAppbar 仅含 左侧返回按钮 及中间标题 右边自定义view

    调用(这个特殊怕你们不会)

    appBar: BaseAppbar().baseRWidgetAppbar(context,Constants.tuwenVxTitle, <Widget>[
      方法名
    ]),
    
    6.baseCRWidgetAppbar自定义 左侧返回按钮 中间自定义view 右边自定义view
    appBar: BaseAppbar().baseCRWidgetAppbar(context,
      Container(里面的不写了哈哈
            ),
        <Widget>[
    
        ] ),
    /
    
    
    
    
    
    
    
    
    import 'package:flutter/material.dart';
    import 'package:flutter_mvp/app/application.dart';
    import 'package:flutter_mvp/utils/dio/constants/constants.dart';
    
    /**
    
     * flutter 自定义 backAppbar
     */
    typedef _CallBack = void Function();
    class BaseAppbar {
    
      /**
       * 仅含 左侧返回按钮 及中间标题
       * appBar: TitleBar().backAppbar(context, '个人资料'),
       */
       _CallBack  callback;
        backAppbar(BuildContext context, String title,{VoidCallback onPressed}) {
        return PreferredSize(
            preferredSize: Size.fromHeight(50),
            child: AppBar(
                backgroundColor:Color(Application.colorInt)
               ,centerTitle: true,
                title: Text(title ,   style: TextStyle(
                  color: Colors.white,
                  fontSize: Constants.appBarTitleSize,
                ),
                ),
    
                leading:   GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      Navigator.of(context).pop("update");
                    }, child:Container(
    
                  alignment: Alignment.center,
                  padding: EdgeInsets.all(10), // 设置边距
                  child: Image.asset(Constants.imagePath +"base_titlebar_back.png",
                    width:30,height: 30,
                  ),
    
                )),
            ),
            );
      }
    
      baseNoBackAppbar(BuildContext context, String title) {
        return PreferredSize(
          preferredSize: Size.fromHeight(48),
          child: AppBar(
            elevation: 0,  //默认是4, 设置成0 就是没有阴影了
            backgroundColor:Color(Application.colorInt)
            ,centerTitle: true,
            title: Text(title ,   style: TextStyle(
              color: Colors.white,
              fontSize: Constants.appBarTitleSize,
            ),
            ),
        ));
      }
    
    
    
      /**
       * 自定义AppBar右边是标题
       */
      baseRTextAppbar(BuildContext context,String title,String rtitle, {Null Function() callback}) {
        return PreferredSize(
            preferredSize: Size.fromHeight(48),
            child: AppBar(
            backgroundColor:Color(Application.colorInt)
            ,centerTitle: true,
            title: Text(title ,   style: TextStyle(
            color: Colors.white,
            fontSize: Constants.appBarTitleSize,
            ),
            ),
    
            leading:GestureDetector(
    
            behavior: HitTestBehavior.opaque,
            onTap: () {
            Navigator.of(context).pop("update");
            }, child:Container(
    
            alignment: Alignment.center,
            padding: EdgeInsets.all(10), // 设置边距
            child: Image.asset(Constants.imagePath +"base_titlebar_back.png", width: Constants.appBarBackSize,height:Constants.appBarBackSize,
            ),
            )),
            actions: <Widget>[
             GestureDetector(
            onTap: (){
              if(callback!=null){
                callback();
              }
            },
    
    
            child: Container(
              padding: EdgeInsets.only(right: 10),
            alignment: Alignment.center,
            child: Text(
            rtitle,
            textAlign: TextAlign.center,
            style: const TextStyle(
            color: Colors.white,
            fontSize: 20.0,
            fontWeight: FontWeight.w400, //字体宽度。
    
            ),
            ),
            ),
            ),
        ]));
    
      }
       /**
        * 自定义AppBar右边两个图片
        */
       baseRImageAppbar(BuildContext context,String title,String rimageStr, {Null Function() callback}) {
         return PreferredSize(
             preferredSize: Size.fromHeight(48),
             child: AppBar(
                 backgroundColor:Color(Application.colorInt)
                 ,centerTitle: true,
                 title: Text(title ,   style: TextStyle(
                   color: Colors.white,
                   fontSize: Constants.appBarTitleSize,
                 ),
                 ),
    
                 leading:GestureDetector(
    
                     behavior: HitTestBehavior.opaque,
                     onTap: () {
                       Navigator.of(context).pop("update");
                     }, child:Container(
    
                   alignment: Alignment.center,
                   padding: EdgeInsets.all(10), // 设置边距
                   child: Image.asset(Constants.imagePath +"base_titlebar_back.png", width: Constants.appBarBackSize,height:Constants.appBarBackSize,
                   ),
                 )),
                 actions: <Widget>[
                   GestureDetector(
                     onTap: () {
                       if (callback != null) {
                         callback();
                       }
                     },
                     child: Container(
                       padding: EdgeInsets.only(right: 10),
                       child: Image.asset(rimageStr,
                           width: Constants.appBarBackSize),
                     ),
                   )
                 ]));
    
       }
    
    
       /**
        * 自定义AppBar 右边自定义view
        */
    
    
       baseRWidgetAppbar(BuildContext context,String title, List<Widget> childWidget) {
         return PreferredSize(
             preferredSize: Size.fromHeight(48),
             child: AppBar(
                 backgroundColor:Color(Application.colorInt)
                 ,centerTitle: true,
                 title: Text(title ,   style: TextStyle(
                   color: Colors.white,
                   fontSize: Constants.appBarTitleSize,
                 ),
                 ),
    
                 leading:GestureDetector(
    
                     behavior: HitTestBehavior.opaque,
                     onTap: () {
                       Navigator.of(context).pop("update");
                     }, child:Container(
    
                   alignment: Alignment.center,
                   padding: EdgeInsets.all(10), // 设置边距
                   child: Image.asset(Constants.imagePath +"base_titlebar_back.png", width: Constants.appBarBackSize,height:Constants.appBarBackSize,
                   ),
                 )),
                 actions: childWidget));
    
       }
    
    
    
       /**
        * 自定义AppBar 中间自定义view 右边自定义view
        */
    
       baseCRWidgetAppbar(BuildContext context,Widget centerWidget, List<Widget> childWidget) {
         return PreferredSize(
    
             preferredSize: Size.fromHeight(48),
             child: AppBar(
                 backgroundColor:Color(Application.colorInt)
                 ,centerTitle: true,
                 title: centerWidget,
                 leading:GestureDetector(
                     behavior: HitTestBehavior.opaque,
                     onTap: () {
                       Navigator.of(context).pop("update");
                     }, child:Container(
    
                   alignment: Alignment.center,
                   padding: EdgeInsets.all(10), // 设置边距
                   child: Image.asset(Constants.imagePath +"base_titlebar_back.png", width: Constants.appBarBackSize,height:Constants.appBarBackSize,
                   ),
                 )),
                 actions: childWidget));
    
       }
    
    
    
    
    
    
    
      /**
       * 关闭页面
       */
      _popThis(BuildContext context){
        Navigator.of(context).pop();
      }
    
    }

    下面是调用代码

     

    appBar:  BaseAppbar().baseNoBackAppbar(context, '111'),

     

    appBar: BaseAppbar().baseRImageAppbar(context,serchStr,  Constants.imagePath+"base_titlebar_add.png",callback: () {
     写自己的方法
    }),

    这里只写2个调用方法

    展开全文
  • AppBar 通过继承ToolBar而实现的灵活、简单AppBar,纯净原生。 更改原生ActionBar样式需要定义各种style,这些style真的太难理解了(我花了三天才理解)。ActionBar内部的view还都是不能直接拿到的,很不灵活。 我不...
  • AppBar 应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮,或者只是页面标题。由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。 在...
  • 【Flutter】基础组件【07】Appbar

    千次阅读 2021-11-18 09:16:39
    1. 写在前面 在上篇文章中介绍了Flutter中的Image组件,今天继续学习【Flutter】基础组件中的Appbar组件。 【基础语法合集】 【Flutter】Dart中的var、final 和 const基本使用 【Flutter】Dart数据类型之num ...
  • Flutter AppBar统一样式抽取

    千次阅读 2022-02-17 20:41:41
    } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: ThemeColors.colorF2F2F2, appBar: AppBar( title: Text( widget.title, style: ...
  • Flutter AppBar 简述

    千次阅读 2019-06-29 15:54:45
    AppBar AppBar 显示在app的顶部,或者说 顶端栏,对应着 Android 的 Toolbar。如下图: ### 1 只有标题 无其他按钮 Widget buildDefaultBar(String title) { return appBar = AppBar( //标题居中显示 center...
  • Flutter封装 AppBar

    2022-02-15 10:29:18
    封装统一 AppBar
  • Flutter AppBar 详解

    千次阅读 2021-01-11 13:48:18
    AppBar({ Key key, this.leading, //widget类型,即可任意设计样式,表示左侧leading区域,通常为icon,如返回icon this.automaticallyImplyLeading = true, // 如果leading!=null,该属性不生效;如果leading==...
  • Flutter | 自定义 AppBar

    2021-11-03 15:01:56
    对于简单的自定义 AppBar,使用系统提供的 AppBar,给 title 赋值 widget 就够用了: class _ScaffoldDemoPage3State extends State<ScaffoldDemoPage3> { @override Widget build(BuildContext context) { ...
  • 创建应用程序栏(AppBar)在大多数的App中都会有标题栏这个组件,这个组件能让App有统一的风格,它一般由标题和溢出菜单(overflow menu)组成。 从Android3.0开始,使用默认主题的Activity都有一个ActionBar作为标题栏...
  • Flutter_AppBar

    2021-05-10 05:57:46
    应用栏 AppBar小部件的完整示例 埃及 简码
  • Flutter AppBar设置透明

    千次阅读 2022-02-22 11:57:46
    child: Scaffold( extendBody: true, //底部NavigationBar透明 extendBodyBehindAppBar: ... appBar: AppBar( elevation: 0,//消除阴影 backgroundColor: Colors.white,//设置背景颜色为白色 ... ), .... ), ...
  • Flutter 顶部导航 AppBar 的实现

    万次阅读 2020-12-09 13:53:25
    Flutter 实现 AppBar 功能 我们知道,Android 中 Material 布局。只要是在 Material 中使用 AppBar 控件,即可实现 导航条的功能。 AppBar 的属性 想要使用 AppBar 这个 Widget 组件,首先要了解它的属性: AppBar...
  • centerTitle 标题是否居中 titleSpacing 标题文字与其他组件的间距 使用上面表格中部分属性可以自定义AppBar,效果如图: 代码如下: appBar: AppBar( title: Text("自定义AppBar"), brightness: Brightness.light, ...
  • 目录 App底部tab切换 除了主界面以外,新建两个界面,界面布局如下 界面:home.dart 界面:user.dart 底部导航栏:tabs.dart 主界面 效果 其他 底部导航栏超过三个不显示 顶部导航 常见属性: 自定义AppBar 顶部Tab切换...
  • Flutter自定义Appbar搜索框

    千次阅读 2021-06-12 16:09:33
    为了方便处理statusbar的高度适配,于是乎直接依托于Appbar进行了实现,这样就可以不用处理状态栏适配了。 class _HotWidgetState extends State<HotWidget> { @override Widget build(BuildContext c

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,087
精华内容 8,434
关键字:

appbar

友情链接: WindowsFormsApp2.rar