Hello, Flutter(一)——FloatingActio

前言：《Hello, Flutter》是我近期的一个写作计划。我的目标是写一篇篇简短的教程，提供给Flutter的初级用户，让他们能够快速掌握Flutter开发。代码地址：https://github.com/flycash/hello_flutter

FloatingActionButton是一个非常常用的组件，通常用于在界面提供一些扩展功能的入口，比如我常用的Things里面就有这个元素：

当然我不能确定Things这个APP就是用Flutter实现的。只是说在移动端，因为受制于屏幕小，所以很多扩展操作都可以使用FloatingActionButton。

基本用法

最简单的用法是在Scaffold组件之中设置：

当按下这个按钮的时候，onpress回调就会触发。效果如图，左下角那个蓝色按钮就是。注意的是，在代码里面我们什么都没有设置。

调整位置

如果要调整位置，我们可以使用floatingActionButtonLocation，该属性是在Scaffold里面的。FloatingActionButton并不能控制自身的位置。如图，它有很多取值：

一般我比较喜欢把它放在屏幕下面，比较常用的是centerDocked和centerFloat两个。下图是centerDocked：

Scaffold里面还有一个floatingActionButtonAnimator选项，该选项用于将button过度到另外一个位置的动画效果。基本上不会用到。

设置内容

设置button的内容，可以通过child属性来设置。一般会在child里面设置一个Icon：

有些时候我们希望除了设置一个icon，还能额外设置一些文本，最简单的做法就是使用FloatingActionButton.extended里面的label和icon属性：

使用background来设置背景色。现在我们的背景色是蓝色的，我们将它设置为灰色：

它还有一个属性叫做foregroundColor，字面意义是前景色。你可以直观的理解为，我们设置的内容都是受到这个选项的影响的。比如说我们希望把button里面的+号设置为红色，那么可以使用这个选项：

设置形状

现在我们的按钮都是圆形的，我们可以使用shape换个形状，比如说换成方形：

如果觉得太大，我们启用mini属性：

结合BottomAppBar

很多时候，我们想要把它嵌入到底部的菜单栏上，那么可以使用Scaffold的bottomNavigationBar属性：