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，你可以靈活地創建復雜的滾動視圖，同時保持高效和流暢的用戶體驗。