Flutter CustomScrollView

今天跟大家介绍一下CustomScrollView 可定义自动滚动的效果 CustomScrollView,这个用处还是比较大的,18年Google  推出flutter iOS 安卓 19 flutter支持web,看到这趋势,身为开发者要顺应潮流,但不要盲目, CustomScrollView 提供了基本控件如列表,网格,扩大头等。接下来介绍一下这几个控件SliverAppBarSliverListSliverGrid SliverPadding  SliverToBoxAdapter SliverPersistentHeader, SliverFillRemaining,SliverFillViewport

一,sliverAppBar

1.这个空间跟导航条很像看图


2基本用法


二 SliverList 

1这个是设置列表的,跟iOS tableview 很像

2.这个方法有一个代理,这个代理有两种方式

SliverChildListDelegate 这种方式前提是知道cell个数,比较少,好搭建

SliverChildBuilderDelegate 这种方式,可以根据数组去创建,不知道cell个数

3.图一是介绍SliverChildListDelegate    图二是介绍SliverChildBuilderDelegate


效果图

三 SliverGrid 这种跟瀑布流差不多

1.有两个代理,第一个是管理几行呢,第二个是管理有多少个,跟内容的

2效果图


四 SliverPadding 

1.这个控件就是设置padding的

2.子控件必须是sliver类型



五SliverToBoxAdapter

1.这个是设置普通的控件,例如区头等 这个位置是不固定的随意的,


六 SliverPersistentHeader

1.设置头部的,任意位置,比如头部搜索框 等,

2 floating 控制展开的,pinned控制隐藏和展示的

3.重写delegate 代码如下


4效果图

七,SliverFillRemaining

1.这个一般负责最厚填充用的


八,SliverFillViewport

1.如果一个滑动列表,每个item需要占满一个屏幕或者更大,可以使用该部件生成列表,但是如果item的高度小于一个屏幕高度,那就不太推荐了,在首尾会用空白item来把未填满的补上,就是首尾都会留空白。我们使用SliverFillViewport对SliverFillRemaning进行替换

2 代码

SliverFillViewport(

viewportFraction:1.0,

    delegate:SliverChildBuilderDelegate(

(_, index) =>Container(child:Text('Item $index'), alignment: Alignment.center, color:Colors.indigoAccent),

        childCount:10)),

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。