Flutter中CustomScrollView使用

CustomScrollView 是 Flutter 中一种灵活的滚动视图，它允许你组合多种不同类型的滚动效果，通常用于创建复杂的滚动布局。通过 CustomScrollView，你可以将多个 Sliver 组件组合在一起，这些组件可以是 SliverAppBar、SliverList、SliverGrid 等。每个 Sliver 都是一个可以在滚动视图中逐步显示的部分。

下面是 CustomScrollView 的基本用法及几个示例，展示如何使用不同的 Sliver 组件来实现各种滚动效果：

基本用法

CustomScrollView 需要一个 slivers 列表，其中包含多个 Sliver 组件。每个 Sliver 组件表示一个可以滑动的区域。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('CustomScrollView Example')),
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              title: Text('SliverAppBar'),
              floating: true,
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.network(
                  'https://example.com/image.jpg',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item #$index'),
                  );
                },
                childCount: 50,
              ),
            ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, // Number of columns in the grid
                childAspectRatio: 1.0, // Aspect ratio of each grid item
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    color: Colors.teal[(index % 9 + 1) * 100],
                    child: Center(child: Text('Grid Item #$index')),
                  );
                },
                childCount: 20,
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                color: Colors.blue,
                height: 300,
              )
            ),
          ],
        ),
      ),
    );
  }
}

主要组件

1. SliverAppBar:

   • 用于创建一个可以在滚动时伸缩的应用栏。支持浮动、固定和扩展等多种效果。

2. SliverList:

   • 用于创建一个垂直滚动的列表。SliverChildBuilderDelegate 允许惰性构建列表项，这对性能非常有益。

3. SliverGrid:

   • 用于创建一个网格布局。通过 SliverGridDelegate（如 SliverGridDelegateWithFixedCrossAxisCount 或 SliverGridDelegateWithMaxCrossAxisExtent）控制网格的排列方式。

4. SliverToBoxAdapter:

   • 用于插入普通的Widget（如ListView）到CustomScrollView中。这允许你在垂直滚动的CustomScrollView中嵌入横向滚动的内容。

高级用法

1. 使用 SliverFillRemaining:

   • SliverFillRemaining 可以让其子组件填充剩余的空间。它适用于需要占据剩余空间的布局。

   SliverFillRemaining(
     child: Center(
       child: Text('This fills the remaining space'),
     ),
   ),
   

2. 自定义 Sliver:

   • 你可以通过继承 SliverChildDelegate 或 SliverGridDelegate 自定义自己的 Sliver 组件，以满足特殊的布局需求。

通过 CustomScrollView，你可以灵活地创建复杂的滚动视图，同时保持高效和流畅的用户体验。