Flutter——最详细(CustomScrollView)使用教程

这篇具有很好参考价值的文章主要介绍了Flutter——最详细(CustomScrollView)使用教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CustomScrollView简介

创建一个 [ScrollView],该视图使用薄片创建自定义滚动效果。
[SliverList],这是一个显示线性子项列表的银子列表。
[SliverFixedExtentList],这是一种更高效的薄片,它显示沿滚动轴具有相同范围的子级的线性列表。
[SliverGrid],这是一个显示子项 2D 数组的薄片。
[SliverPadding],这是一个在另一个薄片周围添加空白空间的薄片。
[SliverAppBar],这是一个显示标题的条形,该标题可以在滚动视图滚动时展开和浮动。[ScrollNotification]
和 [NotificationListener],可用于在不使用 [ScrollController] 的情况下监视滚动位置。[索引语义]
,它允许使用滚动公告的索引来批注子列表。

使用场景:

当列表高度超出屏幕,则需要使用该组件,进而实现布局上下滑动。
我们需要注意的是 slivers 这个数组必须使用带Sliver开头的组件。

属性 作用
scrollDirection 滑动方向
reverse 数据列表反向显示
controller 滑动列表参数配置
primary 自行查看
physics 滑动到底部之后的滑动动画
scrollBehavior 自行查看
shrinkWrap 确定滚动视图的高度
cacheExtent 设置缓存范围
semanticChildCount 设置子视图的个数
keyboardDismissBehavior 键盘关闭模式
clipBehavior 布局裁剪模式
slivers 它是数组格式,填充Widget

SliverPadding组件:相当于一个Padding组件,设置内边距;

 SliverPadding(
            padding: EdgeInsets.all(20.w),
            sliver: SliverToBoxAdapter(
              child: Container(
                color: Colors.black54,
                child: Text("SliverToBoxAdapter"),
              ),
            ),
          )

绿色外部红色内部则是设置的padding间距

flutter开发sliverlayoutbuilder用法,flutter,flutter

SliverToBoxAdapter组件:相当于一个Container布局容器;

SliverToBoxAdapter(
            child: Container(
              color: Colors.black54,
              child: Text("SliverToBoxAdapter"),
            ),
          )

SliverGrid组件:相当于一个GridView网格布局容器;
分为:SliverGrid.extent()SliverGrid.count()SliverGrid.builder()、这几个属性可以自行去源码查看

 SliverGrid.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              childAspectRatio: 1,
            ),
            itemCount: data.length,
            itemBuilder: (BuildContext context, int index) {
              var item = data[index];
              return Card(
                elevation: 1,
                clipBehavior: Clip.hardEdge,
                child: Text(
                  item.toString(),
                  style: TextStyle(
                    color: Colors.blueAccent,
                    fontSize: 26,
                  ),
                ),
              );
            },
          )

绿色部分是 SliverGrid组件实现

flutter开发sliverlayoutbuilder用法,flutter,flutter

SliverList组件:相当于一个ListView网格布局容器;
分为:SliverList.separated()、SliverList.list()、 SliverList.builder()、这几个属性可以自行去源码查看

     SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(
                  title: Text('SliverList Item $index'),
                );
              },
              childCount: 10, // 列表项的个数
            ),
          ),

flutter开发sliverlayoutbuilder用法,flutter,flutter

SliverFixedExtentList组件:相当于一个ListView网格布局容器;多了一个itemExtent固定item高度属性。可以提高滑动效率。
分为:SliverFixedExtentList.list()、 SliverFixedExtentList.builder()、这几个属性可以自行去源码查看

         SliverFixedExtentList(
            itemExtent: 50, // 列表项的高度
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return ListTile(
                  title: Text('FixedExtent Item $index'),
                );
              },
              childCount: 10, // 列表项的个数
            ),
          ),

flutter开发sliverlayoutbuilder用法,flutter,flutter

