Flutter Slivers

17 Mar 2025 | 6 分钟阅读

Sliver 是可滚动区域的一部分，用于实现自定义滚动效果。换句话说，sliver 窗口小部件是视口的一个切片。我们可以使用 slivers 实现所有可滚动视图，例如 ListView、GridView。这是一个较低级别的界面，可以很好地控制可滚动区域的实现。在可滚动区域中滚动大量子小部件时，它很有用。由于它们基于视口，因此它们可以根据多个事件和偏移量更改其形状、大小和范围。

Flutter 提供了几种 slivers，下面给出了一些

SliverAppBar
SliverList
SliverGrid

如何使用 slivers？

需要注意的是，所有 sliver 的组件都应始终放置在 CustomScrollView 内部。之后，我们可以组合 slivers 列表以创建自定义可滚动区域。

什么是 CustomScrollView？

Flutter 中的 CustomScrollView 是一个滚动视图，它允许我们创建各种滚动效果，例如网格、列表和扩展标题。它有一个 sliver 属性，我们可以在其中传递一个包含 SliverAppBar、SliverToBoxAdapter、SliverList 和 SliverGrid 等小部件的列表。

让我们详细讨论每个 sliver。

SliverAppBar

SliverAppBar 是 Flutter 中与 CustomScrollView 集成的 material design 应用程序栏。通常，我们将其用作 CustomScrollView 的第一个子项。 它可以在高度上变化，并在滚动视图的其他小部件上方浮动。它允许我们创建一个具有各种滚动效果的应用程序栏。

SliverAppBar 的属性

以下是 SliverAppBar 的基本属性

actions：此属性用于在 appBar 标题的右侧创建小部件。通常，它是一个代表常用操作的 iconButton。

title：此属性用于定义 SliverAppBar 的标题。它类似于 AppBar 标题，用于提供应用程序的名称。

leading：此属性用于定义标题左侧的小部件。通常，它用于放置菜单抽屉小部件。

backgroundColor：此属性用于定义 sliver 应用程序栏的背景颜色。

bottom：此属性用于在标题底部创建空间，我们可以在其中根据需要定义任何小部件。

expandedHeight：此属性用于指定滚动时可展开的应用程序栏的最大高度。必须以 double 值定义。

floating：此属性确定用户滚动到应用程序栏时应用程序栏是否可见。

flexibleSpace：此属性用于定义位于工具栏和选项卡栏后面的小部件。它的高度与应用程序栏的整体高度相同。

示例

在下面的示例中，我们将看到如何将 SliverAppBar 与 CustomScrollView 一起使用。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              actions: <Widget>[
                Icon(Icons.person, size: 40,)
            ],
              title: Text("SliverAppBar Example"),
              leading: Icon(Icons.menu),
              backgroundColor: Colors.green,
              expandedHeight: 100.0,
              floating: true,
              pinned: true
            )
            // Place sliver widgets here
          ],
        ),
      ),
    );
  }
}

输出

当我们运行该应用程序时，我们应该获得与以下屏幕截图类似的 UI

SliverList

SliverList 是一个 sliver，它将子项放置在线性数组或一维数组中。它接受一个 delegate 参数 以提供列表中的项目，以便它们将滚动到视图中。我们可以使用 SliverChildListDelegate 指定子列表或使用 SliverChildBuilderDelegate 构建它们。

示例

在下面的示例中，我们将看到如何将 SliverList 与 CustomScrollView 一起使用。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              actions: <Widget>[
                Icon(Icons.person, size: 40,)
            ],
              title: Text("SliverList Example"),
              leading: Icon(Icons.menu),
              backgroundColor: Colors.green,
              expandedHeight: 100.0,
              floating: true,
              pinned: true
            ),
            SliverList(
              delegate: new SliverChildListDelegate(_buildList(20)),
            ),// Place sliver widgets here
          ],
        ),
      ),
    );
  }
}
List _buildList(int count) {
  List<Widget> listItems = List();
  for (int i = 0; i < count; i++) {
    listItems.add(new Padding(padding: new EdgeInsets.all(16.0),
        child: new Text(
            'Sliver Item ${i.toString()}',
            style: new TextStyle(fontSize: 22.0)
        )
    ));
  }
  return listItems;
}

输出

当我们运行该应用程序时，我们应该获得与以下屏幕截图类似的 UI

SliverGrid

SliverGrids 将子项放置在二维排列中。它还使用委托来指定子项或与 SliverList 类似的显式列表。但是它对网格中的交叉轴维度进行了额外的格式设置。它允许三种指定网格布局的方式

