Question

我有一个嵌套的QML组件层次结构，并且想在内部组件中设置一些值（例如项目的颜色）。

我想我需要做的是将参数传递给下一个内部组件，然后将这些数据的一部分转发给其子对象，依此类推，直到到达接收者为止。这将尊重封装的想法。

但是，我很难在QML / JS中实现它。首先，我不确定如何导出函数，以便可以从组件外部调用它（在var属性中？我尝试了此操作，但收到了“脚本元素外部的JavaScript声明”错误）。其次，我不确定如何为Repeater中的元素调用函数。最后，也许有一种更简单的方法可以完全实现这一目标？

这是一个MWE，传达了我正在努力实现的目标：

文件mwe.qml

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: m2
        }

        Button {
            text: "Test"
            onClicked: {
                var colors = [];
                var letters = '0123456789ABCDEF';
                for (var i = 0; i<12; i++) {
                    var color = '#';
                    for (var j = 0; j < 6; j++) {
                        color += letters[Math.floor(Math.random() * 16)];
                    }
                    colors.push(color);
                }
                console.log(colors);
                m2.setColor(colors);
                // call function in m2 with colors as argument
            }
        }
    }
}

文件Mwe2.qml：

import QtQuick.Layouts 1.2

RowLayout {
    spacing: 2
    // somehow export setColors... I tried var this does not work
    //property alias setColors: setColors_
    Repeater {
        id: rect
        model: 3
        ColumnLayout {
            Rectangle {
                color: 'red'
                width: 50
                height: 20
            }
            Mwe3 { id: m3}
        }
    }
    function setColors(colors) {
        // loops over repeater items, passing
        // slice of colors array to function in m3
    }
}

文件Mwe3.qml：

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

RowLayout {
    spacing: 2
    Repeater {
        id: rect2
        model: 4
        Rectangle {
            color: 'orange'
            width: 50
            height: 20
        }
    }
    // function that sets the colors in the repeater items,
    // using something like rect2.itemAt(i).child(0).color = ...
}

Answer 1

这是一种方式。请注意，我将ColumnLayout部分移到Mwe3.qml中以使其成为委托的一部分－这大大简化了访问。之后，这很简单，只需遍历转发器子代即可。 “ mwe1.qml”保持不变（除了修正注释中提到的“ setColor s ”拼写错误之外），所以我不发布它。

Mwe2.qml

import QtQuick 2.9
import QtQuick.Layouts 1.2

RowLayout {
    spacing: 2
    Repeater {
        id: rect
        model: 3
        delegate: Mwe3 { }
    }
    function setColors(colors) {
      // loops over repeater items, passing
      // slice of colors array to function in m3
      for (var i=0; i < rect.count; ++i)
        rect.itemAt(i).setColors(colors.slice(i, i+3));
    }
}

Mwe3.qml

import QtQuick 2.9
import QtQuick.Layouts 1.2

ColumnLayout {
    Rectangle {
        color: 'red'
        width: 50
        height: 20
    }
    RowLayout {
        spacing: 2
        Repeater {
            id: rect2
            model: 4
            delegate: Rectangle {
                color: 'orange'
                width: 50
                height: 20
            }
        }
    }

    function setColors(colors)
    {
      console.log(colors);
      for (var i=0; i < rect2.count && i < colors.length; ++i) {
        console.log(rect2.itemAt(i));
        rect2.itemAt(i).color = colors[i];
      }
    }
}

您可能还对使用数据模型的替代方法感兴趣。我在此处发布了一个这样的示例（也使用了它的颜色）：How can I get property in gridview which is Repeater's child

从QML组件导出功能，并访问Repeater

1 个答案: