Flutter自定义浮动操作按钮位置插件custom_floating_action_button_location的使用

Flutter自定义浮动操作按钮位置插件custom_floating_action_button_location的使用

特性

• 可以将浮动操作按钮放置在屏幕上的任何位置。
• 支持通过坐标或预定义位置进行对齐。
• 与Scaffold无缝集成。
• 易于集成和定制。

开始使用

首先，在pubspec.yaml文件中添加依赖项：

dependencies:
  custom_floating_action_button_location: ^0.0.1

然后导入该包：

import 'package:custom_floating_action_button_location/custom_floating_action_button_location.dart';

使用示例

以下是一个完整的示例代码，展示了如何使用custom_floating_action_button_location插件来自定义浮动操作按钮的位置。

import 'package:custom_floating_action_button_location/custom_floating_action_button_location.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 尝试运行你的应用（执行 "flutter run"），你会看到应用有一个紫色的工具栏。然后，不退出应用，
        // 尝试更改颜色方案中的 seedColor 为 Colors.green 并触发热重载（保存更改或点击 "热重载" 按钮）。
        //
        // 注意，计数器不会重置回零；应用程序的状态在重载期间不会丢失。要重置状态，请使用热重启。
        //
        // 这不仅适用于值，还适用于代码：大多数代码更改可以通过简单的热重载来测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是你的应用的首页。它是有状态的，意味着它有一个包含影响其外观字段的状态对象。
  // 这个类是状态的配置。它持有由父级（在这个例子中是App小部件）提供的值（例如标题）
  // 并在状态的构建方法中使用。小部件子类中的字段总是标记为 "final"。

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这次调用 setState 告诉 Flutter 框架这个状态中有些东西发生了变化，
      // 导致它重新运行下面的构建方法，以便显示可以反映更新后的值。
      // 如果我们不调用 setState 而改变 _counter，那么构建方法将不会再次被调用，
      // 因此什么都不会发生。
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 每次调用 setState 时都会重新运行此方法，例如由上面的 _incrementCounter 方法所做。
    //
    // Flutter 框架已被优化以使重新运行构建方法变得快速，因此你可以重建任何需要更新的东西，
    // 而不是不得不逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 尝试将颜色更改为特定颜色（如 Colors.amber）并触发热重载以查看工具栏颜色的变化。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 在这里，我们从由 App.build 方法创建的 MyHomePage 对象中获取值，
        // 并使用它来设置我们的应用栏标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center 是一个布局小部件。它接受一个子小部件并将它放置在其父小部件的中间。
        child: Column(
          // Column 也是一个布局小部件。它接受一个子小部件列表并垂直排列它们。
          // 默认情况下，它水平调整自身大小以适应其子小部件，并尝试与其父小部件一样高。
          //
          // Column 有许多属性可以控制其自身大小及其子小部件的位置。在这里，我们使用 mainAxisAlignment 来
          // 垂直居中子小部件；主轴在这里是垂直的（交叉轴将是水平的）。
          //
          // 尝试：调用 "调试绘制"（选择 IDE 中的 "切换调试绘制" 动作，或在控制台中按 "p"），以查看每个小部件的线框。
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经按下了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButtonLocation: CustomFloatingActionButtonLocation(xOffset: 100, yOffset: 250),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

其他信息

自定义

Custom Floating Action Button Location 包设计为高度可定制。

兼容性

该包与针对Android和iOS平台的Flutter应用程序兼容。它已在多种设备和屏幕尺寸上进行了测试，以确保流畅的用户体验。该包也经过了性能优化，适合处理大量数据的应用程序。

安装

要在你的pubspec.yaml文件中使用Custom Floating Action Button's Location，请添加以下内容：

dependencies:
  custom_floating_action_button_location: ^0.0.1