SliverAppBar组件:相当于一个AppBar容器;

  • title:指定应用栏的标题部分。 floating:当向上滚动时,设置为true会将应用栏固定在屏幕顶部。默认值为false。
  • pinned:设置为true时,应用栏始终可见,无论向上滚动多少。默认值为false。
  • expandedHeight:设置应用栏展开的高度。
  • flexibleSpace:可以将FlexibleSpaceBar作为应用栏的子项,以添加背景图像、渐变效果等。

flutter开发sliverlayoutbuilder用法,flutter,flutter

SliverAppBar、SliverPersistentHeader、SliverFixedExtentList三个组件同时使用;

          SliverPersistentHeader(
            delegate: MyPersistentHeaderDelegate(), // 委托对象,控制头部视图的行为和外观
            pinned: true, // 是否始终显示头部视图,无论向上滚动多少
          ),
          SliverFixedExtentList(![在这里插入图片描述](https://img-blog.csdnimg.cn/12c5cbf2213545c78de68a9a723c01cc.gif#pic_center)

            itemExtent: 50, // 列表项的高度
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return ListTile(
                  title: Text('FixedExtent Item $index'),
                );
              },
              childCount: 20, // 列表项的个数
            ),
          ),

flutter开发sliverlayoutbuilder用法,flutter,flutter

SliverAppBar(
            title: Text(
              'My App',
              style: TextStyle(color: Colors.red),
            ),
            floating: true,
            // 当向上滚动时,是否将应用栏固定在屏幕顶部
            pinned: true,
            // 是否始终显示应用栏,无论向上滚动多少
            expandedHeight: 100,
            // 展开的高度
            flexibleSpace: FlexibleSpaceBar(
              background:
                  Image.asset('assets/googleplay.png', fit: BoxFit.cover),
            ),
          ),
          SliverPersistentHeader(
            delegate: MyPersistentHeaderDelegate(), // 委托对象,控制头部视图的行为和外观
            pinned: true, // 是否始终显示头部视图,无论向上滚动多少
          ),
          SliverFixedExtentList(
            itemExtent: 50, // 列表项的高度
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return ListTile(
                  title: Text('FixedExtent Item $index'),
                );
              },
              childCount: 20, // 列表项的个数
            ),
          ),

flutter开发sliverlayoutbuilder用法,flutter,flutter

SliverOpacity 对应组件:Opacity
SliverAnimatedOpacity 对应组件: AnimatedOpacity
SliverFadeTransition 对应组件:FadeTransition
SliverIgnorePointer 对应组件:IgnorePointer
SliverLayoutBuilder 对应组件:LayoutBuilder
SliverOffstage 对应组件:Offstage
SliverPadding 对应组件:Padding
SliverReorderableList 对应组件:ReorderableList
SliverSafeArea 对应组件:SafeArea
SliverVisibility 对应组件:Visibility
这些具体使用请看源码自行了解;

项目地址

https://github.com/z244370114/flutter_demo文章来源地址https://www.toymoban.com/news/detail-814669.html

