使用 Qt/QML 构建易于使用的跨平台浮动操作菜单
4.60/5 (4投票s)
一个易于使用的 C++/Qt/Qml 浮动操作菜单组件，能够为 Qt/Qml 跨平台项目添加浮动操作菜单。
引言
我创建了一个易于使用的 C++/Qt/Qml 浮动操作菜单组件，“fam”组件，它能够为 Qt/Qml 跨平台项目添加浮动操作菜单。浮动操作菜单最初是在 Material Design 中引入的。在 Qt 项目中使用此组件时，可以添加一个或多个浮动操作菜单。每个菜单可以包含零个或多个操作按钮。这是 Android 应用和 WinRt (通用) 应用的截图，其中包含多个浮动操作菜单。
背景
Qt 平台已经开发了 20 多年，还记得 Trolltech 吗？Qt 是一个 C++ 跨平台应用程序框架，它使 Qt 开发人员能够在移动、嵌入式和桌面设备上构建原生应用程序。Qt 被广泛应用于多个行业，包括工业自动化系统、企业应用程序、医疗、航空航天和国防、石油和天然气、娱乐、车载信息娱乐、电视和机顶盒、移动和消费类设备。他们创建了一个强大的声明性语言 QML。如果您不熟悉 Qt/Qml，我有一篇博客文章，网址是：http://26apps.blogspot.com/2017/01/getting-started-with-qt.html。
使用代码
源代码包含在本文章中，也可以在 GitHub 上找到：此处。在源代码中，浮动操作菜单的名称是“fam”。除了“fam”组件之外，还包含 2 个示例项目。可以将此浮动操作菜单轻松添加到您的应用程序中。以下是如何将 FloatingActionMenu 添加到 C++/Qt 项目的说明。
- 在 Qt Creator 中，选择项目类型，然后选择“下一步”。命名项目并选择“下一步”。将最低 Qt 项目版本设置为 5.8，然后选择“下一步”。选择要创建的“工具包”（即平台）。您可以包含您能够构建的任何/所有平台。由于我是在 Windows 系统上开发，并且还安装了 Android Studio，因此我选择了 Android、Windows 桌面和 Windows RT（商店应用）。验证新应用能够成功构建和运行。
- 现在是时候将“fam”组件添加到项目中了。将“fam”文件夹复制到项目文件夹中。通过选择项目菜单项“添加现有目录...”来添加“fam”组件，如下所示。
- 请确保项目头文件和源文件包含“fam”文件，并且“资源”前缀命名为“fam”。您还需要像下面这样更新您的项目文件。
- 需要对 main.cpp 进行更改，以包含 FloatingActionsMenu 支持：包含必需的头文件并初始化 FloatingActions，如下所示。您也可以参考示例应用程序。再次验证应用程序能够成功构建和运行。
- 现在您可以将 FloatingActionsMenus 添加到 UI 中了。首先，将“fam”组件导入到 Qml 中。接下来，添加 FloatingActionsMenus 信号，如下所示。
- 要添加一个没有操作按钮的 FloatingActionsMenus，请在 Qml 文件中添加以下内容。另外，添加一行以支持按钮选择，请参见下文。运行应用程序。FloatingActionsMenus 显示在应用窗口的右下角位置，这是 FloatingActionsMenu 的默认位置。
- Qt Creator 的代码完成功能有助于处理 FloatingActionsMenus 可用的属性。除了从 Qml Item 继承的属性之外，其他可用属性在 fam/floatingactionmenu.hpp 中进行了描述。
- 下面是一个更完整的 FloatingActionsMenu 示例。它说明了如何通过将宽度设置为零来隐藏操作菜单的标签，以及如何分配 FloatingActionsMenu 图标。FloatingActionsMenu 按钮可以使用 ListModel 在 Qml 中定义。
- 操作按钮的属性在 floatingactionbutton.hpp 中进行了描述。
- 接下来，我们将添加一个 C++ FloatingActionsMenu。从任一示例项目中，将文件 floatingactionsbottomright.cpp、floatingactionsbottomright.hpp、edit.png、add.png 和 delete.png 复制到您的项目中。注意 FloatingActionsBottomRight 是从 FloatingActions 派生的。然后将 C++ 文件添加到 qmake (.pro) 文件中，并将图像文件添加到资源集合文件 (.qrc) 中。更新 main.cpp 以包含 FloatingActionsBottomRight 支持，如下所示。在源文件 floatingactionsbottomright.cpp 中，可能需要更新对 .png 菜单按钮图像 URL 的引用。
- 在 Qml 文件中，像这样添加菜单。验证新应用能够成功构建和运行。
正如您所见，这个跨平台浮动操作菜单的使用与其他 Qml 组件类似。
关注点
通过运行这两个示例，您可以快速了解将 FloatingActionsMenus 添加到 Qt/Qml 跨平台应用程序中的简便性。
源代码包含在本文章中，也可以在 GitHub 上找到：此处。
历史