如何将 FloatingActionButton 附加到 AppBar - Dart

在Flutter应用程序中，可以将FloatingActionButton（FAB）添加到AppBar上，以提供快速访问应用程序的主要操作。下面是在Dart中如何实现这一功能的步骤。

步骤

步骤1：导入Flutter Material包

在Dart文件的开头处，您需要导入Flutter的Material包：

import 'package:flutter/material.dart';

步骤2：创建Scaffold

Scaffold是一个Material Design布局组件，它包含AppBar，底部导航栏和Drawer等常用UI元素。在Dart文件中创建一个Scaffold：

class ExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Example App"),
      ),
      body: Container(
        // 页面的主要内容
      ),
    );
  }
}

步骤3：创建FloatingActionButton

使用FloatingActionButton类创建一个FAB，并将它作为Scaffold的属性传递：

class ExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Example App"),
      ),
      body: Container(
        // 页面的主要内容
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 当FAB被点击时执行的操作
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

步骤4：将FloatingActionButton与AppBar连接

为了将FAB固定在AppBar上，需要将AppBar的floatingActionButtonLocation属性设置为FloatingActionButtonLocation.centerFloat：

class ExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Example App"),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        // FAB位置
      ),
      body: Container(
        // 页面的主要内容
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 当FAB被点击时执行的操作
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

步骤5：运行应用程序

完成上述步骤后，FAB将固定在AppBar中央，点击FAB执行的操作也会在控制台中输出。

结论

在本文中，我们学习了如何将FloatingActionButton添加到AppBar中。这是一个非常有用的技术，可以提高应用程序的易用性，增强用户体验。