Flutter 滚动布局：sliver模型

在Flutter中，CustomScrollView和Sliver是实现自定义滚动布局的关键。以下是一个使用Sliver模型的例子，其中包含了SliverList和SliverGrid。

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Sliver Layout Example'),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate([
              ListTile(title: Text('Item 1')),
              ListTile(title: Text('Item 2')),
              ListTile(title: Text('Item 3')),
              // ...
            ]),
          ),
          SliverGrid(
            delegate: SliverChildListDelegate([
              Container(
                alignment: Alignment.center,
                color: Colors.teal[100 * (1 + index % 9)],
                child: Text('Grid Item ${index + 1}'),
              ),
            ]),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 1.0,
            ),
          ),
        ],
      ),
    );
  }
}

这段代码创建了一个CustomScrollView，它包含了一个SliverAppBar，一个固定高度的SliverList，以及一个带有固定数量列的SliverGrid。这个例子展示了如何使用Sliver来构建复杂的滚动布局。