如何一步步在MAUI中实现一个悬浮操作按钮（FAB）的功能？

本文共计1877个文字，预计阅读时间需要8分钟。

一、前言+MAUI，跨平台的GUI框架，基本介绍本文不再赘述。话不多说，既然可以跨平台，那么我们就来实现一个在移动端非常常用的控件：悬浮操作按钮（Floating Action Button，简称FAB）。

一、前言

MAUI，跨平台的 GUI 框架，基本介绍本文不再赘述。

话不多说，既然可以跨平台，那么我们就来实现一个在移动端很常用的控件：悬浮操作按钮（FAB，Floating Action Button）。

本文属于新手向、保姆级教程，大佬们请一笑而过。

相信看完的你，一定会有所收获！

本文地址：www.cnblogs.com/lesliexin/p/16416656.html

---

二、实现原理

原理很简单：将界面分为“两层”，下层是滚动界面，上层是悬浮按钮。

---

三、一步步实现 （一）创建 MAUI 应用项目

（本文使用的是：VS2022 Preview）
启动VS，按照流程提示，创建 MAUI 应用项目。

在创建成功后，会自带一些代码，可以编译运行体验一下。

（二）清空无关代码

这些自带的代码，几乎都是我们用不上的，所以我们对代码进行一下清理。清理后的代码如下。

1，前台 XAML 代码。

2，后台 CS 代码。

（三）布局方式选择

首先，悬浮按钮的位置是在屏幕的右下角，并不随着屏幕内容的滚动而变化位置。
所以，我们要使用用“绝对坐标”的方式，让悬浮按钮固定在右下角。