flutter CustomScrollView 相关记录

我理解为CustomScrollView是一个将各种滚动排版结合在一起的一个widget 像是粘合剂

slivers下有多种widget 

一些常用的有

    SliverList 

    SliverFixedExtentList 

    SliverGrid 

    SliverPadding  

    SliverAppBar 

    SliverToBoxAdapter 

    SliverFillRemaining 

    SliverSafeArea

还有一些不常用的 

    SliverLayoutBuilder(可控制组件上下滑动时不同的变化) 

    SliverFillViewport(可是组件占满整个屏幕)  

    SliverOpacity(组件透明化)  

    SliverPersistentHeader(向下滑动到头时出现此组件 类似于某宝的二楼效果)  

    SliverAnimatedList(动画)  

 

简单记录一下常用的组件用法

 

SliverFixedExtentList  SliverPrototypeExtentList SliverList 三个类似 都类似于listview

SliverList 为最基础的列表 需要自己去定义高度

SliverList(
 delegate: SliverChildBuilderDelegate(
  (BuildContext context, int index) {
   return new Container(
     height: 50.0,
     alignment: Alignment.center,
     color: Colors.lightBlue[100 * (index % 9)],
     child: new Text('list11 item $index'),
   );
  },
  childCount: 5
 ),
)

SliverFixedExtentList  需要参数itemExtent提前设置好高度

SliverFixedExtentList(
 itemExtent: 50.0,
 delegate: new SliverChildBuilderDelegate(
  (BuildContext context, int index) {
    return new Container(
     //height: 30.0,  无效参数
     alignment: Alignment.center,
     color: Colors.lightBlue[100 * (index % 9)],
     child: new Text('list item $index'),
    );
   },
  childCount: 5 
 ),
)

SliverPrototypeExtentList 提前设置好一套模板 循环出的子集全是这种模板样式

SliverPrototypeExtentList(
  prototypeItem: Container(
    height: 30.0,
    child: Text('123'),
  ),
  delegate: SliverChildBuilderDelegate((content, index) {
   return Container(
    //height: 30.0, 无效参数
    child: Text('${index}'),
    color: Colors.primaries[index % Colors.primaries.length],
   );
  }, childCount: 5),
)

SliverGrid 类似于gridview

SliverGrid( 
 gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2, //Grid按两列显示
  mainAxisSpacing: 10.0,
  crossAxisSpacing: 10.0,
  childAspectRatio: 4.0,
 ),
 delegate: new SliverChildBuilderDelegate(
   (BuildContext context, int index) {
     return new Container(
     alignment: Alignment.center,
     color: Colors.cyan[100 * (index % 9)],
     child: new Text('grid item $index'),
   );
  },
  childCount: 20,
 ),
),

SliverPadding 类似于padding的使用 有padding sliver属性

SliverAppBar 可以做顶部吸顶图 另一篇文章说过吸顶效果  https://blog.csdn.net/weixin_43223804/article/details/113180095

SliverToBoxAdapter 用于将非sliver系列组件放置在其中 包裹住使用即可

SliverToBoxAdapter(
 child: Container(
   height: 100,
   color: Colors.black,
 ),
)

SliverFillRemaining 用于将当前第一屏没用完的区域占满 一般放在最后一个位置

SliverFillRemaining(
 hasScrollBody: false,
 child: Container(
  color: Colors.blue[100],
  child: Icon(
   Icons.sentiment_very_satisfied,
   size: 75,
   color: Colors.blue[900],
  ),
 ),
)

SliverSafeArea 类似于 SafeArea 将顶部刘海或者底部返回键空出来 不让内容覆盖上去

SliverSafeArea(
      sliver: SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, crossAxisSpacing: 5, mainAxisSpacing: 3),
        delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
          return Container(
            color: Colors.primaries[index % Colors.primaries.length],
          );
        }, childCount: 20),
      ),
)