Flutter CustomScrollView 的使用 及 常用的Sliver系列组件

组件"/>

Flutter CustomScrollView 的使用 及 常用的Sliver系列组件

文章目录

• • CustomScrollView简介
  • CustomScrollView 一"码"当先
  • Sliver的概念
  • SliverList和SliverGrid
  • • SliverChildListDelegate
    • SliverChildBuilderDelegate
    • SliverFixedExtentList
    • SliverGrid
    • • SliverGridDelegateWithFixedCrossAxisCount
      • SliverGridDelegateWithMaxCrossAxisExtent
    • SliverAnimatedList
    • SliverPersistentHeader
    • SliverAppBar

CustomScrollView简介

CustomScrollView是可以使用Sliver来自定义滚动模型（效果）的组件。它可以包含多种滚动模型。包括header，footer，CustomScrollView可以实现把多个彼此独立的可滑动widget组合起来。

CustomScrollView 一"码"当先

  Widget mCustomScrollView() {return CustomScrollView(slivers: [SliverAppBar(floating: true,title: Text('CustomScrollView Demo'),expandedHeight: 300,flexibleSpace: Imagework(",1869926726&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",fit: BoxFit.cover,),),SliverList(delegate: SliverChildListDelegate([Container(height: 80,color: Colors.primaries[0],),Container(height: 80,color: Colors.primaries[1],),Container(height: 80,color: Colors.primaries[2],),Container(height: 80,color: Colors.primaries[3],),Container(height: 80,color: Colors.primaries[4],),])),SliverAppBar(pinned: false,expandedHeight: 250.0,backgroundColor: Colors.blue,flexibleSpace: FlexibleSpaceBar(background: Imagework(",1869926726&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",fit: BoxFit.cover,),),),],