Flutter悬浮按钮FloatingActionButton使用技巧大公开！

2023-12-18 14:32:24

Flutter中的悬浮按钮（FloatingActionButton）是一种常用的控件，可以帮助用户快速执行某些操作。FloatingActionButton通常放置在屏幕的右下角，是一个圆形的按钮，上面有一个图标。当用户点击悬浮按钮时，按钮会执行预定义的操作。

普通用法

要在Flutter中使用悬浮按钮，您需要在您的Dart代码中导入'package:flutter/material.dart'库。然后，您可以在您的代码中创建FloatingActionButton对象，并将其添加到您的布局中。以下是如何使用FloatingActionButton的示例：

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: FloatingActionButton(
            onPressed: () {
              // Add your code here.
            },
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

在上面的代码中，我们创建了一个FloatingActionButton对象，并将其添加到Scaffold的body属性中。FloatingActionButton的onPressed属性指定了当用户点击按钮时要执行的操作。在这个例子中，我们只打印了一条消息。

修改悬浮按钮位置

您可以通过继承FloatingActionButtonLocation类并重写对应的方法来自定义FloatingActionButton的位置。例如，以下是如何将FloatingActionButton放在屏幕的左下角：

import 'package:flutter/material.dart';

class MyFloatingActionButtonLocation extends FloatingActionButtonLocation {
  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    return Offset(scaffoldGeometry.scaffoldSize.width - 56.0, scaffoldGeometry.scaffoldSize.height - 56.0);
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: FloatingActionButton(
            onPressed: () {
              // Add your code here.
            },
            child: Icon(Icons.add),
          ),
        ),
        floatingActionButtonLocation: MyFloatingActionButtonLocation(),
      ),
    );
  }
}

修改悬浮按钮大小

您可以通过设置FloatingActionButton的size属性来修改FloatingActionButton的大小。例如，以下是如何将FloatingActionButton的大小设置为50x50：

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: FloatingActionButton(
            onPressed: () {
              // Add your code here.
            },
            child: Icon(Icons.add),
            size: Size(50.0, 50.0),
          ),
        ),
      ),
    );
  }
}

去除悬浮按钮切换动画

您可以通过继承FloatingActionButton并重写其build方法来去除FloatingActionButton的切换动画。例如，以下是如何去除FloatingActionButton的切换动画：

import 'package:flutter/material.dart';

class MyFloatingActionButton extends FloatingActionButton {
  MyFloatingActionButton({
    Key? key,
    required VoidCallback onPressed,
    Widget? child,
    Color? backgroundColor,
    ShapeBorder? shape,
    double? elevation,
    Color? foregroundColor,
    EdgeInsets? padding,
    bool? isExtended,
    MaterialTapTargetSize? materialTapTargetSize,
    Clip clipBehavior = Clip.none,
    FocusNode? focusNode,
    bool autofocus = false,
  }) : super(
          key: key,
          onPressed: onPressed,
          child: child,
          backgroundColor: backgroundColor,
          shape: shape,
          elevation: elevation,
          foregroundColor: foregroundColor,
          padding: padding,
          isExtended: isExtended,
          materialTapTargetSize: materialTapTargetSize,
          clipBehavior: clipBehavior,
          focusNode: focusNode,
          autofocus: autofocus,
        );

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size ?? 56.0,
      height: size ?? 56.0,
      child: Ink(
        decoration: _createInkDecoration(),
        child: InkWell(
          onTap: onPressed,
          child: Center(
            child: child,
          ),
        ),
      ),
    );
  }

  InkDecoration _createInkDecoration() {
    return InkDecoration(
      color: foregroundColor,
      shape: shape,
      borderRadius: isExtended ? BorderRadius.zero : BorderRadius.circular(size ?? 28.0),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: MyFloatingActionButton(
            onPressed: () {
              // Add your code here.
            },
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}