Flutter自定义Sliver填充剩余空间插件sliver_overfill_remaining的使用

Flutter自定义Sliver填充剩余空间插件sliver_overfill_remaining的使用

简介

sliver_overfill_remaining 是一个 Flutter 插件，用于创建一个始终填充视口剩余空间的 Sliver，并且可以指定额外的高度。它类似于 SliverFillRemaining，但允许添加额外的高度。

此插件非常方便，例如当你有一个可扩展的 SliverAppBar 时，你可以让其下方的内容始终足够高，以便 SliverAppBar 能够完全展开或折叠（具体用法请参考示例）。

使用方法

以下是一个完整的示例代码，展示如何使用 sliver_overfill_remaining 插件来实现这一功能。

示例代码

import 'package:flutter/material.dart';
import 'package:sliver_overfill_remaining/sliver_overfill_remaining.dart';

// 定义 SliverAppBar 的高度参数
const sliverAppBarExpandedHeight = 300.0; // 扩展高度
const sliverAppBarToolbarHeight = kToolbarHeight; // 工具栏高度
const sliverAppBarTabBarHeight = 50.0; // TabBar 高度
double get sliverAppBarFlexDelta =>
    sliverAppBarExpandedHeight -
    sliverAppBarToolbarHeight -
    sliverAppBarTabBarHeight; // 计算额外高度

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: CustomScrollView(
        slivers: [
          const _SliverAppBar(), // 自定义 SliverAppBar
          SliverOverfillRemaining( // 使用 sliver_overfill_remaining 插件
            extraHeight: sliverAppBarFlexDelta, // 指定额外高度
            child: const Placeholder(), // 填充内容
          ),
        ],
      ),
    ),
  ));
}

// 自定义 SliverAppBar
class _SliverAppBar extends StatelessWidget {
  const _SliverAppBar();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const SliverAppBar(
      pinned: true, // 固定在顶部
      floating: false, // 不浮动
      title: Text('sliver_overfill_remaining 示例'), // 标题
      backgroundColor: Colors.orange, // 背景颜色
      toolbarHeight: sliverAppBarToolbarHeight, // 工具栏高度
      expandedHeight: sliverAppBarExpandedHeight, // 扩展高度
      flexibleSpace: FlexibleSpaceBar( // 可折叠的空间
        background: Placeholder(), // 背景占位符
      ),
      bottom: PreferredSize( // 底部 TabBar
        preferredSize: Size.fromHeight(sliverAppBarTabBarHeight),
        child: DefaultTabController(
          length: 1, // Tab 数量
          child: TabBar(
            tabs: [
              Tab(
                text: '这是底部 TabBar', // Tab 文本
              )
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义Sliver填充剩余空间插件sliver_overfill_remaining的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义Sliver填充剩余空间插件sliver_overfill_remaining的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


sliver_overfill_remaining 是一个 Flutter 插件，用于在 CustomScrollView 中实现一个自定义的 Sliver，该 Sliver 可以填充剩余的空间。这在某些场景下非常有用，例如当你希望在 CustomScrollView 的底部添加一个可以伸展的部件时。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 sliver_overfill_remaining 依赖：

dependencies:
  flutter:
    sdk: flutter
  sliver_overfill_remaining: ^0.0.1

然后运行 flutter pub get 来安装依赖。

使用 SliverOverfillRemaining

SliverOverfillRemaining 是一个 Sliver，它会自动填充 CustomScrollView 中的剩余空间。你可以将其添加到 CustomScrollView 的 slivers 列表中。

以下是一个简单的示例，展示了如何使用 SliverOverfillRemaining：

import 'package:flutter/material.dart';
import 'package:sliver_overfill_remaining/sliver_overfill_remaining.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Text('Sliver Overfill Remaining Example'),
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.network(
                  'https://via.placeholder.com/150',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
            SliverOverfillRemaining(
              child: Container(
                color: Colors.blue,
                padding: EdgeInsets.all(16.0),
                child: Center(
                  child: Text(
                    'This fills the remaining space',
                    style: TextStyle(color: Colors.white, fontSize: 20.0),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部