Flutter Sliver家族（二）SliverPadding、SliverToBoxAdapter、SliverFillRemaining

本期介绍Sliver家族的其他Widget

1. SliverPadding

SliverPadding是一个Sliver组件，用于在子组件周围添加填充。它非常类似于Padding组件，但它是在滚动视图中使用的。您可以通过设置padding属性来控制添加的填充量，并将SliverPadding作为子组件包装在SliverList或SliverGrid中。这可以用于在子元素之间添加间距或在内容周围创建边框。

import 'package:flutter/material.dart';

class MySliverPaddingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverPadding(
            padding: EdgeInsets.all(16.0),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    height: 50,
                    color: Colors.blue[100 * (index % 9 + 1)],
                  );
                },
                childCount: 20,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在此示例中，使用SliverPadding将SliverList的子元素与四个边缘的填充分隔开。还使用SliverChildBuilderDelegate来生成一个包含20个颜色方块的滚动列表。

1. SliverToBoxAdapter

SliverToBoxAdapter是一个将普通Box组件转换为Sliver组件的实用工具。如果您想在Sliver视图中添加非Sliver组件，则可以使用SliverToBoxAdapter将其包装在一个Sliver中。这对于在Sliver列表或网格中添加标题、分隔符或其他非滚动组件非常有用。

import 'package:flutter/material.dart';

class MySliverToBoxAdapterDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: Text('My App Bar'),
            floating: true,
          ),
          SliverToBoxAdapter(
            child: Container(
              height: 150,
              color: Colors.yellow,
              child: Center(
                child: Text(
                  'This is a non-scrollable widget.',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  height: 50,
                  color: Colors.blue[100 * (index % 9 + 1)],
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

在此示例中，使用SliverToBoxAdapter在滚动视图中添加了一个非滚动的黄色容器。还使用SliverAppBar和SliverList添加了其他可滚动组件。

1. SliverFillRemaining

SliverFillRemaining是一个可以填充剩余滚动空间的组件。当您有一个可滚动的视图，但其子元素的总高度不足以填满视图时，您可以使用SliverFillRemaining来填充剩余的空间。这对于在滚动视图中添加底部导航栏或页脚非常有用。

import 'package:flutter/material.dart';

class MySliverFillRemainingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: Text('My App Bar'),
            floating: true,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  height: 50,
                  color: Colors.blue[100 * (index % 9 + 1)],
                );
              },
              childCount: 10,
            ),
          ),
          SliverFillRemaining(
            hasScrollBody: false,
            child: Container(
              color: Colors.green,
              child: Center(
                child: Text(
                  'This is a non-scrollable widget that fills the remaining space.',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在此示例中，使用SliverFillRemaining在滚动视图中添加了一个非滚动的绿色容器，它会填充剩余的滚动空间

1. SliverFillViewport

SliverFillViewport是一个可以填充整个可滚动视图的组件。与SliverFillRemaining不同的是，SliverFillViewport将子组件拉伸以填充整个可滚动区域，而不是只填充剩余的空间。这可以用于创建具有动态高度的自定义滚动视图，例如带有动画的背景或可扩展的抽屉式菜单。

import 'package:flutter/material.dart';

class MySliverFillViewportDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverFillViewport(
            viewportFraction: 0.6,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  height: 50,
                  color: Colors.blue[100 * (index % 9 + 1)],
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

在此示例中，使用SliverFillViewport创建了一个视口，该视口填充整个可用空间，并按比例显示其中的项目。使用了60％的视口比例，并使用SliverChildBuilderDelegate生成了20个颜色方块。

1. SliverPersistentHeader

SliverPersistentHeader是一个可以在滚动过程中保持固定的头部组件。它可以在SliverAppBar中使用，也可以单独使用。您可以设置它的最小高度和最大高度，使它在滚动过程中动态地调整其高度。这对于创建具有固定头部的滚动视图非常有用，例如带有可折叠的卡片或列表的滚动视图。

import 'package:flutter/material.dart';

class MySliverPersistentHeaderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: Text('My App Bar'),
            floating: true,
          ),
          SliverPersistentHeader(
            delegate: MyHeaderDelegate(),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  height: 50,
                  color: Colors.blue[100 * (index % 9 + 1)],
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

class MyHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  double get minExtent => 100.0;

  @override
  double get maxExtent => 200.0;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.yellow,
      child: Center(
        child: Text(
          'This is a persistent header.',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

在此示例中，使用SliverPersistentHeader创建了一个头部，它始终可见，并且在滚动时始终保留在屏幕上方。创建了一个MyHeaderDelegate类，该类实现了SliverPersistentHeaderDelegate，并使用Container和Text小部件构建了一个黄色的标题容器。还在滚动视图中添加了SliverAppBar和SliverList。