Controls¶

Import: import QGroundControl.Controls

AMC provides themed QML controls that automatically adapt to the current color scheme. Use these instead of raw Qt Quick Controls for a consistent look.

QGCButton¶

A styled button with theming, optional icon, and configurable appearance.

Properties¶

Property	Type	Default	Description
`primary`	`bool`	`false`	Primary button styling (uses `primaryButton` palette color)
`pointSize`	`real`	`ScreenTools.defaultFontPointSize`	Text point size
`custFontFamily`	`string`	`ScreenTools.normalFontFamily`	Font family
`showBorder`	`bool`	`true`	Show border
`iconLeft`	`bool`	`false`	Place icon on the left side
`showIconOverlay`	`bool`	`true`	Show icon overlay
`backRadius`	`real`	--	Background corner radius
`backgroundColor`	`string`	themed	Background color
`heightFactor`	`real`	`0.5`	Height multiplier
`backgroundOpacity`	`real`	`1.0`	Background opacity
`padding`	`double`	--	Custom padding
`toggled`	`bool`	`false`	Toggled state
`highlightBackgroundColor`	`color`	themed	Highlight background
`highlightFontColor`	`color`	themed	Highlight text color
`borderColor`	`color`	themed	Border color

Example¶

import QGroundControl.Controls

Row {
    spacing: ScreenTools.defaultFontPixelWidth

    QGCButton {
        text: qsTr("Cancel")
        onClicked: cancel()
    }

    QGCButton {
        text: qsTr("Apply")
        primary: true
        onClicked: apply()
    }
}

QGCLabel¶

A text label with AMC theming. Extends the standard Text type.

Properties¶

Inherits all Text properties. Key defaults:

Property	Default
`font.pointSize`	`ScreenTools.defaultFontPointSize`
`font.family`	`ScreenTools.normalFontFamily`
`color`	`qgcPal.text`

Example¶

import QGroundControl.Controls

QGCLabel {
    text: qsTr("Altitude")
    font.pointSize: ScreenTools.largeFontPointSize
    font.family: ScreenTools.demiboldFontFamily
    font.bold: true
}

QGCComboBox¶

A themed dropdown combo box. It extends the standard QtQuick ComboBox, so model, currentIndex, currentText, and the onActivated(index) signal all work as usual.

Properties¶

Property	Type	Default	Description
`centeredLabel`	`bool`	`false`	Center the display text
`alternateText`	`string`	--	Override the displayed text (shown instead of `currentText` when non-empty)

Example¶

import QGroundControl.Controls
import QGroundControl.Plugin

QGCComboBox {
    model: MyPluginData.dataSourceLabels
    currentIndex: MyPluginData.selectedDataSource
    onActivated: (index) => { MyPluginData.selectedDataSource = index }
}

QGCTextField¶

A text input field with optional units display and help button.

Properties¶

Property	Type	Default	Description
`showUnits`	`bool`	`false`	Show units label
`showHelp`	`bool`	`false`	Show help button
`unitsLabel`	`string`	--	Units text (e.g., "m/s")
`extraUnitsLabel`	`string`	--	Additional units text
`textColor`	`color`	`qgcPal.textFieldText`	Text color

Signals¶

Signal	Description
`helpClicked()`	Emitted when the help button is clicked

Example¶

import QGroundControl.Controls

QGCTextField {
    text: "100"
    showUnits: true
    unitsLabel: "m"
    onEditingFinished: applyValue(text)
}

QGCCheckBox¶

A checkbox with AMC theming.

Properties¶

Property	Type	Default	Description
`textColor`	`color`	`qgcPal.text`	Text color
`textFontPointSize`	`real`	`ScreenTools.defaultFontPointSize`	Text size
`textBold`	`bool`	`false`	Bold text
`radius`	`real`	--	Border radius

Example¶

import QGroundControl.Controls

QGCCheckBox {
    text: qsTr("Enable notifications")
    checked: MyPluginData.notificationsEnabled
    onClicked: MyPluginData.notificationsEnabled = checked
}

QGCSwitch¶

A toggle switch control.

Properties¶

Inherits standard Switch properties. Automatically themed: green when checked, grey when unchecked.

