Flutter 组件之 CustomScrollView

原创 已于 2023-02-16 11:50:45 修改 · 439 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter #前端 #android #ios

于 2023-02-15 18:51:35 首次发布
CustomScrollView是Flutter中用于创建自定义滚动体验的组件，它可以结合多个Sliver组件如SliverList和SliverGrid来构建。关键属性包括scrollDirection、physics（如BouncingScrollPhysics和NeverScrollableScrollPhysics）、以及slivers列表。使用CustomScrollView时，需注意内容要足够填充以实现滚动效果。

Flutter 组件之 CustomScrollView

1.简介

创建自定义滚动效果的组件，它可以组装很多Sliver组件

2.属性

  • scrollDirection：Axis.vertical滚动方向
  • reverse：是否倒序
  • controller：ScrollController滑动控制器
  • primary：当内容不足以滚动时，是否支持滚动 但是这里是不起作用的，因为CustomScrollView需要内容满了才能触发折叠效果，true 的话 controller 一定要为null
  • physics：ScrollPhysics 控制用户滚动视图的交互
    BouncingScrollPhysics：允许滚动超出边界，但之后内容会反弹回来。
    ClampingScrollPhysics： 防止滚动超出边界，夹住 。
    AlwaysScrollableScrollPhysics：始终响应用户的滚动。
    NeverScrollableScrollPhysics：不响应用户的滚动。
  • shrinkWrap：滑动方向上是否允许最大允许高度
  • anchor：零滚动偏移位置，会在滚动方向上进行整体位置偏移 0～1
  • slivers：Sliver组件
  • cacheExtent: 0.0 预加载的缓存区域
  • semanticChildCount：语义item数量,
  • scrollBehavior：
  • center：
  • dragStartBehavior：
  • keyboardDismissBehavior：
  • restorationId：
  • clipBehavior：

3.使用

需要配合其他Sliver组件使用

