sliverappbar高度_SliverAppBar 介绍及使用

SliverAppBar控件可以实现页面头部区域展开、折叠的效果，类似于Android中的CollapsingToolbarLayout。

先看下SliverAppBar实现的效果，效果图如下：

SliverAppBar控件需要和CustomScrollView搭配使用,SliverAppBar要通常放在slivers的第一位，后面接其他sliver控件。

CustomScrollView(

slivers: [

SliverAppBar(

),

//其他sliver控件

],

)

SliverAppBar和其他slivers控件的结构如下：

SliverAppBar中有一个非常重要的参数flexibleSpace，flexibleSpace是SliverAppBar中展开和折叠区域，flexibleSpace与expandedHeight一起使用，

expandedHeight表示flexibleSpace的高度，

SliverAppBar(

expandedHeight: 200.0,

flexibleSpace: FlexibleSpaceBar(

),

),

SliverAppBar其他常用属性说明如下：

属性

说明

leading

左侧控件，通常情况下为"返回"图标

title

标题，通常为Text控件

actions

右侧控件

flexibleSpace

展开和折叠区域

bottom

底部控件

elevation

阴影

expandedHeight

展开区域的高度

floating

设置为true时，向下滑动时，即使当前CustomScrollView不在顶部，SliverAppBar也会跟着一起向下出现

pinned

设置为true时，当SliverAppBar内容滑出屏幕时，将始终渲染一个固定在顶部的收起状态

snap

设置为true时，当手指放开时，SliverAppBar会根据当前的位置进行调整，始终保持展开或收起的状态，此效果在floating=true时生效

实现文章开头效果的整体代码如下：

class SliverAppBarDemo extends StatelessWidget {

@override

Widget build(BuildContext context) {

return CustomScrollView(

slivers: [

SliverAppBar(

pinned: true,

expandedHeight: 200.0,

flexibleSpace: FlexibleSpaceBar(

title: Text('复仇者联盟'),

background: Image.network(

'http://img.haote.com/upload/20180918/2018091815372344164.jpg',

fit: BoxFit.fitHeight,

),

),

),

SliverFixedExtentList(

itemExtent: 80.0,

delegate: SliverChildBuilderDelegate(

(BuildContext context, int index) {

return Card(

child: Container(

alignment: Alignment.center,

color: Colors.primaries[(index % 18)],

child: Text(''),

),

);

},

),

),

],

);

}

}

如果此文章对您有所帮助，欢迎扫码关注订阅号，您的点赞、转发、评论、打赏是我继续分享的最大动力。

【Flutter学习】页面跳转之SliverAppBar,CustomScrollView,NestedScrollView的使用

一,flutter SliverAppbar 控件介绍 SliverAppBar “应用栏” 相当于升级版的 appbar 于 AppBar 位置的固定的应用最上面的; 而 SliverAppBar ...

CSS3 background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

MySQL高级知识- MySQL的架构介绍

[TOC] 1.MySQL 简介 概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不同的表中,而 ...

Windows Server 2012 NIC Teaming介绍及注意事项

Windows Server 2012 NIC Teaming介绍及注意事项 转载自:http://www.it165.net/os/html/201303/4799.html Windows Ser ...

Linux下服务器端开发流程及相关工具介绍(C++)

去年刚毕业来公司后,做为新人,发现很多东西都没有文档,各种工具和地址都是口口相传的,而且很多时候都是不知道有哪些工具可以使用,所以当时就想把自己接触到的这些东西记录下来,为后来者提供参考,相当于一个路 ...

JavaScript var关键字、变量的状态、异常处理、命名规范等介绍

本篇主要介绍var关键字.变量的undefined和null状态.异常处理.命名规范. 目录 1. var 关键字:介绍var关键字的使用. 2. 变量的状态:介绍变量的未定义.已定义未赋值.已定义已 ...

HTML DOM 介绍

本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

HTML 事件(一) 事件的介绍

本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...

HTML5 介绍

本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 ...

随机推荐

ZOJ Problem Set - 1331 Perfect Cubes 判断一个double是否为整数

zju对时间要求比较高,这就要求我们不能简单地暴力求解(三个循环搞定),就要换个思路:因为在循环时,已知a,确定b,c,d,在外重两层循环中已经给定了b和c,我们就不用遍历d,我们可以利用d^3=a^ ...

javascript中的双向队列

1.概念 我们知道队列是一种先进先出的结构,只能在队伍的开头添加元素,队伍的结尾删除元素.双向队列的概念就是同时允许在队伍的开头和结尾添加和删除元素.在javascript中有一个处理数组的方法Arr ...

夺命雷公狗---Thinkphp----5之数据库的链接

我们打开WEB目录下发现了Common和Home以及Runtime这三个文件夹 那么我们第一个目标是完成网站后台的首页吧,那么我们就直接将Home的文件夹复制一份出来,并且改名为Admin这样就可以分 ...

使用SparkSQL实现多线程分页查询并写入文件

一.由于具有多张宽表且字段较多,每个宽表数据大概为4000万条,根据业务逻辑拼接别名,并每张宽表的固定字段进行left join 拼接SQL.这样就能根据每个宽表的主列,根据每个宽表的不同字段关联出一 ...

Filter 字符编码Filter 一

使用字符编码Filter package com.helloweenvsfei.filter; import java.io.IOException; import javax.servlet.Fil ...

Jumpserver部署与安装

jumpserver特点: 完全开源,GPL授权 Python编写,容易再次开发 实现了跳板机基本功能,认证.授权.审计 集成了Ansible,批量命令等 支持WebTerminal Bootstra ...

Linux指令--more,less

文章出处:http://www.cnblogs.com/peida/archive/2012/11/05/2754477.html,感谢原作者无私的分享. more命令,功能类似 cat ,cat命令 ...

spark2.0源码学习

[Spark2.0源码学习]-1.概述 [Spark2.0源码学习]-2.一切从脚本说起 [Spark2.0源码学习]-3.Endpoint模型介绍 [Spark2.0源码学习]-4.Master启动 ...

Python PIL 库的应用

PIL (Python Image Library) 库是Python 语言的一个第三方库,PIL库支持图像存储.显示和处理,能够处理几乎所有格式的图片. 一.PIL库简介 1. PIL库主要有2个方 ...

Element ui 使用 Tree 树形控件

使用树形控件需要映入 jsx才能运行链接:https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage npm install\ babe ...