Accessing children in the repeater

gongdori

Hi all,

I'm new in Qt and I need your help. I instantiated 8 buttons using repeater and want to call a function whenever any of the buttons are pressed and pass the index as a parameter. I tried to declare aliases of the buttons using itemAt() and call a function when onClicked() occurs, but an error was thrown. It seems qt does not allow it...
How can I make it work?
Thanks,

gongdori

Repeater {
                   id: repeater_ae_set
                   model: 8
                   Button {
                       id: button_ae_set
                       text: qsTr("Set")
                       Layout.fillHeight: true
                       Layout.fillWidth: true

                   }

               }

ODБOï

Hi @gongdori
Property index is avalable inside Buttons (Repeater's children) .

For exemple you can create a signal or javascript function and call it inside buttons onClick

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Item{
    id:root
    signal clickIndexSignal(var i) // SIGNAL
    onClickIndexSignal:{ // SIGNAL handler
        console.log("button " + i + " clicked!")
    }

    function clickIndexFunction(i){
        return(console.log("button " + i + " clicked!"))
    }

    RowLayout{
               anchors.fill: parent

        Repeater{
            model : 8
            Button{
                Layout.fillWidth: true
                Layout.fillHeight: true
                text: "button" + index
                onClicked:{
                    clickIndexSignal(index)
                    clickIndexFunction(index)
                }
            }
        }
    }
}

LA

gongdori

Hi @LeLev
Thank you for your help. I tried to do what you recommended but I got an error saying "functions are not supported in Qt quick UI form (M222). It seems I need to setup alias for the buttons, but I could not do it. If you know how to do it, can you let me know please?
Thanks,

Gongdori

ODБOï

@gongdori hi,
In fact functions are not supported in Qt quick UI form. Sorry but i have never used UI files son can't help a lot with this.

You can create your reusable component, call it ButtonRow.qml

// ButtonRow.qml (same code)

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Item{
    id:root
    signal clickIndexSignal(var i) // SIGNAL
    onClickIndexSignal:{ // SIGNAL handler
        console.log("button " + i + " clicked!")
    }

    function clickIndexFunction(i){
        return(console.log("button " + i + " clicked!"))
    }

    RowLayout{
               anchors.fill: parent

        Repeater{
            model : 8
            Button{
                Layout.fillWidth: true
                Layout.fillHeight: true
                text: "button" + index
                onClicked:{
                    clickIndexSignal(index)
                    clickIndexFunction(index)
                }
            }
        }
    }
}

Then you can use that ButtonRow like this (in another .qml) :

ButtonRow{
 width: parent.width
 height : parent.height*0.2
}

If you want to create/instanciate a ButtonRow inside your ui.qml file, then use Designe mode,
on the top left Corner of Qt Creator you should see ButtonRow component that you have created.

I hope this can help you.

gongdori

Hi @LeLev,

Thank you again for your help. I'll try ButtonRow.qml soon! Out of curiosity, is there any other way to do the design without using UI form? I wonder what options I have.
Have a nice day.

Gongdori

ODБOï

@gongdori You are welcome!

@gongdori said in Accessing children in the repeater:

is there any other way to do the design without using UI form?

From what i understand, UIs let us separate logic from visual aspect , but i don't do that, i only use .qml files never *.ui.qml