CODEWITHSUNDEEP
qtqml
user52366
user52366

Reputation: 1137

Access element in other QML file

I am trying to access items that are in a Repeater, using JavaScript. This works as long as everything is in a single QML file. I understand that, when I split things into two files, the id of the Repeater moves out of the scope of my script.

What I don't understand is how I best solve this problem, since I cannot export the id as property.

Here is a MWE with two files:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2

Window {
  id: root
  visible: true
  width: 640
  height: 480

  ColumnLayout {
    Mwe2 {}

    Button {
      text: "Test"
      onClicked: {        
        console.log("Clicked");
        rect.itemAt(1).color = 'yellow';  # <- out of scope
      }
    }
  }
}

File Mwe2.qml

import QtQuick 2.9
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2

RowLayout {
   spacing: 2
   Repeater {
       id: rect
       model: 3
       Rectangle {
       color: 'red'
       width: 50
       height: 20
       }
  }
}

Upvotes: 1

Views: 1153

Answers (1)

eyllanesc
eyllanesc

Reputation: 243975

As you indicate, the ids have the scope of the qml file, so if you want to access those elements you must expose it through a property, function, etc. of the top level of the qml. In this case for simplicity I will use an alias.

import QtQuick 2.9
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2

RowLayout {
    property alias repeater: rect

    spacing: 2
    Repeater {
        id: rect
        model: 3
        Rectangle {
            color: 'red'
            width: 50
            height: 20
        }
    }
}
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2

Window {
    id: root
    visible: true
    width: 640
    height: 480

    ColumnLayout {
        Mwe2 {
            id: mwe2
        }
        Button {
            text: "Test"
            onClicked: {        
                console.log("Clicked")
                mwe2.repeater.itemAt(1).color = "yellow"
            }
        }
    }
}

Upvotes: 1

Related Questions