Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Felgo Live Code Reloading: Web Editor

Run this example on your Android and iOS phone now, with the Felgo Live Scripting mobile app!

import QtQuick 2.5 import Felgo 3.0 App { Navigation { navigationMode: navigationModeDrawer NavigationItem { title: "Page" icon: IconType.square NavigationStack { Page { title: "Page" Rectangle { // Use safeArea item of Page for anchoring custom layouts anchors.fill: parent.safeArea color: "#f04e26" } AppButton { text: "Bottom Button" anchors.horizontalCenter: parent.horizontalCenter // Anchor an item to the bottom safe area anchors.bottom: parent.safeArea.bottom } } } } NavigationItem { title: "Custom Bottom Bar" icon: IconType.minus NavigationStack { Page { title: "Page" // This would be your custom bottom bar Rectangle { color: Theme.colors.tintColor width: parent.width // Use your content height and add the bottom safe area height: dp(50) + nativeUtils.safeAreaInsets.bottom // Anchor the whole bar to the very bottom anchors.bottom: parent.bottom } } } } NavigationItem { title: "List & Flickable" icon: IconType.list NavigationStack { Page { title: "List & Flickable" AppListView { width: parent.width // This is now applied by default already bottomMargin: nativeUtils.safeAreaInsets.bottom model: 30 delegate: AppListItem { text: "Item " + index } } } } } } }

1. Download Felgo Live Scripting app

2. Open the app and add the displayed Dev ID here.

QML Hot Reload on all Platforms

With Felgo Live, you can reload code changes in real-time on any connected device. While this web editor is just for demonstration purposes, you can use hot reloading also for development on your desktop.

Download the Felgo Developer App app to run your code on Android and iOS, from Windows, macOS or Linux.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded