如何创建和自定义颤动中的浮动动作按钮-DEV365 开发者社区

浮动动作按钮（FAB）表示该屏幕上的关键用户操作。这个小部件看起来像一个圆形按钮漂浮在屏幕的右下角，因此非常容易访问，并且在用户范围内。

创建浮动动作按钮

FloatingActionButton窗口小部件类别中的flutter类可用于创建一个浮动按钮。以下代码显示了如何在Flutter中创建一个简单的浮动按钮。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.format_size_sharp, color: Colors.white),
          onPressed: () {
            // Do something
          },
        ),
      ),

    );
  }
}

自定义浮动动作按钮

FloatingActionButton小部件具有许多可用于自定义其外观和行为的属性。例如，我们可以使用backgroundColor属性设置按钮背景颜色和闭合属性来设置按下按钮时执行的回调。

floatingActionButton: FloatingActionButton(
  tooltip: "Settings",
  backgroundColor: Colors.cyan.shade800,
  foregroundColor: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18),
  ),
  onPressed: () {
    // Do something here.
  },
  child: const Icon(Icons.format_size_sharp, color: Colors.white),
)
`
## Displaying Icon and label on the floating action button

`floatingActionButton: FloatingActionButton.extended(
  tooltip: "Settings",
  backgroundColor: Colors.cyan.shade800,
  foregroundColor: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18),
  ),
  onPressed: () {
    // Do something here.
  },
  icon: const Icon(Icons.format_size_sharp, color: Colors.white),
  label: const Text("Settings"),
)

小型浮动动作按钮

floatingActionButton: FloatingActionButton.small(
  tooltip: "Settings",
  backgroundColor: Colors.cyan.shade800,
  foregroundColor: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18),
  ),
  onPressed: () {
    // Do something here.
  },
  child: const Icon(Icons.format_size_sharp, color: Colors.white),

大型浮动动作按钮

floatingActionButton: FloatingActionButton.large(
  tooltip: "Settings",
  backgroundColor: Colors.cyan.shade800,
  foregroundColor: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18),
  ),
  onPressed: () {
    // Do something here.
  },
  child: const Icon(Icons.format_size_sharp, color: Colors.white),
),