遵循Material Design指南，Flutter为各种使用情况提供了不同种类的按钮。在这些按钮中，FloatingActionButton（FAB）尤其重要，因为它有独特的属性和使用规则。
在本教程中，我们将向您介绍这些规则，并告诉您如何在Flutter中使用和定制FloatingActionButton部件。
什么是 Flutter 中的 FloatingActionButton？
Flutter中的每个组件都被称为部件，FloatingActionButton也不例外。顾名思义，这个部件会漂浮在屏幕上的其他部件之上。
通常，FloatingActionButton部件被放置在屏幕的右下角，形状为圆形。它也有一个海拔高度，以给予这种浮动效果。最重要的是，所有这些属性都是可定制的。
下面是Flutter中一个典型的FloatingActionButton的样子：
要在Flutter中使用FloatingActionButton，请使用Scaffold'sfloatingActionButton 属性。
Scaffold(
floatingActionButton: FloatingActionButton(),
),
这将在屏幕上的默认位置添加FAB。
您也可以通过使用FloatingActionButton.extended() ，创建一个扩展的FAB。
Scaffold(
floatingActionButton: FloatingActionButton(
label: Text('Action'),
),
),
这里我们在屏幕上有一个默认的FAB。
FloatingActionButton规则和原则
在我们深入探讨自定义选项之前，让我们确保了解使用FAB时需要注意的规则和原则。这些最佳实践对于保持你的应用程序与Material Design的一致性非常重要。
主要行动
FAB在用户界面中占据了一个突出的位置。因此，它应该执行屏幕上的主要动作。
该动作应该是该屏幕上最常用和最重要的动作。例如，在Twitter的feed页面中，撰写tweet是主要的动作。
次要的动作，如调整音量、复制文本、打开抽屉等，不应该用FAB来执行。这些操作总是可以用隐藏的或巧妙地放置在用户界面中的小部件来执行。
建设性的动作
你应该只将FAB用于建设性的动作，避免将其用于破坏性的动作。诸如添加到购物车、分享图片和写电子邮件等行为被认为是建设性的行为。破坏性的动作包括存档、删除、导航到上一页等。
语境是关键
浮动的行动按钮应该与屏幕的上下文相关；图标和行动都应该有意义。
再以Twitter应用为例，图标清楚地表明了该按钮的作用--即创建一条新的推特。
这怎么可能以错误的方式进行呢？一个例子是将按钮设置为打开个人资料页面，这显然不是屏幕上最重要的动作。
不要使用多个FAB（在大多数情况下）
在大多数情况下，屏幕上不应该有超过一个浮动动作按钮。这是有道理的，因为FAB的作用是执行最重要的动作，有多个FAB会降低其重要性。
然而，这条规则有一个例外：如果屏幕上有两个不同的、高度重要的动作，使用两个FAB可能是有意义的。这方面的一个好例子是谷歌地图应用。
在这里，选择目的地和以当前位置为中心都是同样重要的操作，应该在屏幕上随时可用。
图标和标签
默认情况下，只有FAB的图标应该显示在屏幕上；包括文字，在某种程度上，违背了使用FAB小部件的目的。
对
错
然而，在扩展FAB的情况下，这个规则是颠倒的。在扩展的FAB中，你可以只显示标签或图标和标签都显示。相比之下，在一个扩展的浮动动作按钮中只显示图标是不允许的。
右边
对的
错
定制浮动动作按钮
现在您已经了解了创建浮动动作按钮的重要原则和最佳做法，让我们来探索Flutter的FloatingActionButton小组件所提供的自定义选项。
颜色
您可以自定义浮动动作条的颜色。要将FAB的背景颜色改为红色，请输入以下内容。
forgroundColor 属性用于改变一个子项的颜色--在这个例子中，就是图标的颜色。让我们把它改成粉红色。
FloatingActionButton(
foregroundColor: Colors.pink,
),
当你点击FAB时，会有一个动画，其中一个颜色从被点击的位置开始，覆盖整个按钮区域。这被称为飞溅的颜色。
让我们把我们的FloatingActionButton的飞溅颜色改为紫色。
FloatingActionButton(
splashColor: Colors.purple,
),
当鼠标指针悬停在按钮上时，也会有颜色变化。这在按钮被实际点击之前会产生很好的反馈。
要把这个颜色改为橙色，请按如下方法设置hoverColor 属性。
FloatingActionButton(
hoverColor: Colors.orange,
),
最后，还有一个选项可以改变焦点颜色。基本上，当使用FocusNode ，按钮被聚焦时，颜色可以被改变，以表明按钮现在处于聚焦状态。
要理解这到底是如何发生的，你需要回顾一下Flutter中的焦点概念，这已经超出了本文的范围。
现在，我们可以通过将autoFocus 参数设置为true 来看到颜色的变化。这将使FAB自动聚焦，我们可以看到颜色变成了绿色。
FloatingActionButton(
focusColor: Colors.green,
autoFocus: true,
),
提升
仰角基本上是指按钮在Z轴上的位置。阴影是根据海拔高度来调整的，这就造成了按钮是浮动的错觉。
我们的FAB的默认标高被设置为6 ，所以让我们通过改变它来增加标高，即12 。
FloatingActionButton(
elevation: 12,
),
如果FAB的onPressed 属性被设置为null ，那么按钮将被标记为禁用。我们可以专门定制禁用的标高。
让我们把它设置为0 。
FloatingActionButton(
onPressed: null,
disabledElevation: 0,
),
就像focusColor ，这里我们有focusElevation ，以获得一些额外的控制，当按钮被聚焦时，用户看到的反馈。
在这个例子中，让我们把它设置为5 。不要忘记把autoFocus 设为true ，以便立即测试。
FloatingActionButton(
autoFocus: true,
focusElevation: 5,
),
突出显示的高度是按钮被点击时的高度，就像飞溅的颜色。我们将把它设置为50 ，以看到海拔的真正差异。
FloatingActionButton(
higlightElevation: 50,
),
最后，我们有悬停标高。这表示当FAB被鼠标指针悬停在上面时的标高。再一次，我们将它保持在50 。
FloatingActionButton(
hoverElevation: 50,
),
杂项属性
让我们快速浏览一下FloatingActionButton小组件的其他属性。
首先，是mini 。将mini 设置为true ，就会呈现一个迷你版的FAB。
FloatingActionButton(
mini: true,
),
mouseCursor 使你能够在鼠标悬停在按钮上时改变光标类型。
FloatingActionButton(
mouseCursor: MaterialStateMouseCursor.textable,
),
toolTip 使你能够向用户提供额外的可访问性。例如，如果用户不理解按钮图标的含义怎么办？你可以创建一个工具提示，说些什么--例如，"保存"--只要按钮被悬停或长按，它就会出现。
FloatingActionButton(
tooltip: 'Save',
),
你可以使用shape 参数自定义按钮的形状。例如，你可以把它变成像这样的矩形。
FloatingActionButton(
shape: RoundedRectangleBorder(),
),
添加动画和过渡
FloatingActionButton 使用英雄动画进行页面转换。在过渡时，按钮基本上会变形为一个新的部件，它看起来非常酷。让我们看看它的操作，好吗？
首先，创建一个新的页面来导航。我们将它称为SecondPage 。
class SecondPage extends StatelessWidget {
const SecondPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
);
}
}
接下来，在页面的中心创建一个Hero widget。
return Scaffold(
body: Center(
child: Hero(tag: 'uniqueTag', child: Icon(Icons.save)),
),
);
tag 属性使我们能够通过提供独特的标签来连接两个小部件，这样框架就不会对哪个小部件的变形感到困惑。在这个例子中，我们将使用相同的 "保存 "**图标作为孩子。
现在在第一页中向FAB提供相同的标签。
FloatingActionButton(
heroTag: 'uniqueTag',
),
FAB现在知道它必须对那个特定的图标小部件做动画。
由于FAB只能对一个widget做动画，你不能用同一个标签创建多个Hero widget。每个小部件都应该有一个独特的标签。
最后，我们将让FAB在被按下时导航到SecondPage 。要做到这一点，在FAB的onPressed 属性中使用Navigator.push() 。
FloatingActionButton(
heroTag: 'uniqueTag',
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(),
));
}
),
下面是过渡的样子:
让我们试着给另一个浮动动作按钮制作动画，看看是什么样子的。
在第二页创建一个FAB。这一次，我们可以有一个扩展的FloatingActionButton。
FloatingActionButton.extended(
heroTag: 'uniqueTag',
label: Row(
children: [Icon(Icons.save), Text('Save')],
),
),
现在导航到第二页应该是这样的:
很酷，对吗？
总结
完成本教程后，你现在应该明白:
- 什么是FloatingActionButton以及如何在Flutter应用程序中使用它
- 使用FAB时要记住的规则和原则
- 如何根据自己的喜好定制FAB
- 如何在FAB中添加一个英雄动画
有了这些知识，我希望您能够在您的Flutter应用程序中实施FAB，并使其更加美观和实用。谢谢您的阅读!