Example¶

import QGroundControl.Controls

QGCSwitch {
    checked: MyPluginData.enabled
    onClicked: MyPluginData.enabled = checked
}

CustomSwitch¶

A styled switch with an integrated text label.

Properties¶

Property	Type	Default	Description
`checked`	`bool`	`true`	Checked state
`text`	`string`	--	Label text

Example¶

import QGroundControl.Controls

CustomSwitch {
    text: qsTr("Auto-refresh")
    checked: MyPluginData.autoRefresh
    onClicked: MyPluginData.autoRefresh = checked
}

QGCFlickable¶

A flickable area with themed scroll indicators.

Properties¶

Property	Type	Default	Description
`indicatorColor`	`color`	`qgcPal.text`	Scroll indicator color
`indicatorVerticalWidth`	`real`	`2`	Vertical indicator width
`indicatorHorizontalHeight`	`real`	`2`	Horizontal indicator height
`verticalIndicatorAlwaysOn`	`bool`	`false`	Always show vertical indicator

Example¶

import QGroundControl.Controls

QGCFlickable {
    width: 300
    height: 400
    contentHeight: column.height

    Column {
        id: column
        // long content here
    }
}

QGCColoredImage¶

An image that can be tinted with a solid color. Useful for monochrome icons that need to adapt to the theme.

Example¶

import QGroundControl.Controls

QGCColoredImage {
    width: 24
    height: 24
    source: Qt.resolvedUrl("../img/icon.svg")
    color: qgcPal.text
}

QGCRadioButton¶

A styled radio button with configurable text appearance.

Properties¶

Property	Type	Default	Description
`textColor`	`color`	`qgcPal.text`	Text color
`textBold`	`bool`	`false`	Bold text
`textFontPointSize`	`real`	`ScreenTools.defaultFontPointSize`	Text size

Example¶

import QGroundControl.Controls

Column {
    QGCRadioButton {
        text: qsTr("Option A")
        checked: true
    }
    QGCRadioButton {
        text: qsTr("Option B")
    }
}

QGCSlider¶

A slider with optional zero-centered indicator and value display.

Properties¶

Property	Type	Default	Description
`zeroCentered`	`bool`	`false`	Show indicator bar centered at zero
`displayValue`	`bool`	`false`	Show current value in the handle
`indicatorBarVisible`	`bool`	`false`	Show the indicator bar

Example¶

import QGroundControl.Controls

QGCSlider {
    from: -100
    to: 100
    value: 0
    zeroCentered: true
    displayValue: true
}

QGCListView¶

A ListView with themed scroll indicators. Same indicator pattern as QGCFlickable.

Properties¶

Property	Type	Default	Description
`indicatorColor`	`color`	`qgcPal.text`	Scroll indicator color
`indicatorVerticalWidth`	`real`	`2`	Vertical indicator width
`indicatorVerticalRadius`	`real`	`0`	Vertical indicator corner radius
`indicatorVerticalSizeFactor`	`real`	`1`	Vertical indicator size multiplier
`indicatorHorizontalHeight`	`real`	`2`	Horizontal indicator height
`verticalIndicatorAlwaysOn`	`bool`	`false`	Always show vertical indicator

Example¶

import QGroundControl.Controls

QGCListView {
    width: 300
    height: 400
    model: myModel
    delegate: QGCLabel {
        text: modelData
    }
}

QGCGroupBox¶

A styled group box with palette integration. Wraps the standard GroupBox with AMC theming.

Example¶

import QGroundControl.Controls

QGCGroupBox {
    title: qsTr("Connection Settings")

    Column {
        spacing: ScreenTools.defaultSpacing
        QGCTextField { text: "192.168.1.1" }
        QGCTextField { text: "14550" }
    }
}

SectionHeader¶

A collapsible section header with expand/collapse animation. Bind the checked property to control the visibility of the section's content below it.

Properties¶

Property	Type	Default	Description
`text`	`string`	--	Header text
`checked`	`bool`	`true`	Expanded state (true = expanded)
`showSpacer`	`bool`	`true`	Show spacer above the header
`showSeparator`	`bool`	`true`	Show separator line

Example¶

import QGroundControl.Controls

