10 个派上用场的 Flutter 小部件

Posted 2022-06-10 大前端之旅

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加油吧。