Flutter 粘合剂CustomScrollView控件

移动开发作者： 2024-08-25 00:05:01

老孟导读：快乐的51假期结束了，切换为努力模式，今天给大家分享CustomScrollView组件，此组件在以后的项目中会经常用到，CustomScrollView就像一个粘合剂，将多个组件粘合在一起

CustomScrollView

ListView和GridView相互嵌套场景，ListView嵌套GridView时，需要给GridView指定高度，但我们希望高度随内容而变化（不指定），ListView和GridView使用同一个滚动效果。
一个页面顶部是AppBar，然后是GridView，最后是ListView，这3个区域以整体来滚动，AppBar具有吸顶效果。

CustomScrollView(
  slivers: <Widget>[
    SliverGrid.count(crossAxisCount: 4,children: List.generate(8,(index){
      return Container(
        color: Colors.primaries[index%Colors.primaries.length],alignment: Alignment.center,child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),);
    }).toList(),SliverList(
      delegate: SliverChildBuilderDelegate((content,index) {
        return Container(
          height: 85,color: Colors.primaries[index % Colors.primaries.length],);
      },childCount: 25),)
  ],)

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      pinned: true,expandedHeight: 230.0,flexibleSpace: FlexibleSpaceBar(
        title: Text('复仇者联盟'),background: Image.network(
          'http://img.haote.com/upload/20180918/2018091815372344164.jpg',fit: BoxFit.fitHeight,SliverGrid.count(crossAxisCount: 4,)

CustomScrollView(
  scrollDirection: Axis.horizontal,reverse: true,...
)

_scrollController = ScrollController();

//监听滚动位置
    _scrollController.addListener((){
      print('${_scrollController.position}');
    });
    //滚动到指定位置
    _scrollController.animateTo(20.0);

CustomScrollView(
	controller: _scrollController,...
)