Flutter Sliver

139 阅读2分钟
body: Container(
  color: Colors.orange,
  child: CustomScrollView(
    slivers: [
      //将普通的widget放在sliver列表中
      SliverToBoxAdapter(
          //child不是必选的。可以什么都不写。相当于一个SizeBox
        child: FlutterLogo(size: 200,),
      )
    ],
  ),
),
//  放一个固定高度的子组件的SLiver,固定大小之后可以提升性能
  SliverFixedExtentList(delegate: SliverChildListDelegate(
    [
      Container(width: 100,height: 200,color: Colors.red,),
      const SizedBox(),
      Container(width: 100,height: 150,color: Colors.red,),
      const SizedBox(),
      Container(width: 100,height: 300,color: Colors.red,),
    ]
  ), itemExtent: 100),
//prototypeItem会传入一个原型。也就是一个例子。SliverPrototypeExtentList会根据例子来绘制高度。
SliverPrototypeExtentList(
    delegate: SliverChildListDelegate(
        List.generate(100, (index) => Text("data"))),
    prototypeItem: Text("fkah\njkh"))
//  填满整个视窗
  SliverFillViewport(delegate: SliverChildListDelegate(List.generate(3, (index) => Container(
    color: Colors.primaries[index % 18],
  )))),
//默认情况下跟随列表滚动
SliverAppBar(
  title: Text("SliverAppbar"),
  //pinned: true,//一直出现。
  floating: true,//稍微的往下拉,AppBar就会一直出现
  snap: true,
),
floating: true,//稍微的往下拉,AppBar就会一直出现
snap: true,//这两个组合在下拉松开手后appbar就会完全出现。
//可变高度的appbar
expandedHeight: 300,
flexibleSpace: FlexibleSpaceBar(
  background: FlutterLogo(),
  title: Text("FlexibleSpaceBar title"),
),
stretch: true,//允许往下拉
flexibleSpace: FlexibleSpaceBar(
  background: FlutterLogo(),
  title: Text("FlexibleSpaceBar title"),
  //下拉的时候,背景的效果
  stretchModes: [
    StretchMode.blurBackground,//模糊背景
    StretchMode.zoomBackground,//缩放背景
    StretchMode.fadeTitle//渐变
  ],
),
collapseMode: CollapseMode.parallax,//默认的上拉的时候模式

//会占据CustomScrollView在当前屏幕的剩余部分。
SliverFillRemaining(
  child: Placeholder(),
)
simulator_screenshot_612E7B00-B503-4EF2-93EA-C0A83AB23672.png
SliverLayoutBuilder(builder: (BuildContext context, SliverConstraints constraints) {
  print(constraints);
  return SliverToBoxAdapter();
},),
flutter: SliverConstraints(
//sliver正确的滚动方向,向左或者向下
AxisDirection.down, 
//下一个组件放在那个方向
GrowthDirection.forward, 
//现在滚动的状态
ScrollDirection.idle, 
//当前的组件没有移出屏幕的话就是0, 移出屏幕的话就会显示距离屏幕的距离
scrollOffset: 0.0, 
//还剩下有多少空间给你画。
remainingPaintExtent: 573.0, 
//交错轴的方向上有
crossAxisExtent: 430.0, 
crossAxisDirection: AxisDirection.right, 
viewportMainAxisExtent: 932.0, 
//缓存的内容
remainingCacheExtent: 823.0, cacheOrigin: 0.0)
//添加一个空白的sliver可以让第一个header跟随列表下拉
SliverToBoxAdapter(child: Container(),),
SliverPersistentHeader(delegate: MyDelegate(color: Colors.blue, title: "header1"),pinned: true,/*固定的意思**/floating: true,/*漂浮的意思**/),

SliverList(delegate: SliverChildListDelegate(
    List.generate(20, (index) => Container(color: Colors.primaries[Random().nextInt(17)],height: 30,))
)),


SliverPersistentHeader(delegate: MyDelegate(color: Colors.white, title: "falkjdkfjakljdskfjla"),pinned: true,floating: false,),

SliverList(delegate: SliverChildListDelegate(
    List.generate(20, (index) => Container(color: Colors.primaries[Random().nextInt(17)],height: 30,))
)),
SliverPersistentHeader(delegate: MyDelegate(color: Colors.blue[100]!, title: "aaldjfklajksldkl"),pinned: false,floating: false,),

SliverList(delegate: SliverChildListDelegate(
    List.generate(20, (index) => Container(color: Colors.primaries[Random().nextInt(17)],height: 30,))
)),
SliverPersistentHeader(delegate: MyDelegate(color: Colors.pink, title: "alkdjfkljaksdjlkfkljkl"),pinned: false,floating: false,),

SliverList(delegate: SliverChildListDelegate(
    List.generate(20, (index) => Container(color: Colors.primaries[Random().nextInt(17)],height: 30,))
)),
simulator_screenshot_34F67949-6F1D-42EF-88A5-F2D5972C326A.png