10 个派上用场的 Flutter 小部件

尝试学习一门新语言可能会令人恐惧和厌烦。很多时候，我们希望我们知道早先存在的某些功能。在今天的文章中，我将告诉你我希望早点知道的最方便的几个Flutter小部件。

Spacer

Spacer 创建一个可调整的空白空间，它占据 Flex 容器中小部件之间的任何剩余空间，例如行或列。

​ Row(        children: const <Widget>[          Text('Begin'),          Spacer(), // Defaults to a flex of one.          Text('Middle'),          // Gives twice the space between Middle and End than Begin and Middle.          Spacer(flex: 2),          Text('End'),        ],      ),

TextButton.icon

在创建带有图标的按钮时，此小部件取代了使用行的需要。您必须提供图标和标签。

TextButton.icon(              onPressed: () {},               icon: Icon(Icons.home),               label: Text('Home')              ),

Wrap

它根据提供的方向值水平或垂直显示其子项。它可以用来代替 Gridview。这个小部件是响应式的，无需做太多就可以适应不同的屏幕尺寸。

Wrap(                direction: Axis.horizontal,                alignment: WrapAlignment.start,                spacing: 2.0,                runSpacing: 3.0,                children: [],              )

AnimatedSwitcher

这个小部件动画一个新的小部件来代替另一个。它提供了一个很好的过渡，使应用程序非常流畅。始终为其子小部件添加一个键以确保其正常工作。

SafeArea

此小部件为您的小部件添加填充，确保您的应用不会与操作系统和设备显示功能（如状态栏）发生冲突。

SafeArea(child: Container())

RefreshIndicator

将可滚动的小部件作为一个孩子。当孩子被过度滚动时，动画圆形进度指示器会淡入视图并调用未来来更新可滚动的内容。

RefreshIndicator(child: ListView(), onRefresh: () async {}),

RichText

这允许我们在同一个句子或段落上显示具有不同样式的文本。您可以包含内联链接、下划线文本、彩色文本等等。

Transform

这个小部件将您的动画游戏提升到一个全新的水平。它可以实现简单的动画，如旋转和缩放到更复杂的动画，如 3D 和倾斜动画。它提供了有用命名的构造函数，例如旋转、缩放和平移，以便快速实现。

InteractiveViewer

在小部件上引入缩放、平移、拖动和捏合功能的最简单方法。它可以根据您的需要高度定制。

Flow

这个小部件利用转换的力量来提供很酷的动画。它是您必须在实际中看到以了解其功能的小部件之一。查看官方文档以获取更多见解。

Chip

这是一个简单的小部件，以有组织的方式和精美的方式显示简单的数据。它有几个变体，例如InputChip、ChoiceChip、FilterChip和ActionChip。

Chip(   avatar: CircleAvatar(     backgroundColor: Colors.grey.shade800,     child: const Text('AB'),   ),   label: const Text('Aaron Burr'), )

现在您知道了一些非常酷的小部件，让我们为更好的使用Flutter加油吧。