CustomScrollView 是 Flutter 中一種靈活的滾動(dòng)視圖，它允許你組合多種不同類型的滾動(dòng)效果，通常用于創(chuàng)建復(fù)雜的滾動(dòng)布局。通過 CustomScrollView，你可以將多個(gè) Sliver 組件組合在一起，這些組件可以是 SliverAppBar、SliverList、SliverGrid 等。每個(gè) Sliver 都是一個(gè)可以在滾動(dòng)視圖中逐步顯示的部分。

下面是 CustomScrollView 的基本用法及幾個(gè)示例，展示如何使用不同的 Sliver 組件來實(shí)現(xiàn)各種滾動(dòng)效果：

基本用法

CustomScrollView 需要一個(gè) slivers 列表，其中包含多個(gè) Sliver 組件。每個(gè) Sliver 組件表示一個(gè)可以滑動(dòng)的區(qū)域。

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:

   • 用于創(chuàng)建一個(gè)可以在滾動(dòng)時(shí)伸縮的應(yīng)用欄。支持浮動(dòng)、固定和擴(kuò)展等多種效果。

2. SliverList:

   • 用于創(chuàng)建一個(gè)垂直滾動(dòng)的列表。SliverChildBuilderDelegate 允許惰性構(gòu)建列表項(xiàng)，這對性能非常有益。

3. SliverGrid:

   • 用于創(chuàng)建一個(gè)網(wǎng)格布局。通過 SliverGridDelegate（如 SliverGridDelegateWithFixedCrossAxisCount 或 SliverGridDelegateWithMaxCrossAxisExtent）控制網(wǎng)格的排列方式。

4. SliverToBoxAdapter:

   • 用于插入普通的Widget（如ListView）到CustomScrollView中。這允許你在垂直滾動(dòng)的CustomScrollView中嵌入橫向滾動(dòng)的內(nèi)容。

高級用法

1. 使用 SliverFillRemaining:

   • SliverFillRemaining 可以讓其子組件填充剩余的空間。它適用于需要占據(jù)剩余空間的布局。

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

2. 自定義 Sliver:

   • 你可以通過繼承 SliverChildDelegate 或 SliverGridDelegate 自定義自己的 Sliver 組件，以滿足特殊的布局需求。

通過 CustomScrollView，你可以靈活地創(chuàng)建復(fù)雜的滾動(dòng)視圖，同時(shí)保持高效和流暢的用戶體驗(yàn)。