An Easy Cross-Platform Floating Action Menu using Qt/QML

• Download source - 713.3 KB

Introduction

I have created an easy to use  C++/Qt/Qml Floating Action Menu, 'fam' component, which provides the ability to add Floating Actions Menus to a Qt/Qml cross-platform project. Floating Actions Menus  were introduced in  Material Design. When using this component in a Qt project, one or more Floating Actions Menus can be added. Each menu can contain zero or more action buttons. These are a screenshot of an Android app and a WinRt (Universal) app with multiple Floating Action Menus.

Background

The platform Qt has been developed for 20+ years, remember Trolltech. Qt is a C++ cross-platform application framework that gives Qt developers the ability to build native applications on mobile, embedded, and desktop devices. Qt is used across multiple industries including, industrial automation systems, enterprise applications, medical, aerospace and defense, oil and gas, entertainment, in-vehicle infotainment, TV and set-top boxes, mobile and consumer devices.  They have created a robust declarative language called QML If you are unfamiliar with Qt/Qml, I have blog entry at  http://26apps.blogspot.com/2017/01/getting-started-with-qt.html.

Using the code

The source code is included with this article and also can be found here on GitHub. In the source code, the Floating Action Menu is named 'fam'.   In addition to the 'fam' component, there are 2 example projects included. This  Floating Actions Menu can be added to your application easily.  The following is a description on how to add the FloatingActionMenu to a C++/Qt project.

• In Qt Creator, select project type, then select Next. Name the project and select Next. Set the minimum Qt project to version 5.8,  and select Next.  Select the "kit",  i.e. platforms, to create. You can include any / all platforms that you are able to build.  Since I am developing on a Windows system and also have Android Studio installed, I selected Android, Windows desktop, and Windows RT(Store apps). Verify the new app builds and runs successfully.

• Now it's time to add the 'fam' component to the project.  Copy the 'fam' folder into the project folder. Add the 'fam' component by selecting the project's menu item "Add Exisiting Directory..." as shown here.  

• Be sure the project Headers and Sources include the 'fam' files and that  Resources' prefix is named 'fam'. You also need to update your project file as shown.

• Changes to main.cpp are needed to include FloatingActionsMenu support: include the required headers and initialize the FloatingActions as shown below. You can also refer to the sample apps. Once again, verify the app builds and runs successfully.

• Now you are ready to add FloatingActionsMenus to the UI.  First import the 'fam' component.into the Qml. Next, add the FloatingActionsMenus signals as you see here.

• To add a FloatingActionsMenus without actions buttons, add the following to the Qml file. Also, add a line to support for the button selection, See below.  Run the app.  The FloatingActionsMenus displays at the bottom right position in the app window which is default location of FloatingActionsMenu.  

• The code complete feature of Qt Creator assists with the properties available for the FloatingActionsMenus.  In addition to the properties inherited from the Qml Item, the other available properties are described in fam/floatingactionmenu.hpp.

• An example of a more complete FloatingActionsMenu is below.  It illustrates how the Action Menu's labels can be hidden by setting the width  to zero and how the FloatingActionsMenu icon can be assigned.  The FloatingActionsMenu buttons can be defined in the Qml using the ListModel.

• The Action Button properties' are described in floatingactionbutton.hpp.

• Next, we will add a C++ FloatingActionsMenu. From either example project, copy the files floatingactionsbottomright.cpp, floatingactionsbottomright.hpp, edit.png, add.png, and delete.png, into your project. Note FloatingActionsBottomRight is derived from FloatingActions. Then add C++ files to  the qmake (.pro) file and the image files to the resource collection file (.qrc) file.  Update main.cpp to include FloatingActionsBottomRight support as shown below. In the source file, floatingactionsbottomright.cpp, it may be necessary to update the references to the .png menu button images url's. 

• In the Qml file, add the menu as shown. Verify the new app builds and runs successfully.

As you have seen, this Cross-platform Floating Action Menu usage is similar to the other Qml components.

Points of Interest

By running the two examples, you can quickly learn how easy it is to add FloatingActionsMenus to your Qt/Qml cross-platform applications.

The source code is included with this article and also can be found here on GitHub.

History