带有文本的 Flutter FloatingActionButton

Flutter 的 FloatingActionButton 是一个很常见的组件，通常被用作主要操作的入口。但是，它默认只能显示一个Icon，而我们有时候需要在按钮上显示更多的文字。本文将向你介绍一种方法来创建一个带有文本的 FloatingActionButton。

实现方法

我们可以使用Stack（层叠布局）来实现带有文本的 FloatingActionButton。具体方法如下：

1. 首先，创建一个标准的 FloatingActionButton。

2. 在 FloatingActionButton 的顶部添加一个 Positioned 组件，用于显示文本。Positioned 组件需要设置 top 和 left 两个参数来决定其在父组件中的位置。

3. 在 Positioned 组件内部，我们可以使用一个 Container 组件来显示文本。在 Container 内部，我们可以添加文本组件，比如 Text 或者 RichText，来显示文本。文本的样式设置可以和普通的文本一样。

示例代码

Widget build(BuildContext context) {
  return Stack(
    alignment: Alignment.center,
    children: <Widget>[
      FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      Positioned(
        top: -25.0,
        left: 0.0,
        child: Container(
          width: 80.0,
          height: 50.0,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8.0),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.3),
                blurRadius: 3,
                offset: Offset(0, 3),
              ),
            ],
          ),
          child: Center(
            child: Text(
              '添加',
              style: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.bold,
                color: Colors.black,
              ),
            ),
          ),
        ),
      ),
    ],
  );
}

解析

首先，我们使用 Stack 组件创建一个层叠布局，使 FloatingActionButton 和文本位于同一层级。

然后，在 Stack 中添加 FloatingActionButton 和 Positioned 组件。

由于 Positioned 组件默认是相对于 Stack 的左上角定位的，所以我们需要通过设置 top 和 left 参数来将文本向上移动到 FloatingActionButton 的顶部。

最后，在 Positioned 中添加一个 Container 组件来包含文本。

这里，我们添加了一个白色的背景，用圆角矩形来装饰 Container。

在 Container 中添加 Text 组件用于显示文本，并设置其样式。

最终，我们就得到了一个带有文本的 FloatingActionButton！

总结

通过使用 Stack 和 Positioned 组件，我们可以在 FloatingActionButton 上显示文本。

做到清晰明了的同时，也让 FloatingActionButton 的交互更加直观，增强了用户体验。

演示效果如下：

以上就是带有文本的 Flutter FloatingActionButton 的实现方法和示例代码，希望能对你有所帮助！