Flutter 悬停按钮组件

Flutter 悬停按钮组件(FloatingActionButton)，FloatingActionButton对应一个圆形图标按钮，悬停在内容之上，以展示应用程序中的主要动作，所以非常醒目，类似于iOS里的小白点按钮。FloatingActionButton通常用于Scaffold.floatingActionButton字段，常用属性见表:

示例代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FloatingActionButton示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text('FloatingActionButton示例'),
        ),
        body: Center(
          child: Text(
              'FloatingActionButton示例',
              style: TextStyle(fontSize: 28.0),
          ),
        ),
        floatingActionButton: Builder(builder: (BuildContext context) {
          return FloatingActionButton(
              child: const Icon(Icons.add),
              // 提示信息
              tooltip: "请点击FloatingActionButton",
              // 前景色为白色
              foregroundColor: Colors.white,
              // 背景色为蓝色
              backgroundColor: Colors.blue,
              // 未点击阴影值
              elevation: 7.0,
              // 点击阴影值
              highlightElevation: 14.0,
              onPressed: () {
                // 点击回调事件，弹出一句提示语句
                Scaffold.of(context).showSnackBar(SnackBar(
                  content: Text("你点击了FloatingActionButton"),
                ));
              },
              mini: false,
              // 圆形边
              shape: CircleBorder(),
              isExtended: false,
          );
        }),
        floatingActionButtonLocation:
        FloatingActionButtonLocation.centerFloat, //居中放置，位置可以设置成左中右
      ),
    );
  }
}

上述示例代码的视图展现大致如图所示，当按下图中按钮后，会触发onPressed事件，调用SnackBar显示一句提示语。

酷客教程相关文章：

• Flutter 抽屉组件
• Flutter 水平选项卡及视图组件
• Flutter 底部导航条组件
• Flutter 应用按钮组件(AppBar)