颤动列小部件垂直中心

简介

颤动列小部件（shimmering column widget）是一种动画效果，通常用于给用户提示“加载中”等信息。其中，颤动效果是通过在一个容器内不断交替显示半透明的矩形来实现的。

本文将探讨如何让颤动列小部件在垂直中心位置停留，以提高用户体验。

实现

在Flutter中，可以使用Shimmer.fromColors()构造函数创建颤动列小部件，如下所示：

Shimmer.fromColors(
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  child: Container(
    width: 300.0,
    height: 100.0,
  ),
)

这段代码将创建一个大小为300x100的颤动列小部件，颜色使用了灰色系，如下所示：

要将颤动列小部件垂直居中，可以在外层容器中使用Center或Align小部件包裹Shimmer.fromColors()，如下所示：

Center(
  child: Shimmer.fromColors(
    baseColor: Colors.grey[300],
    highlightColor: Colors.grey[100],
    child: Container(
      width: 300.0,
      height: 100.0,
    ),
  ),
)

```dart
Center(
  child: Shimmer.fromColors(
    baseColor: Colors.grey[300],
    highlightColor: Colors.grey[100],
    child: Container(
      width: 300.0,
      height: 100.0,
    ),
  ),
)

这段代码将创建一个垂直居中的颤动列小部件，效果如下所示：

![shimmer_example_centered](https://user-images.githubusercontent.com/24240959/116765359-df09e980-aa53-11eb-9f80-cb66107f10e0.gif)

## 总结

颤动列小部件是Flutter中常用的提示用户“加载中”的动画效果。通过使用`Center`或`Align`小部件包裹`Shimmer.fromColors()`，可以将颤动列小部件在垂直方向居中，提高用户体验。