首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter 粘合剂CustomScrollView控件

老孟导读:快乐51假期结束了,切换为努力模式,今天给大家分享CustomScrollView组件,此组件在以后项目中会经常用到,CustomScrollView就像一个粘合剂,将多个组件粘合在一起,...CustomScrollView CustomScrollView使用Sliver组件创建自定义滚动效果滚动组件,使用场景: ListView和GridView相互嵌套场景,ListView嵌套GridView...CustomScrollView就像一个粘合剂,将多个组件粘合在一起,具统一滚动效果。...primary设置为true时,不能设置controller,因为primarytrue时,controller使用PrimaryScrollController,这种机制带来好处是父组件可以控制子树滚动组件滚动行为...,例如,Scaffold正是使用这种机制在iOS实现了点击导航栏回到顶部功能。

1.9K20

Flutter入门指北(Part 8)之Sliver 组件及NestedScrollView

因为在 CustomScrollView 只允许传入 Sliver 部件,那么类似 Container 等普通部件就不可以使用了,那么这样就需要更多 Sliver 组件才能完成视图,所以为了方便,直接通过...SliverPadding 那么在 CustomScrollView 中部件之间如何设置间距呢,可能你会想到用 SliverToBoxAdapter 包裹一个 Padding 来处理,当然没问题。...SliverPersistentHeader Flutter ,为我们提供了这么一个作为头部部件 SliverPersistentHeader,这个部件可以根据滚动距离缩小高度,有点类似 SliverAppBar...糟透了翻译 X 2:最常用情况,就是在其 headerSliverBuilder 中使用携带 TabBar SliverAppBar(就是使用 SliverAppBar bottom 属性添加...SliverAppbar 阴影,主要用来提醒内部内容低于 SliverAppBar (相当于给人一种物理层次感,否则很容易被认为,头部和内容是连接在一起) 接下来看下 NestedScrollView

2K30
您找到你想要的搜索结果了吗?
是的
没有找到

Flutter | Slivers 系列

概述 CustomScrollView:一个滚动容器,改组件不接受任何 child,但是你可以直接提供 Slivers 已创建各种滚动效果,例如页面中有多个滑动列表,如 Appbar, 列表,网格...CustomScrollView 。...SliverFixedExtentList 面的子元素宽高是动态,需要手动设置高度,并且这种也不利于性能,所以我们可以使用 SliverFixedExtentList 来控制限制子元素大小: SliverFixedExtentList...在 slivers 系列SliverAppbar 可以说是使用频率比较高组件了,SliverAppbar 为应用栏提供了自定义滚动行为,下面我们来看一下 class _MyHomePageState...hasScrollBody: false, child: Center( child: CircularProgressIndicator(), ), ) 复制代码 hasScrollBody :当前组件是否有滚动组件

1.4K11

flutter系列之:使用SliverList和SliverGird

简介 在上一篇文章我们讲解SliverAppBar时候有提到过,Sliver组件一般都用在CustomScrollView。...要注意是SliverList并不能指定子widgetextent大小,如果你想指定List子widgetextent大小的话,那么可以使用SliverFixedExtentList: class...SliverList和SliverGird使用 有了上面介绍SliverList和SliverGird构造函数,接下来我们具体来看下如何在项目中使用SliverList和SliverGird。...默认情况下SliverList和SliverGird是需要和CustomScrollView一起使用,所以我们先创建一个CustomScrollView,在它slivers属性,放入一个SliverAppBar...总结 在CustomScrollView使用SliverList和SliverGird,可以实现灵活呈现效果。

82330

flutter系列之:使用SliverList和SliverGird

简介 在上一篇文章我们讲解SliverAppBar时候有提到过,Sliver组件一般都用在CustomScrollView。...要注意是SliverList并不能指定子widgetextent大小,如果你想指定List子widgetextent大小的话,那么可以使用SliverFixedExtentList: class...SliverList和SliverGird使用 有了上面介绍SliverList和SliverGird构造函数,接下来我们具体来看下如何在项目中使用SliverList和SliverGird。...默认情况下SliverList和SliverGird是需要和CustomScrollView一起使用,所以我们先创建一个CustomScrollView,在它slivers属性,放入一个SliverAppBar...总结 在CustomScrollView使用SliverList和SliverGird,可以实现灵活呈现效果。

49610

Flutter | 滚动组件,ListView,GridVIew等

包,它实现了一个交错 GridView 布局模型,自行了解一下 CustomScrollView CustomScrollView 是可以使用 Sliver 来自定义滚动模型组件,他可以包含多种滚动模型...,这个时候就可以使用 CustomScrollView,他相当于一个胶水,将这些彼此独立滚动组件粘起来。...但是在 Custom ,需要粘起来滚动组件就是 CustomScrollView Sliver 了,如果将 ListView 或者 GridView 作为 CustomScrollView...,SliverAppBar 等是和滚动组件无关,他们主要是为了配合 CustomScrollView 一起使用,这是因为 CustomScrollView 子组件都必须是 sliver 思考...:SliverAppBar 对应 AppBar,两者不同之处在于 SliverAppBar 可以集成CustomScrollView SliverAppBar 可以结合 FlexibleSpaceBar