Flutter跨平台移动端开发丨SingleChildScrollView、ListView、GridView、CustomScrollView、ScrollController...
全栈工程师
05-24 1540
目录 SingleChildScrollView（可滑动 View） ListView（列表 View） GridView（网格 View） CustomScrollView（自定义滑动 View） ScrollController（控制器） SingleChildScrollView（可滑动 View） SingleChildScrollView 类似 Android 中的...
Flutter CustomScrollView使用介绍
qq_30005223的博客
01-27 2558
Flutter CustomScrollView支持自定义内部item的滚动控件，还支持头部带滑动缩放的SliverAppBar。需要注意如果CustomScrollView的item嵌套了和他滚动方向相同的控件这不能正常滑动，因为CustomScrollView内部只会维护一个Scrollable而会子控件会优先消费就会出现只有子控件能滚动的问题。如果有这种需求的场景建议使用NestedScrollView，可以自定义Sliver /// /// CustomScrollView 滚动 cl
Flutter之CustomScrollView
01-08
class CustomScrollViewWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: [ SliverAppBar( pinned: true, expandedHeight: 200.0, flexibleSpace: FlexibleSpac
flutter学习之CustomScrollView
热门推荐
隔壁小王的博客
11-22 1万+
CustomScrollView CustomScrollView是可以使用Sliver来自定义滚动模型（效果）的组件。它可以包含多种滚动模型。包括header，footer，以及类似Android Coordinglayout布局的滑动效果，CustomScrollView可以实现把多个彼此独立的可滑动widget组合起来 Sliver的概念 Flutter中提出一个Sliver（中文为“薄片”...
Flutter：列表5，包含多种滚动模型的情况，分页，水平列表，垂直列表
sunluyi的博客
12-17 641
的使用场景：当需要构建复杂的滚动布局时，如上图，有分页，爆款商品是。
Flutter 中的 CustomScrollView 小部件：全面指南
smileKH的博客
05-29 1549
Sliver。
Flutter组件CustomScrollView
Android_小菜菜的博客
06-09 578
CustomScrollView是可以使用Sliver来自定义滚动模型（效果）的组件。 可滚动组件的Sliver版 在Flutter中，Sliver通常指可滚动组件子元素，但在CustomScrollView中，需要粘起来的可滚动组件就是CustomScrollView的Sliver了 为了让可滚动组件能和CustomScrollView配合使用，Flutter提供了一些可滚动组件的Sliver版，如SliverList、SliverGrid等。 实际上Sliver版的可滚动组件和非Sliver版的可滚动组
21、 Flutter Widgets 之 粘合剂CustomScrollView滚动控件
wywinstonwy的专栏
01-05 4765
Flutter中常用的滑动布局 ScrollView 有 SingleChildScrollView、NestedScrollView、CustomScrollView。 SingleChildScrollView 用来处理简单可滑动的页面布局视图，如一般的数据详情页面，当内容足够多时，一屏显示不下时，就需要滑动处理。 NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景，如向上滑动视图时，要折叠隐藏一部分内容，这时候就需要使用到 NestedScrollView 与 Slive
干货 | Flutter控件CustomScrollView原理解析及应用实践
携程技术
07-15 4252
作者简介popeye，携程软件技术专家，关注移动端跨端技术，致力于快速，高性能地支撑业务开发。说起移动端跨平台解决方案，Flutter无疑是最近被谈到最多的话题。相对于React Nat...
Flutter：列表4，包含多种滚动模型的情况，需要在最外层包裹：CustomScrollView
sunluyi的博客
04-17 185
【代码】Flutter：列表4，包含多种滚动模型的情况，需要在最外层包裹：CustomScrollView。
Flutter CustomScrollView 自定义滚动效果
10-26
Flutter CustomScrollView 自定义滚动效果。
Flutter中的CustomScrollView详解及使用指南
爱喝水程序员的博客
05-22 2630
是一个支持自定义滚动效果的滚动视图。它通过结合多个Sliver组件来实现复杂的滚动效果。Sliver是一个可以自定义滚动模型的组件，例如SliverListSliverGrid等。允许我们创建非常复杂的滚动效果，例如不同的滚动速度、交错效果等。下面我们通过一个例子来实现一个带有自定义滚动速度的列表。
Flutter 之 CustomScrollView & Slivers
Dream It Possible
09-01 3603
上例中 PageView 之所以能正常工作，是因为 PageView 的 Scrollable 只处理水平方向的滑动，而 CustomScrollView 是处理垂直方向的，两者并未冲突，所以不会有问题，但是换一个也是垂直方向的 ListView 时则不能正常工作，最终的效果是，在ListView内滑动时只会对ListView 起作用，原因是滑动事件被 ListView 的 Scrollable 优先消费，CustomScrollView 的 Scrollable 便接收不到滑动事件了。...
Flutter 粘合剂CustomScrollView控件
老孟Flutter
05-06 1760
老孟导读：快乐的51假期结束了，切换为努力模式，今天给大家分享CustomScrollView组件，此组件在以后的项目中会经常用到，CustomScrollView就像一个粘合剂，将多个组件粘合在一起，具统一的滚动效果。 CustomScrollView CustomScrollView是使用Sliver组件创建自定义滚动效果的滚动组件。使用场景： ListView和GridView相互嵌...
Flutter 基于 CustomScrollView 实现可浮动交互的 AppBar
大灰狼的小绵羊哥哥的博客
06-12 1506
一、CustomScrollView 二、SliverAppBar 1、floating 属性 1） floating = ture 2）floating = false 2、pinned 属性 1）pinned = true 三、在 CustomScrollView 中使用 SliverAppBar 四、在 CustomScrollView 中使用 SliverList 五、最终效果: 五、完整代码 一、CustomScrollView Flutte.
Flutter——最详细(CustomScrollView)使用教程
人生在世
10-18 7038
创建一个 [ScrollView]，该视图使用薄片创建自定义滚动效果。[SliverList]，这是一个显示线性子项列表的银子列表。[SliverFixedExtentList]，这是一种更高效的薄片，它显示沿滚动轴具有相同范围的子级的线性列表。[SliverGrid]，这是一个显示子项 2D 数组的薄片。[SliverPadding]，这是一个在另一个薄片周围添加空白空间的薄片。[SliverAppBar]，这是一个显示标题的条形，该标题可以在滚动视图滚动时展开和浮动。
flutter CustomScrollView高性能滚动
油焖茄子 的博客
11-09 653
官话：Flutter中提出一个Sliver（中文为“薄片”的意思）概念，如果一个可滚动组件支持Sliver模型，那么该滚动可以将子组件分成好多个“薄片”（Sliver），只有当Sliver出现在视口中时才会去构建它，这种模型也称为“基于Sliver的延迟构建模型”。可滚动组件中有很多都支持基于Sliver的延迟构建模型，如ListView、GridView，CustomScrollView但是也有不支持该模型的，如SingleChildScrollView（性能很低，所有UI都会完整的绘制）。
flutter可以滚动控件之 CustomScrollView -重要
Leove的专栏
04-03 421
CustomScrollView( slivers: <Widget>[ const SliverAppBar( pinned: true, expandedHeight: 250.0, flexibleSpace: FlexibleSpaceBar( title: Text('Demo'), ), ), SliverGrid( gridDelegate: SliverGridDelegat.
flutter的CustomScrollView
最新发布
09-26
Flutter 中的 CustomScrollView 是一个用于将多个组件进行组合从而实现统一滑动效果的控件，使用时要求其中的组件必须是 Sliver 家族中的成员 [^1]。 ### 使用 CustomScrollView 主要通过其 `slivers` 参数接受一个 Sliver 数组，以此来组合多个组件实现统一滑动效果。例如，若要将多个 Sliver 组件组合在一起，可将这些 Sliver 组件添加到 `slivers` 数组中，从而实现统一的滑动效果 [^1][^2]。 ### 原理 Flutter 提供 CustomScrollView 组件是为了帮助开发者创建一个公共的 Scrollable 和 Viewport。若让开发者自己创建共用的 Scrollable 和 Viewport 对象，再将多个 ListView 对应的 Sliver 添加到共用的 Viewport 对象中，操作会比较麻烦。而使用 CustomScrollView 可以方便地实现期望的功能 [^2]。 ### 示例 以下是一个简单的 CustomScrollView 示例代码： ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('CustomScrollView Example'), ), body: CustomScrollView( slivers: <Widget>[ SliverAppBar( expandedHeight: 200.0, flexibleSpace: FlexibleSpaceBar( title: Text('Sliver App Bar'), ), ), SliverList( delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return ListTile( title: Text('Item $index'), ); }, childCount: 20, ), ), ], ), ), ); } } ``` 在这个示例中，`CustomScrollView` 包含了一个 `SliverAppBar` 和一个 `SliverList`，`SliverAppBar` 可以实现展开和收缩的效果，`SliverList` 则展示了一个列表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值