Column {
    SectionHeader {
        id: advancedHeader
        text: qsTr("Advanced Settings")
    }

    Column {
        visible: advancedHeader.checked
        spacing: ScreenTools.defaultSpacing

        QGCCheckBox { text: qsTr("Verbose logging") }
        QGCCheckBox { text: qsTr("Debug mode") }
    }
}

QGCPopupDialog¶

A modal dialog with title bar and configurable buttons.

Properties¶

Property	Type	Description
`title`	`string`	Dialog title
`buttons`	`var`	Button configuration

Signals¶

Signal	Description
`hideDialog()`	Close the dialog

Example¶

import QGroundControl.Controls

QGCPopupDialog {
    title: qsTr("Confirm Action")

    Column {
        spacing: ScreenTools.defaultSpacing

        QGCLabel { text: qsTr("Are you sure?") }

        Row {
            spacing: ScreenTools.defaultFontPixelWidth
            QGCButton {
                text: qsTr("Cancel")
                onClicked: hideDialog()
            }
            QGCButton {
                text: qsTr("OK")
                primary: true
                onClicked: {
                    doAction()
                    hideDialog()
                }
            }
        }
    }
}

QGCMenu / QGCMenuItem¶

Styled context menu and menu items with palette integration.

QGCMenuItem properties¶

Property	Type	Default	Description
`custRadius`	`double`	`0`	Item corner radius

Example¶

import QGroundControl.Controls

QGCButton {
    text: qsTr("Options")
    onClicked: optionsMenu.popup()

    QGCMenu {
        id: optionsMenu

        QGCMenuItem {
            text: qsTr("Refresh")
            onTriggered: MyPluginData.refresh()
        }
        QGCMenuItem {
            text: qsTr("Reset")
            onTriggered: MyPluginData.reset()
        }
    }
}

CustomBusyIndicator¶

A themed spinning loading indicator.

Properties¶

Property	Type	Default	Description
`color`	`color`	themed	Indicator color

Example¶

import QGroundControl.Controls

CustomBusyIndicator {
    width: 48
    height: 48
    running: MyPluginData.loading
}

CustomProgressBar¶

A themed progress bar using palette colors (grey background, green fill).

Example¶

import QGroundControl.Controls

CustomProgressBar {
    width: parent.width
    from: 0
    to: 100
    value: MyPluginData.progress
}

QGCHoverButton¶

A square icon button with hover and highlight states, animated color transitions, and an optional glow effect. The host sizes it — do not set width or height yourself. Used for all FlyView tool strip buttons.

Properties¶

Property	Type	Default	Description
`backgroundColor`	`color`	`qgcPal.button`	Normal background color
`hoverBackgroundColor`	`color`	`qgcPal.hoverColor`	Hover background color
`highlightBackgroundColor`	`color`	`qgcPal.buttonHighlight`	Pressed / checked background color
`disabledBackgroundColor`	`color`	`qgcPalDisabled.button`	Disabled background color
`fontColor`	`color`	`qgcPal.buttonText`	Normal icon / text color
`highlightFontColor`	`color`	`qgcPal.buttonHighlightText`	Pressed / checked icon / text color
`disabledFontColor`	`color`	`qgcPalDisabled.buttonText`	Disabled icon / text color
`borderColor`	`color`	`qgcPal.windowShadeDark`	Border color
`radius`	`real`	--	Background corner radius — set to `height / 2` for a circle
`imageSource`	`url`	--	Button icon
`imageScale`	`real`	`0.6`	Icon size as a fraction of the button size
`borderWidth`	`real`	`0`	Border width in pixels
`glowOnHighlight`	`bool`	`false`	Show a glow effect on the icon when highlighted

Recommended tool strip pattern¶

Use these exact values to match the appearance of the built-in FlyView tool strip buttons:

import QGroundControl.Controls
import QGroundControl.Palette

QGCHoverButton {
    flat:                       false
    radius:                     height / 2
    backgroundColor:            qgcPal.windowShadeDark
    disabledBackgroundColor:    qgcPal.windowShadeDark
    imageSource:                Qt.resolvedUrl("../img/my-icon.svg")

    onClicked: { /* open popup or trigger action */ }
}