Flutter CustomScrollView

作者: songzhaojie | 来源:发表于2019-05-09 12:06 被阅读212次

    今天跟大家介绍一下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)),

    相关文章

      网友评论

        本文标题:Flutter CustomScrollView

        本文链接:https://www.haomeiwen.com/subject/hvtwoqtx.html