详解Android Flutter中SliverAppBar的使用教程

作者:程序那些事 时间:2023-06-23 12:11:27 

简介

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

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

SliverAppBar详解

我们先来看下SliverAppBar的定义:

class SliverAppBar extends StatefulWidget

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

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

1.forceElevated

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

2.primary

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

3.floating

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

4.pinned

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

5.snap

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

6.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对象。

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

详解Android Flutter中SliverAppBar的使用教程

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

详解Android Flutter中SliverAppBar的使用教程

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

详解Android Flutter中SliverAppBar的使用教程

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

来源:https://juejin.cn/post/7152787686904823822

标签:Android,Flutter,SliverAppBar
0
投稿

猜你喜欢

  • android仿微信联系人索引列表功能

    2023-06-22 17:33:30
  • Flutter网络请求的3种简单实现方法

    2023-06-21 10:53:22
  • 10种简单的Java性能优化

    2023-06-20 20:43:41
  • Java虚拟机内存区域划分详解

    2023-06-20 22:04:24
  • C#实现简单俄罗斯方块

    2023-06-18 07:18:36
  • iOS WebView中使用webp格式图片的方法

    2023-06-17 22:06:03
  • Kotlin与Java相互调用的完整实例

    2023-06-17 03:23:23
  • 使用Android studio创建的AIDL编译时找不到自定义类的解决办法

    2023-06-23 10:59:41
  • flutter实现appbar下选项卡切换

    2023-06-21 13:35:24
  • springboot post接口接受json时,转换为对象时,属性都为null的解决

    2023-06-17 15:24:23
  • Flutter 使用fluro的转场动画进行页面切换

    2023-06-17 11:49:26
  • Opencv光流运动物体追踪详解

    2023-06-21 11:55:31
  • Java读写txt文件时防止中文乱码问题出现的方法介绍

    2023-06-23 04:40:32
  • Android Studio kotlin生成编辑类注释代码

    2023-06-16 12:03:20
  • Java数据结构之顺序表的实现

    2023-06-22 00:47:26
  • flutter轮子计划之进度条

    2023-06-21 07:59:39
  • Android Studio多渠道打包的配置方法

    2023-06-15 23:19:48
  • Android Camera+SurfaceView自动聚焦防止变形拉伸

    2023-06-18 06:35:54
  • Android Studio中通过CMake使用NDK并编译自定义库和添加预编译库

    2023-06-16 10:31:35
  • 浅析Mybatis 在CS程序中的应用

    2023-06-24 08:44:15
  • asp之家 软件编程 m.aspxhome.com