8.4K20

UITableView在Flutter是什么?

CustomScrollView,这些彼此独立滚动Widget被称为Sliver。...接下来,我通过一个滚动视差例子,你演示CustomScrollView使用方法。 视差滚动是指让多层背景以不同速度移动,在形成立体滚动效果同时,还能保证良好视觉体验。...对于前两个问题,我们可以使用ScrollController进行滚动信息监听,以及相应滚动控制;而最后一个问题,则需要接收ScrollNotification通知进行滚动事件获取。...介绍完了如何通过ScrollController来监听ListView滚动信息,以及怎样进行滚动控制之后,接下来我们再来看看如何获取ScrollNotification通知,从而感知ListView各类滚动事件...总结 在处理展示一组连续、滚动视图元素场景,Flutter提供了比原生Android、iOS系统更为强大列表组件ListViewCustomScrollView

5.5K10

Flutter滑动组件

3.1 滚动组件剖析 Flutter 滚动主要由三个角色组成:Scrollable、Viewport 和 Sliver: Scrollable :用于处理滑动手势,确定滑动偏移,滑动偏移变化时构建...3.2 Flutter 中常用 Sliver Sliver名称 功能 对应滚动组件 SliverList 列表 ListView SliverFixedExtentList 高度固定列表 指定itemExtent...上面提及部分组件是和滚动组件无关,它们主要是为了结合CustomScrollView一起使用,这是因为CustomScrollView子组件必须都是Sliver。...这里使用官方示例程序,将SliverAppBar+SliverGrid+SliverFixedExtentList做出如下界面: class HomeContent extends StatelessWidget...DefaultTabController是一个Widget组件,后面示例可以看到如何对其进行使用。 5.2 TabBar介绍 源码分析: const TabBar({ Key?

7.1K30

Flutter开发-滚动组件

CustomScrollView CustomScrollView是可以使用Sliver来自定义滚动模型(效果)组件。...如果使用GridView+ListView来实现的话,就不能保证一致滑动效果,因为它们滚动效果是分离,所以这时就需要一个”胶水”,把这些彼此独立滚动组件”粘”起来,而CustomScrollView...滚动组件Sliver版 但是在CustomScrollView,需要粘起来滚动组件就是CustomScrollViewSliver了,如果直接将ListView、GridView作为CustomScrollView...因此,为了能让滚动组件能和CustomScrollView配合使用,Flutter提供了一些滚动组件Sliver版,如SliverList、SliverGrid等。...”粘”在一起,这些Sliver共用CustomScrollViewScrollable,所以最终才实现了统一滑动效果。

4.4K20

flutter系列之:UI layout简介

简介对于一个前端框架来说,除了各个组件之外,最重要就是将这些组件进行连接布局了。布局英文名叫做layout,就是用来描述如何将组件进行摆放一个约束。...ListBody — 根据给定axis来布局child。ListView — 滚动列表。Row — 表示一行child。Stack — 栈式布局组件。Table — 表格形式组件。...CustomScrollView — 可以自定义scroll效果ScrollView。SliverAppBar — material风格app bar,其中包含了CustomScrollView。...SliverChildListDelegate — 使用list来为livers提供child委托。SliverFixedExtentList — 固定axis extentsliver。...要注意是,Flex是不可滚动,如果Flexchild太多,超出了Flex可用空间,那么Flex将会报错,所以如果你需要展示很多child情况下,可以考虑使用滚动组件,比如ListView

88010

Flutter 首页必用组件NestedScrollView

今天介绍组件是NestedScrollView,大部分App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图组件,其滚动位置是固有链接。...在普通ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...内部任何列表都不会相互作用 外部ScrollView。...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...(20.0); CustomScrollView( controller: _scrollController, ... ) physics表示滚动组件物理滚动特性,系统提供ScrollPhysics

4K10

《Flutter》-- 6.高级组件

参阅书籍: 《Flutter跨平台开发入门实践》-- 向治洪(著) 6. 高级组件 6.1 滚动组件 对于列表和长布局显示溢出问题,可以使用Flutter提供滚动组件来处理。...6.1.1 Scrollable组件 在Flutter,一个滚动组件直接或间接包含一个Scrollable组件,它是滚动组件基础组件。...在实际使用过程,Flutter提供了SliverList、SliverGrid等滚动组件Sliver版本。...= true,//是否保持滚动位置 this.debugLabel, }) 当keepScrollOffset属性值为true时,滚动组件滚动位置会被存储到PageStorage,当可滚动组件重新创建时可以使用...分层渲染可以降低视图渲染带来性能开销。 无论是创建组合组件还是创建自绘组件,首先需要考虑如何将复杂布局简化,把大问题拆分成若干小问题。

10.5K20
领券