从另一个 QML 设置 QML 属性答案

【问题标题】：Set QML Property from another QML从另一个 QML 设置 QML 属性
【发布时间】：2017-02-27 11:41:25
【问题描述】：

我有 2 个 qml 文件。

我想从第一个 qml 文件中设置第二个 qml fromperty。

**first.qml**

var cmponent = Qt.createComponent("second.qml");
    var newObj = cmponent.createObject(swipeView);
    newObj.pageIndex = i;
    swipeView.insertItem(swipeView.currentIndex+i,newObj)

并插入到 SwipeView。

其中，'pageIndex' 是第二个 qml 的整数属性。在第二个 qml 文件中，我有一个带有单元格的 GridLayout。我需要根据这个动态的pageIndex属性显示单元格内容

second.qml

声明了属性。

 property int pageIndex: 0
    onPageIndexChanged:{
        console.log("onPageIndexChanged :" +pageIndex)
        home_grid.update()

    }

onPageIndexChanged 方法被触发，但我想根据属性值设置网格单元格。

问题是组件初始化时

var cmponent = Qt.createComponent("second.qml");

单元格被加载到 GridLayout 中。

我怎样才能重新引导/解决这个问题。

【问题讨论】：

1：为什么要使用 JS-Functions 创建对象？ 2：你的 GridLayout 在哪里？你想在那里显示什么单元格？不能用带有索引的GridView作为模型吗？
1.我想动态创建一个视图。基于 ListModel 计数。每个视图都有最大元素 6 的网格。示例：模型有 7 个元素，然后在 firstView 中显示 6 个元素，其余 1 个在 sendView 上显示，并使用 swipeView 切换这些视图。 2.“GridLayout”在另一个qml文件（second.qml）中。每个单元格/元素从基于模型的值显示在网格上。
应该可以在多个视图中使用一个ListModel。所以我建议使用GridView 而不是GridLayout。然后，您可以在此 GridView 的代表中使用“魔术”变量 index 来满足您的目的。

标签： qt qml components grid-layout

【解决方案1】：

我想你想要的是这样的：

（我用我的例子来回答你的第一个问题）它应该说明我的 cmets。当然，您可以将不同的视图放在不同的文件中。创建对象时，您只需将相同的模型传递给两者。

ListModel {
    id: lm
    ListElement { width: 40; height: 40 }
    [...]
    ListElement { width: 40; height: 40 }
}

SwipeView {
    width: 200
    height: 800
    clip: true
    currentIndex: 0

    Repeater {
        model: Math.ceil(lm.count / 6)
        delegate:            ListView {
            width: 200
            height: 800
            property int viewIndex: index
            model: DelegateModel {
                model: lm
                groups: DelegateModelGroup { name: 'filter' }
                Component.onCompleted: {
                    for (var i = viewIndex * 6; i < lm.count && i < (viewIndex * 6) + 6; i++) {
                        items.setGroups(i, 1, ['items', 'filter'])
                    }
                }

                filterOnGroup: 'filter'

                delegate: Rectangle {
                    width: 180
                    height: 30
                    border.width: 1
                    Text {
                        anchors.centerIn: parent
                        text: index
                    }
                }
            }
        }
    }
}

GridView {
    clip: true
    x: 300
    width: 600
    height: 600
    model: lm

    delegate: TestObj {
    }
}

这是代表TestObj的代码

Rectangle {
    width: model.width
    height: model.height
    property alias text: myText.text
    Text {
        id: myText
        anchors.centerIn: parent
        text: index
    }
}

当然你也可以写：

    delegate: TestObj {
        width: model.width; height: model.height; text: index
    }

这将最小化您的第二个 QML 文件的依赖关系。

【讨论】：

在 GridItem 中，我必须根据一些条件条件显示很多项目。所以我为 Grid Item 创建了一个单独的 QML。
这取决于你。如您所见，我也这样做了，使用 TestObj.qml