Common Widgets and Controls

QML Widgets and Controls

This is a list of common widgets and controls available with Felgo. Many of those components are also used in examples in the documentation topics on the left. In addition to the Felgo controls, you can also use the Qt Quick Controls and apply custom styling.

The component documentations also contain examples like this:

 import Felgo

 App {

   NavigationStack {

     AppPage {
       title: "Icons"

       // Felgo contains the FontAwesome icon font to display icons
       AppIcon {
         anchors.centerIn: parent
         iconType: IconType.heart
       }
     }
   }
 }

Native Widgets and Features with NativeUtils

The NativeUtils component provides additional convenient access to several native device features and widgets.

Below is a list if the most important methods from NativeUtils:

How do I build custom QML Items?

Each .qml file of your project is an own reusable QML Component. The specified root QML Item determines the base component, which your new item extends. The new QML type can then add properties, signals and functions, which form the public interface of the component.

To define the layout for the item, add some child elements and position them in the view. Each child element may also be extended with new features and properties directly where it is used. You do not require to create an own QML Item to make small additions to a single item instance in your UI.

The following example shows a clickable CustomButton.qml component with a background and text. Once imported, you can use the new type in your app:

 import Felgo
 import "relative-path-to-directory-of-custom-button"

 App {
   CustomButton {
     anchors.centerIn: parent

     // new count property only for this button instance
     property int count: 0

     text: "You clicked "+count+" times."
     backgroundColor: "yellow"
     onClicked: count++
   }
 }

 import QtQuick

 // CustomButton extends Item, which is the base type for all UI elements
 Item {
   // the default (implicit) size is based on the size of the child text element
   // the width and height thus depend on the actual text value
   implicitWidth: textItem.implicitWidth
   implicitHeight: textItem.implicitHeight

   // public properties and signals
   property color backgroundColor: "green"
   property string text: "Click Me!"
   signal clicked()

   // child elements
   Rectangle {
     anchors.fill: parent
     color: parent.backgroundColor
   }

   Text {
     id: textItem // id for referencing this text item within the component
     text: parent.text
     anchors.centerIn: parent
   }

   // handle touch/click and fire signal when a click happens
   MouseArea {
     anchors.fill: parent
     onClicked: parent.clicked() // emits clicked signal of CustomButton
   }
 }