1. 它使用 Count Constructor 计算水平轴上的项目数。参见下面的代码

SliverGrid.count(
  crossAxisCount: 3,
  mainAxisSpacing: 20.0,
  crossAxisSpacing: 20.0,
  childAspectRatio: 3.0,
  children: <Widget>[
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
),

2. 它使用 Extent Constructor，它指定项目的最大宽度。当网格项目大小不同时，它最有用。这意味着我们可以限制它们应该占用多大的空间。参见下面的代码

SliverGrid.extent(
  maxCrossAxisExtent: 200,
  mainAxisSpacing: 10.0,
  crossAxisSpacing: 10.0,
  childAspectRatio: 4.0,
  children: <Widget>[
    Container(color: Colors.orange),
    Container(color: Colors.yellow),
    Container(color: Colors.purple),
    Container(color: Colors.pink),
    Container(color: Colors.green),
    Container(color: Colors.indigo),
  ],
),

3. 它使用 Default 构造函数，它传入一个显式的 gridDelegate 参数

示例

在下面的示例中，我们将看到如何将 SliverGrid 与 CustomScrollView 一起使用。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              actions: <Widget>[
                Icon(Icons.camera_front, size: 40,)
            ],
              title: Text("SliverGrid Example"),
              leading: Icon(Icons.menu),
              backgroundColor: Colors.green,
              expandedHeight: 100.0,
              floating: true,
              pinned: true
            ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
              ) ,
              delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
                return new Container(
                    color: _randomPaint(index),
                    height: 150.0
                );
              }),
            ),
          ],
        ),
      ),
    );
  }
}
Color _randomPaint(int index) {
  if (index % 3 == 0) {
    return Colors.orange;
  } else if (index % 3 == 1) {
    return Colors.blue;
  }
  return Colors.red;
}

输出

当我们运行该应用程序时，我们应该获得与以下屏幕截图类似的 UI

SliverFixedExtentList 和 SliverToBoxAdapter

SliverFixedExtentList 是一个 sliver，它将具有相同主轴范围的多个子项保存在一维数组或线性数组中。它比 SliverList 更有效，因为不需要对其子项执行布局以获取主轴范围。它不允许其子项之间存在间隙。它要求每个子项在交叉轴上具有 SliverConstraints.crossAxisExtent 以及主轴上的 itemExtent 属性。

SliverToBoxAdapter 是一个 sliver，它只能容纳一个 box 小部件。当我们只想在 CustomScrollView 中显示单个子小部件以创建自定义滚动效果时，它很有用。如果我们需要在 CustomScrollView 中显示多个 box 小部件，则必须使用 SliverList、SliverFixedExtentList 或 SliverGrid。

示例

在下面的示例中，我们将看到如何将 SliverFixedExtentList 和 SliverToBoxAdapter 与 CustomScrollView 一起使用。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              actions: <Widget>[
                Icon(Icons.camera_front, size: 40,)
            ],
              title: Text("Sliver Example"),
              leading: Icon(Icons.menu),
              backgroundColor: Colors.green,
              expandedHeight: 100.0,
              floating: true,
              pinned: true
            ),
            SliverFixedExtentList(
              itemExtent: 75,
              delegate: SliverChildListDelegate([
                Container(color: Colors.blue),
                Container(color: Colors.pink),
                Container(color: Colors.yellow),
              ]),
            ),
            SliverToBoxAdapter(
              child: Container(
                color: Colors.orange,
                padding: const EdgeInsets.all(16.0),
                child: Text('Sliver Grid Header', style: TextStyle(fontSize: 28)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

输出

当我们运行该应用程序时，我们应该获得与以下屏幕截图类似的 UI

下一个主题Flutter REST API

Flutter Slivers

如何使用 slivers？

什么是 CustomScrollView？

SliverAppBar

SliverAppBar 的属性

示例

SliverList

示例

SliverGrid

示例

SliverFixedExtentList 和 SliverToBoxAdapter

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter Slivers

如何使用 slivers？

什么是 CustomScrollView？

SliverAppBar

SliverAppBar 的属性

示例

SliverList

示例

SliverGrid

示例

SliverFixedExtentList 和 SliverToBoxAdapter

示例

相关帖子

Flutter 启动画面

Flutter Google 地图

Flutter 包

Flutter 测试

Flutter 数据库

Flutter REST API

Android 平台特定代码

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器