到了这里,关于Flutter——最详细(CustomScrollView)使用教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter——最详细(TextField)使用教程

    文本输入框,拥有复杂的属性。可指定控制器、文字样式、装饰线、行数限制、游标样式等。监听输入框变动事件。 搜索框,输入账号密码等 属性 作用 controller 输入框监听器 decoration 输入框装饰属性 textAlign 内容对齐方式 textAlignVertical 文本垂直对齐 textDirection 文字方向 ma

    2024年02月13日
    浏览(40)
  • Flutter——最详细(Map)使用教程

    键值对的集合,您可以使用其关联的键从中检索值。 普通的 HashMap 是无序的(不保证顺序), LinkedHashMap 按键插入顺序迭代,而像 SplayTreeMap 这样的排序映射按排序顺序迭代键。 1,添加元素 addEntries() 2,更新组元素 update() 3,更新所有元素的值 updateAll() 4,删除指定的元素

    2024年02月06日
    浏览(35)
  • Flutter——最详细(Scaffold)使用教程

    相当于界面的主体(类似于安卓最外层PhoneWindow),组件的展示都必须依附于它。 每一个界面都是脚手架,通过它来进行架构实现,优美的布局效果。 属性 作用 appBar 顶部的标题栏 body 显示整体布局 floatingActionButton 右下角按钮 floatingActionButtonLocation 按钮的位置 floatingActionB

    2024年02月06日
    浏览(37)
  • iOS开发 超详细Flutter开发环境搭建

    此文章针对针对移动开发者,关于Flutter环境搭建,仅供参考,也可参考官网https://flutter.dve/ 进入Flutter官网https://flutter.dve/  此网站为中国网站,无需翻墙即可进入 进入后,此处便为Flutter SDK下载地址了,根据自己的操作系统选择(本人为MacOS系统,下面以本人电脑为例操作)

    2023年04月17日
    浏览(43)
  • Flutter教程之 Flutter 开发者的终极 Hive 数据库管理工具

    作为 Flutter 开发人员,您知道 Hive 是一个功能强大、轻量级且易于使用的键值数据库,适用于您的 Flutter 应用程序。但是管理 Hive 数据库可能有点棘手,尤其是当您使用多个框和表时。这就是为什么我很高兴地宣布推出Flutter 的原因hive_ui,这是一个新的 Flutter 包,可以让您轻

    2024年02月09日
    浏览(50)
  • Flutter移动应用开发 - 01 Flutter初次安装、模拟器配置教程(手把手版)

    首先先安装一个编辑器,这边选用的是Android Studio(Android Studio)。Android Studio的下载和项目创建平平无奇,唯一可能有问题的就是gradle文件的下载,如果没翻墙的话需要手动下载和配置,在此不多介绍。 接下来文件的配置。 官网下载并解压Flutter SDK 版本列表 - Flutter 中文文档

    2023年04月25日
    浏览(50)
  • android开发教程视频孙老师,flutter中文网

    1.网络 2.Java 基础容器同步设计模式 3.Java 虚拟机内存结构GC类加载四种引用动态代理 4.Android 基础性能优化Framwork 5.Android 模块化热修复热更新打包混淆压缩 6.音视频FFmpeg播放器 网络协议模型 应用层 :负责处理特定的应用程序细节 HTTP、FTP、DNS 传输层 :为两台主机提供端到端

    2024年03月15日
    浏览(45)
  • Flutter Windows开发环境搭建教程与学习资料推荐

      Windows应用软件开发有很多框架可以选择,例如比较流行的Electron、Qt、CEF、WPF、WinForm、MFC、DuiLib、SOUI等等。Flutter是近几年流行的全平台应用开发框架,可以进行Android、IOS、Web、MacOS、Windows、Linux等平台的应用软件开发。   Flutter是谷歌推出的一种移动应用开发框架,使

    2024年02月05日
    浏览(69)
  • Mac电脑 Vscode : Flutter 开发环境搭建(最细节教程)

    参考链接: Mac+VSCode安装flutter环境_mac vscode配置flutter_GalenWu的博客-CSDN博客 mac搭建Flutter环境以及初始化项目 - 简书 注意: *下载xcode 就包含git了, *苹果芯片和intel 芯片需要的环境不同,苹果芯片需要安装: Important:  If you’re installing on an Apple Silicon Mac, you must have the Rosetta t

    2024年02月05日
    浏览(50)
  • flutter开发实战-webview插件flutter_inappwebview使用

    flutter开发实战-webview插件flutter_inappwebview使用 在开发过程中,经常遇到需要使用WebView,Webview需要调用原生的插件来实现。常见的flutter的webview插件是webview_flutter,flutter_inappwebview。之前整理了一下webview_flutter,查看https://blog.csdn.net/gloryFlow/article/details/131683122 这里我们使用fl

    2024年02月07日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包