flutter应用开发--sliver组件的子类:列表类SliverList,网格类SliverGrid,头部类SliverAppBar,占位和分隔类SliverPadding

在 Flutter 里，Sliver 是用于构建可滚动布局的基础抽象类，它有许多实用的子类，这些子类各自具备不同的功能和用途，以下为你详细介绍常见的 Sliver 子类：

1. 列表类

SliverList

SliverList 用于创建一个可滚动的列表布局，它能够以列表形式展示多个子组件。可通过 SliverChildBuilderDelegate 或者 SliverChildListDelegate 来提供子组件。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    ),
  ));
}

SliverFixedExtentList

SliverFixedExtentList 同样用于创建列表布局，不过其每个子组件的主轴尺寸（垂直列表时为高度，水平列表时为宽度）是固定的。这一特性使得布局计算更为高效。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverFixedExtentList(
            itemExtent: 50,
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    ),
  ));
}

2. 网格类

SliverGrid

SliverGrid 用于创建网格布局，可借助 SliverGridDelegate 来定义网格的布局规则，例如列数、子组件的宽高比等。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
            ),
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return Container(
                  color: Colors.blue,
                  child: Center(
                    child: Text('Item $index'),
                  ),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    ),
  ));
}

3. 头部类

SliverAppBar

SliverAppBar 是一种特殊的应用栏，能够与滚动视图协同工作，实现诸如伸缩、浮动等动画效果。常用于 CustomScrollView 的头部。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: Text('SliverAppBar Example'),
            floating: true,
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network(
                'https://example.com/image.jpg',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    ),
  ));
}

4. 占位与分隔类

SliverPadding

SliverPadding 用于给其他 Sliver 组件添加内边距，就像 Padding 组件对普通 Widget 的作用一样。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverPadding(
            padding: EdgeInsets.all(16),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ),
        ],
      ),
    ),
  ));
}

SliverToBoxAdapter

SliverToBoxAdapter 可将普通的 Widget 转换为 Sliver，以便在 CustomScrollView 中使用。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Container(
              height: 100,
              color: Colors.red,
              child: Center(
                child: Text('Box Widget'),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    ),
  ));
}

这些 Sliver 子类为开发者提供了丰富的选择，能够满足各种复杂的滚动布局需求。