Flutter中的CustomScrollView详解及使用指南

import 'package:flutter/material.dart';
 
class CustomScrollViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        const SliverAppBar(
          pinned: true,
          expandedHeight: 250.0,
          title: Text('Custom Scroll View Example'),
        ),
        SliverGrid(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.teal[100 * (index % 9)],
                child: Text('Item $index'),
              );
            },
            childCount: 20,
          ),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
            childAspectRatio: 1.0,
          ),
        ),
        SliverFixedExtentList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.lightBlue[100 * (index % 9)],
                child: Text('Item $index'),
              );
            },
          ),
          itemExtent: 100.0,
        ),
      ],
    );
  }
}
 
void main() {
  runApp(MaterialApp(home: CustomScrollViewExample()));
}

这段代码创建了一个名为CustomScrollViewExample的无状态小部件，它使用CustomScrollView来展示一个带有固定高度的SliverAppBar，紧接着是一个SliverGrid网格列表和一个SliverFixedExtentList固定高度列表。这个例子展示了如何使用SliverChildBuilderDelegate来高效构建子widget，并且如何通过CustomScrollView来创建一个自定义滚动界面。