flutter系列之:如丝般顺滑的SliverAppBar

简介: 对于一个APP来说,肯定会有一个AppBar,这个AppBar一般包含了APP的导航信息等。虽然我们可以用一个固定的组件来做为AppBar,但是这样就会丢失很多特效,比如将AppBar固定在顶部,AppBar可以在滑动的过程中进行大小变换等。当然这一切都不需要自己来实现,flutter已经为我们提供了一个非常强大的AppBar组件,这个组件叫做SliverAppBar。

简介

对于一个APP来说,肯定会有一个AppBar,这个AppBar一般包含了APP的导航信息等。虽然我们可以用一个固定的组件来做为AppBar,但是这样就会丢失很多特效,比如将AppBar固定在顶部,AppBar可以在滑动的过程中进行大小变换等。

当然这一切都不需要自己来实现,flutter已经为我们提供了一个非常强大的AppBar组件,这个组件叫做SliverAppBar。

SliverAppBar详解

我们先来看下SliverAppBar的定义:

class SliverAppBar extends StatefulWidget

可以看到SliverAppBar是一个StatefulWidget,它里面的状态包含的是一些配置信息,包括FloatingHeaderSnapConfiguration,OverScrollHeaderStretchConfiguration和PersistentHeaderShowOnScreenConfiguration等。

SliverAppBar可以接收很多属性,我们接下来会讲解其中最重要和最常用的几个属性。

  • forceElevated

forceElevated是一个bool值,表示是否显示AppBar的阴影效果,默认值是false。

  • primary

primary使用来配置AppBar的属性,表示AppBar是否显示在界面的Top位置。如果设置为true,那么AppBar将会被放置在Top的位置,并且使用的高度是系统status bar的高度。

  • floating

floating是一个非常重要的属性,因为对于SliverAppBar来说,当界面向远离SliverAppBar的方向滚动的时候,SliverAppBar会隐藏或者缩写为status bar的高度,floating的意思就是当我们向SliverAppBar滑动的时候,SliverAppBar是否浮动展示。

  • pinned

表示SliverAppBar在滚动的过程中是否会固定在界面的边缘。

  • snap

snap是和floating一起使用的属性,snap表示当向SliverAppBar滚动的时候,SliverAppBar是否立即展示完全。

  • automaticallyImplyLeading

automaticallyImplyLeading是用在AppBar中的属性,表示是否需要实现leading widget。

其中最常用的就是floating,pinned和snap这几个属性。

另外还有一个flexibleSpace组件,他是SliverAppBar在float的时候展示的widget,通常和expandedHeight配合使用。

SliverAppBar的使用

上面讲解了SliverAppBar的构造函数和基础属性,接下来我们通过具体的例子来讲解SliverAppBar如何使用。

通常来说SliverAppBar是和CustomScrollView一起使用的,也就是说SliverAppBar会被封装在CustomScrollView中。

CustomScrollView中除了SliverAppBar之外,还可以添加其他的sliver组件。

首先我们定义一个SliverAppBar:

SliverAppBar(
          pinned: true,
          snap: true,
          floating: true,
          expandedHeight: 200.0,
          flexibleSpace: FlexibleSpaceBar(
            title: const Text('SliverAppBar'),
            background: Image.asset("images/head.jpg"),
          ),
        ),

这里我们设置pinned,snap和floating的值都为true,然后设置了expandedHeight和flexibleSpace。

这里的flexibleSpaces是一个FlexibleSpaceBar对象,这里我们设置了title和background属性。

接着我们需要把SliverAppBar放到CustomScrollView中进行展示。

Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
         ...
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return Container(
                color: index.isOdd ? Colors.white : Colors.green,
                height: 100.0,
                child: Center(
                  child: ListTile(
                    title: Text(
                      '1888888888' + index.toString(),
                      style: TextStyle(fontWeight: FontWeight.w500),
                    ),
                    leading: Icon(
                      Icons.contact_phone,
                      color: Colors.blue[500],
                    ),
                  ),
                ),
              );
            },
            childCount: 10,
          ),
        ),
      ],
    );

在SliverAppBar之外,我们还提供了一个SliverList,这里使用了SliverChildBuilderDelegate来构造10个ListTile对象。

最后运行可以得到下面的界面:

默认情况下SliverAppBar是展开状态,如果我们将下面的SliverList向上滑动,flexibleSpace就会被隐藏,我们可以得到下面的界面:

当我们向上慢慢滑动的时候,因为设置的是floating=true, 并且snap=true,所以只要向上滑动,就会展示所有的flexibleSpace:

当我们将floating设置为false的时候,只有向上滑动到顶端的时候,flexibleSpace才会全部展示出来。

总结

简单点说,SliverAppBar就是一个在滑动中可变大小的AppBar,我们可以通过设置不同的参数来实现不同的效果。

本文的例子:https://github.com/ddean2009/learn-flutter.git

相关文章
|
3月前
|
前端开发 JavaScript 定位技术
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
63 0
Flutter 之 SliverAppBar
Flutter 之 SliverAppBar
346 0
|
3月前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
154 0
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
2月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
3月前
|
前端开发 C++ 容器
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
|
7天前
|
移动开发 前端开发 JavaScript
"跨界大战!React Native、Weex、Flutter:三大混合开发王者正面交锋,揭秘谁才是你移动应用开发的终极利器?"
【8月更文挑战第12天】随着移动应用开发的需求日益增长,高效构建跨平台应用成为关键。React Native、Weex与Flutter作为主流混合开发框架各具特色。React Native依托Facebook的强大支持,以接近原生的性能和丰富的组件库著称;Weex由阿里巴巴开发,性能优越尤其在大数据处理上表现突出;Flutter则凭借Google的支持及独特的Dart语言和Skia渲染引擎,提供出色的定制能力和开发效率。选择时需考量项目特性、团队技能及生态系统的成熟度。希望本文对比能助你做出最佳决策。
28 1
|
2月前
|
开发框架 移动开发 Android开发
构建高效移动应用:探索Flutter开发框架
【6月更文挑战第28天】随着移动设备的普及,用户对移动应用的需求日益增长。开发者面临着在众多平台间提供无缝体验的挑战。本文深入探讨了Flutter框架如何通过其跨平台特性、热重载功能以及丰富的组件库简化移动应用的开发流程,同时确保高性能和优雅的用户界面设计。
39 2
|
3月前
|
Dart 安全
简化代码、提高效率:Dart和Flutter开发小技巧
在日常开发中,我们常常会使用一些常用的技巧或语法糖,以简化代码、提高开发效率。本文将分享一些在Dart和Flutter中常用的小贴士,帮助你更轻松地编写优雅高效的代码。
简化代码、提高效率:Dart和Flutter开发小技巧
|
2月前
|
Dart 监控 测试技术
在Flutter开发中,注重代码质量与重构实践显得尤为重要
【6月更文挑战第11天】随着Flutter在跨平台开发的普及,保持高质量代码成为开发者关注的重点。良好的代码质量关乎应用性能、稳定性和开发效率。为提升Flutter代码质量,开发者应遵循最佳实践,编写可读性高的代码,实施代码审查和自动化测试。重构实践在应对代码复杂性时也至关重要,包括识别重构时机、制定计划、逐步操作及利用重构工具。注重代码质量和重构是Flutter开发成功的关键。
48 3
|
1月前
|
Dart Android开发 iOS开发
flutter插件开发
flutter插件开发