颤片 - 芒果文档

📌 相关文章

📜 颤片

📅 最后修改于: 2021-01-02 05:30:04 🧑 作者: Mango

颤动的条子

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

Flutter提供了几种棉条，其中一些如下：

SliverAppBar
银色列表
SliverGrid

如何使用条子?

请注意，所有条子的组件都应始终放置在CustomScrollView内。之后，我们可以合并条子列表以创建自定义可滚动区域。

什么是CustomScrollView?

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

让我们详细讨论每个条子。

SliverAppBar

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

SliverAppBar的属性

以下是SliverAppBar的基本属性：

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

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

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

backgroundColor：此属性用于为条形应用程序栏定义背景颜色。

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

ExpandedHeight：此属性用于指定滚动时可以扩展的应用栏的最大高度。必须以双精度值定义。

浮动：此属性确定当用户向应用程序栏滚动时，应用程序栏是否可见。

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: [
            SliverAppBar(
              actions: [
                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是将子级放置在线性数组或一维数组中的条子。它需要一个委托参数才能以滚动到视图的方式在列表中提供项目。我们可以使用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: [
            SliverAppBar(
              actions: [
                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 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构造函数对水平轴上的项目数进行计数。请参见以下代码：

SliverGrid.count(
  crossAxisCount: 3,
  mainAxisSpacing: 20.0,
  crossAxisSpacing: 20.0,
  childAspectRatio: 3.0,
  children: [
    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.它使用范围构造器，该构造器指定项目的最大宽度。当网格项目的大小不同时，此功能最为有用。这意味着我们可以限制它们应占用的空间。请参见以下代码：

SliverGrid.extent(
  maxCrossAxisExtent: 200,
  mainAxisSpacing: 10.0,
  crossAxisSpacing: 10.0,
  childAspectRatio: 4.0,
  children: [
    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.它使用默认构造函数，该构造函数在显式的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: [
            SliverAppBar(
              actions: [
                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是一个条带，它以一维数组或线性数组容纳具有相同主轴范围的多个子级。它比SliverList效率更高，因为无需对其子级执行布局即可获取主轴范围。它不允许在其子级之间留有空隙。它要求每个孩子在横轴上都具有SliverConstraints.crossAxisExtent，在主轴上具有itemExtent属性。

SliverToBoxAdapter是只能容纳一个盒子小部件的条子。当我们只想在CustomScrollView中显示单个子窗口小部件以创建自定义滚动效果时，这很有用。如果需要在CustomScrollView中显示多个框小部件，则必须使用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: [
            SliverAppBar(
              actions: [
                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：