10 个派上用场的 Flutter 小部件（flutter pi）

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

Spacer

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

 Row(
        children: const [
          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

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

AnimatedSwitcher(
            child: Text(
              '$_count',
              // This key causes the AnimatedSwitcher to interpret this as a "new"
              // child each time the count changes, so that it will begin its animation
              // when the count changes.
              key: ValueKey(_count),
            ),
            duration: Duration(microseconds: 200),
            transitionBuilder: (Widget child, Animation animation) {
              return ScaleTransition(scale: animation, child: child);
            },
          )

SafeArea

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

SafeArea(child: Container())

RefreshIndicator

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

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

Richtext

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

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: const [
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

Transform

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

Container(
  color: Colors.black,
  child: Transform(
    alignment: Alignment.topRight,
    transform: Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),
    child: Container(
      padding: const EdgeInsets.all(8.0),
      color: const Color(0xFFE8581C),
      child: const Text('Hello there!'),
    ),
  ),
)

InteractiveViewer

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

InteractiveViewer(
        boundaryMargin: const EdgeInsets.all(20.0),
        minScale: 0.1,
        maxScale: 1.6,
        child: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.orange, Colors.red],
              stops: [0.0, 1.0],
            ),
          ),
        ),
      ),

Flow

这个小部件利用转换的力量来提供很酷的动画。 它是您必须在实际中看到以了解其功能的小部件之一。

Chip

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

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

这是一个包装，每个人。 谢谢阅读。

现在您知道了一些非常酷的小部件，让我们为世界构建吧。