Flutter FloatingActionButton 位置

Flutter是一个流行的跨平台应用程序框架，提供了一个强大的控件库供程序员使用，其中之一就是FloatingActionButton。FloatingActionButton是一个圆形按钮，可以放置在应用程序的任何地方，以激活常用操作。本文将介绍如何在Flutter中设置和调整FloatingActionButton的位置。

设置FloatingActionButton的位置

Flutter中的Scaffold控件提供了一个FloatingActionButton属性，可以轻松地添加和定位FloatingActionButton。

例如，在Scaffold中的bottomNavigationBar属性下添加FloatingActionButton：

Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    // 底部导航栏
    backgroundColor: Colors.white,
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Profile',
      ),
    ],
  ),
  // FloatingActionButton
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {},
  ),
  // 设置FloatingActionButton在底部右下角
  floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
)

此代码片段将FloatingActionButton放置在底部导航栏的上方，位置在底部右下角，使用的是FloatingActionButtonLocation属性。

FloatingActionButtonLocation的类型和使用方法

FloatingActionButtonLocation提供了多种类型，可以选择不同的位置和布局方案。以下是常用的类型和使用方法：

FloatingActionButtonLocation.endDocked

将FloatingActionButton放置在Scaffold的底部右下方，顶部和底部都与底部导航栏对齐，使用时需要将Scaffold.bottomNavigationBar属性设置为非空值。

floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,

FloatingActionButtonLocation.centerDocked

将FloatingActionButton放置在Scaffold的底部中心，顶部和底部都与底部导航栏对齐，使用时需要将Scaffold.bottomNavigationBar属性设置为非空值。

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

FloatingActionButtonLocation.endFloat

将FloatingActionButton放置在Scaffold的底部右下方，距离Scaffold的底部边缘有一定距离。

floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,

FloatingActionButtonLocation.centerFloat

将FloatingActionButton放置在Scaffold的底部中心，距离Scaffold的底部边缘有一定距离。

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

小结

FloatingActionButton是Flutter中常用的控件之一，在应用中使用它可以提高用户体验和操作便捷性。通过设置FloatingActionButtonLocation属性，可以轻松地定位FloatingActionButton的位置和布局方案。希望本文内容对您有帮助，谢谢阅读！