I have an action bar with 4 action buttons that can resize, so buttons that overlap with the app name are not showing, and I have a secondary menu that shows zero or all of the actions depending on an int property. My problem is how do I set that int dynamically depending on which action buttons are showing.

If I set the visible property of the action buttons (so as to use visibleChildren.length of the action bar) then the QML seems to loop. If I don't use the visible property but instead set the icon source to an empty string, then how can I dynamically determine how many action buttons have an empty string?

I would appreciate suggestions on what might be the recommended way to do this in QML.

Thank you.

main.qml:

@import QtQuick 2.1
import QtQuick.Controls 1.0
import QtGraphicalEffects 1.0
import QtQuick.Window 2.1

ApplicationWindow {
property real scaleFactor: Screen.pixelDensity / 5.0
property int intScaleFactor: Math.max(1, scaleFactor)

width: 640; height: 480

property list<Action> actionsList: [
    Action { text: "Sightings"; iconSource: "qrc:/sightings"; onTriggered: image1.visible = !image1.visible },
    Action { text: "Alerts";    iconSource: "qrc:/alerts";    onTriggered: image1.visible = !image1.visible },
    Action { text: "Search";    iconSource: "qrc:/search";    onTriggered: image1.visible = !image1.visible }
]
property list<Action> moreActionsList: [
    Action { text: "About"; onTriggered: image1.visible = !image1.visible }
]

ActionBar {
    id: actionBar
    barHeight: slider.value
    actions: actionsList
    moreActions: moreActionsList
}

Image {
    id: image1 x: 270 y: 257
    width: 100 height: 100 source: "qrc:/drs"
}
Slider {
    id: slider
    anchors { topMargin: 150; top: parent.top; }
    minimumValue: 30 maximumValue : 150 value: 80
}

}
@

ActionBar.qml

@import QtQuick 2.1
import QtQuick.Controls 1.0
import QtGraphicalEffects 1.0

Rectangle {
// Android-style Action bar
property alias barHeight: actionBar.height
property list<Action> actions
property list<Action> moreActions

id: actionBar
height: 80
anchors { right: parent.right; left: parent.left; top: parent.top; }
Image {
    id: image2
    height: barHeight * 0.9; width: height
    anchors { leftMargin: 15; left: parent.left; verticalCenter: parent.verticalCenter; }
    source: "qrc:/drs"
}
Text {
    id: titletext
    text: "ApplicationName" color: "white" font.bold: true
    font.pixelSize: barHeight * 0.33
    anchors { leftMargin: barHeight / 5; left: image2.right; verticalCenter: parent.verticalCenter; }
}
property int actCount: 0
Row {
    id: actionsRow
    anchors { right: parent.right; verticalCenter: parent.verticalCenter; }
    Repeater {
        id: repeat
        model: actions
        ActionBarActionDelegate {
            // Does action icon overlap with the title text
            property bool isNoOverlap: ((titletext.x + titletext.width) < (actionsRow.x + actionsRow.children[index].x))
            iconHeight: barHeight * 0.9
            action: Action {
                // Have an enpty icon if it would overlap the title text
                iconSource: isNoOverlap ? modelData.iconSource : ""
                text: modelData.text
                onTriggered: { modelData.triggered(); }
            }
            // Disable actions that would overlap the title text
            isEnabled: isNoOverlap
        }
    }
    // Now the optional More options icon
    ActionBarActionDelegate {
        iconHeight: barHeight * 0.9
        action: Action { iconSource: "qrc:/more"; onTriggered: { console.log(actCount);
                overflowMenu.popup() }
        }
    }
}

Rectangle {
    // Action bar shadow
    id: actionBarShadow
    height: barHeight > 60 ? 5 : 2
    width: parent.width color: "darkgray" anchors { top: parent.bottom; }
}
property int overflowCount: 1 //actionsRow.visibleChildren.length

Menu {
    id: overflowMenu
    title: "Edit"

    Instantiator {
        id: inst
        model: actionsList
        MenuItem {
            text: modelData.text
            visible: (index < overflowCount)
            onTriggered: modelData.triggered()
        }
        onObjectAdded: overflowMenu.insertItem(index, object)
        onObjectRemoved: overflowMenu.removeItem(object)
    }

    MenuSeparator { visible: (overflowCount > 0) }

    MenuItem { text: "About"
        onTriggered: console.log("overflowCount =", overflowCount); }
}

}
@

ActionBarActionDelegate.qml

@import QtQuick 2.0
import QtQuick.Controls 1.1

Item {
property Action action
property alias iconHeight: actionButton.height
property alias isEnabled: actionButton.enabled

id: actionButton height: 70 width: height

Image {
    id: iconImage
    anchors.fill: parent
    source: action ? action.iconSource : ""
}
Rectangle {
    // Hint to show when icon is clicked
    id: iconClickedArea
    anchors.fill: parent
    color: "darkgray" opacity: 0
}
MouseArea {
    anchors.fill: parent
    onClicked: action.triggered()
    onEntered: iconClickedArea.opacity = action ? 0.5 : 0
    onExited:  iconClickedArea.opacity = 0
}

}
@