当前位置: 首页 > news >正文

SliverAppBar的功能和用法

文章目录

  • 1 概念介绍
  • 2 使用方法
  • 3 示例代码

我们在上一章回中介绍了SliverGrid组件相关的内容,本章回中将介绍SliverAppBar组件.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1 概念介绍

我们在本章回中介绍的SliverAppBar和普通的AppBar类似,它们的不同之处在于SliverAppBar创建的内容可以折叠和展开,因此它主要和SliverList等组件配合
使用,这样就可以创建一个滑动时折叠或者展开的标题,这样可以丰富标题的内容。本章回中将详细介绍SliverAppBar的使用方法。

2 使用方法

和其它组件一样SliverAppBar提供了相关的属性来控制自己,下面是常用的属性,掌握这些属性就可以使用SliverAppBar了。

  • title属性:主要用来显示标题,和普通AppBar中的title一样;
  • backgroundColor属性:主要用来控制appBar的背景颜色;
  • collapsedHeight属性:主要用来控制AppBar关闭时的高度;
  • expandedHeight属性:主要用来控制AppBar展开时的高度;
  • flexibleSpace属性:主要用来存放AppBar展开时的内容;
    上面介绍的这些属性中我重点介绍一下flexibleSpace属性,该属性是Widget类型,因此我们需要使用组件给它赋值,常用FlexibleSpace类型的组件给它赋值,该
    组件属于容器类组件,它本身只负责装饰,而不显示具体的内容,具体的内容在background属性对应的组件中。我们将在后面的小节中通过代码来演示它的用法。

3 示例代码

SliverAppBar(title: const Text('Title of SliverAppBar'),backgroundColor: Colors.purpleAccent,///关闭和展开时的高度collapsedHeight: 60,expandedHeight: 300,///下滑屏幕时先显示appBar下面的内容,后显示appBar中的内容,默认值为false表示此情况///设置为true时,下滑屏幕时先显示appBar中的内容,后显示appBar下面的内容;floating: true,///向上拖动屏幕,下面的内容向上滚动,appBar逐渐缩小,最后是否显示appBar,默认是56高度的appBar///默认值为false,表示不显示pinned: true,///appBar空间扩展后显示的内容flexibleSpace: FlexibleSpaceBar(///这个title在appBar的最下方,可以不设定,缩小后它会和SliverAppBar的title重合title: const Text('title of FlexibleSpaceBar'),background: Container(decoration: const BoxDecoration(image:DecorationImage(opacity: 0.8,// colorFilter: ColorFilter.mode(Color.fromARGB(100, 200, 20,30),BlendMode.difference),image: AssetImage("images/ex.png"),fit: BoxFit.fill,),),///扩展空间中主要显示的内容child: const Center(child: Text('child of container')),),centerTitle: true,///拉伸和折叠时的样式,效果不是很明显collapseMode: CollapseMode.pin,stretchModes: const [StretchMode.zoomBackground,StretchMode.blurBackground,StretchMode.fadeTitle,],),
),

上面的示例代码中添加了详细的注释,这样方便大家理解代码。不过依据目前的知识我们还不能演示程序的运行结果,因为还需要其它组件配合才可以运行,大家不用担心,目前只需要熟练掌握如何创建SliverAppBar组件就可以了,我们在后面章回中会使用本章回创建的组件给大家演示程序运行效果。

看官们,与"SliverAppBar组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

http://www.lryc.cn/news/531023.html

相关文章:

  • 五、定时器实现呼吸灯
  • Elasticsearch的索引生命周期管理
  • 【大模型理论篇】最近大火的DeepSeek-R1初探系列1
  • 【数据结构】(4) 线性表 List
  • 【C++ STL】vector容器详解:从入门到精通
  • OpenAI推出Deep Research带给我们怎样的启示
  • 洛谷[USACO08DEC] Patting Heads S
  • CSS 溢出内容处理:从基础到实战
  • Spring Boot项目如何使用MyBatis实现分页查询
  • 飞行汽车中的无刷外转子电机、人形机器人中的无框力矩电机技术解析与应用
  • FreeRTOS学习 --- 队列集
  • 【R语言】R语言安装包的相关操作
  • 15.[前端开发]Day15-HTML+CSS阶段练习(网易云音乐四)
  • 【基于SprintBoot+Mybatis+Mysql】电脑商城项目之用户登录
  • 测试方案和测试计划相同点和不同点
  • c++提取矩形区域图像的梯度并拟合直线
  • Unity Shader Graph 2D - 角色身体电流覆盖效果
  • 【LLM-agent】(task4)搜索引擎Agent
  • 携程Java开发面试题及参考答案 (200道-下)
  • GWO优化SVM回归预测matlab
  • QMK启用摇杆和鼠标按键功能
  • Unity实现按键设置功能代码
  • 基于物联网技术的实时数据流可视化研究(论文+源码)
  • list容器(详解)
  • Elasticsearch基本使用详解
  • 17.3.4 颜色矩阵
  • FPGA 时钟多路复用
  • 机器学习10
  • 【Block总结】CoT,上下文Transformer注意力|即插即用
  • linux库函数 gettimeofday() localtime的概念和使用案例