矩形浮动操作按钮 - Dart

在 Dart 中，我们可以使用矩形浮动操作按钮（FloatingActionButton）来为我们的应用程序提供一个方便的操作按钮。

创建一个矩形浮动操作按钮

要创建一个矩形浮动操作按钮，我们需要使用 FloatingActionButton widget。例如，下面的代码将创建一个简单的红色的矩形浮动操作按钮：

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  backgroundColor: Colors.red,
  child: Icon(Icons.add),
),

在这个例子中，我们指定当按钮被点击时应该执行什么操作（在这里，什么都不做），以及设置按钮的背景颜色和图标。

当用户单击按钮时，onPressed 回调函数会被调用。这里我们什么都不做，但是我们可以在这个函数中执行任何我们想要的逻辑。

放置矩形浮动操作按钮

默认情况下，操作按钮会被放置在屏幕的右下角。但是，我们可以使用 FloatingActionButtonLocation widget 来指定按钮的位置。例如，下面的代码将把按钮放在屏幕的左下角：

floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,

在这个例子中，我们使用 FloatingActionButtonLocation.startFloat 枚举值来将按钮放置在左下角。

改变矩形浮动操作按钮的形状

默认情况下，矩形浮动操作按钮是圆形的。但是，我们可以使用 shape 属性来改变按钮的形状。例如，下面的代码将创建一个具有矩形形状的浮动操作按钮：

floatingActionButton: FloatingActionButton(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10)
  ),
  onPressed: () {},
  backgroundColor: Colors.red,
  child: Icon(Icons.add),
),

在这个例子中，我们使用 RoundedRectangleBorder 类来创建一个具有圆角的矩形形状。我们还使用 borderRadius 属性来指定圆角的半径。

总结

矩形浮动操作按钮是 Dart 中的一个非常有用的小部件，可以帮助我们提供一个简单的、方便的操作按钮。通过使用 FloatingActionButton、FloatingActionButtonLocation 和 shape 等属性，我们可以轻松地自定义按钮的外观和行为。