如何捕捉QML组件完全布局的时刻?

出类拔萃

我在QML ApplicationWindow中有一个GridView,其中应填充一些项。

我使用JS函数“ placeItems”放置商品。但是问题是,当调用ApplicationWindow的Component.onCreated信号时,尚未布局GridView。例如,在ApplicationWindow的Component.onCreated中,GridView的x坐标等于-425。如果我稍后再调用同一函数-一切正常,并且GridView具有正确的坐标(= 75)。

我已经来回检查了Qt参考,还没有发现其他有用的信号(例如onLayouted或onLayoutComplete)。问题是何时调用“ placeItems”,以便ApplicationWindow中的GridView已经具有正确的坐标?

UPDATE1:要观察不良行为,只需在应用程序启动后单击File-> Start。它将把物品放置在正确的位置。

import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.1

ApplicationWindow {
    id: mainWindow

    width:1000
    height: 900
    color : "white"
    visible: true
    flags: Qt.Window

    function max (a,b) { return a>b ? a : b; }
    function min (a,b) { return a<b ? a : b; }

    property int sizeMin: width < height ? width : height

    property int dimField: sizeMin - 50
    property int dimCellSpacing: 3
    property int dimCell: (dimField / 5 ) - 1 - dimCellSpacing

    GridView {
        id: field
        anchors.centerIn: parent
        model: 20

        width: dimField
        height: dimField

        cellWidth: dimCell
        cellHeight: dimCell

        delegate: cell

        property var items: []

        function centerCell(column,row) {
            return {x: field.x + (column + 0.5) * cellWidth,
                y: field.y + (row + 0.5) * cellHeight}
        }

        function placeItem(name, col, row) {
            var c = centerCell(col,row)
            items[name].centerX = c.x
            items[name].centerY = c.y
        }

        function placeItems() {
            placeItem ("a", 3, 3)
            //placeItem ("b", 4, 4)
        }

    }

    Component.onCompleted: field.placeItems()

    Component {
        id: cell

        Rectangle {
            id: rectCell

            width: dimCell
            height: dimCell
            color: "lightgray"

            border.width: 3
            border.color: "brown"
        }
    }

    Rectangle
    {
        id: rectItemA

        property int dimItem: 100
        property int centerX: 0
        property int centerY: 0
        property int margin: 5
        property var cell: field.items["a"] = this
        border.color: "black"
        border.width: 3

        width: dimItem
        height: dimItem

        x: centerX - width/2
        y: centerY - height/2

        color: "red"
        opacity: 0.5
    }

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Start")
                onTriggered: field.placeItems();
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }
}
世界银行
    function placeItem(name, col, row) {
        items[name].anchors.horizontalCenter = field.left;
        items[name].anchors.verticalCenter = field.top;
        items[name].anchors.horizontalCenterOffset = (col + 0.5) * cellWidth;
        items[name].anchors.verticalCenterOffset = (row + 0.5) * cellHeight;
    }

关键是将元素锚定在网格视图中,然后根据您的计算将其移动。

顺便说一句,您知道QML内置了功能Math.min/Math.max吗?

编辑

还是更好,为什么不直接在rectItemA中定义绑定?

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何捕捉QML组件完全布局的时刻?

来自分类Dev

如何预测在QML中捕捉轻弹的好位置

来自分类Dev

Blazor,MatBlazor-如何捕捉MatSelect组件的值更改

来自分类Dev

具有Cordinator布局的操作栏不会“捕捉”到在部分更改Android上完全隐藏或完全显示

来自分类Dev

具有Cordinator布局的操作栏不会“捕捉”到在部分更改Android上完全隐藏或完全显示

来自分类Dev

DatePicker 反应组件上的时刻

来自分类Dev

如何动态销毁/删除QML组件?

来自分类Dev

如何在QML中移动矩形组件

来自分类Dev

Qml中重用组件的字段如何更改?

来自分类Dev

如何管理React Router组件的布局

来自分类Dev

如何根据布局获取容器组件?

来自分类Dev

如何将div包装/捕捉/调整为TETRIS样式的网格布局?

来自分类Dev

如何在强制布局中拖动时将svg元素捕捉到网格

来自分类Dev

如何将div包装/捕捉/调整为TETRIS样式的网格布局?

来自分类Dev

如何检测布局组件中加载了新的角度组件?

来自分类Dev

在错误404的情况下使用ngIf重用组件,可能吗?如何捕捉错误?

来自分类Dev

如何在QML中设计多层流体布局

来自分类Dev

如何在QML布局中给项目指定间距?

来自分类Dev

如何捕捉熊猫DataError?

来自分类Dev

QML表单布局

来自分类Dev

QML访问您的qml组件

来自分类Dev

如何在QML中动态添加组件?

来自分类Dev

如何将动态内容放入QML组件

来自分类Dev

QML QT5中如何显示分配的属性组件?

来自分类Dev

如何在运行时更改 QML 组件的样式?

来自分类Dev

Gridbag布局->如何阻止组件随窗口大小调整?

来自分类Dev

如何在父级布局中使用挖空组件视图?

来自分类Dev

如何将Ember组件的布局与输入元素组合

来自分类Dev

如何将进度条组件放在布局的顶部?

Related 相关文章

  1. 1

    如何捕捉QML组件完全布局的时刻?

  2. 2

    如何预测在QML中捕捉轻弹的好位置

  3. 3

    Blazor,MatBlazor-如何捕捉MatSelect组件的值更改

  4. 4

    具有Cordinator布局的操作栏不会“捕捉”到在部分更改Android上完全隐藏或完全显示

  5. 5

    具有Cordinator布局的操作栏不会“捕捉”到在部分更改Android上完全隐藏或完全显示

  6. 6

    DatePicker 反应组件上的时刻

  7. 7

    如何动态销毁/删除QML组件?

  8. 8

    如何在QML中移动矩形组件

  9. 9

    Qml中重用组件的字段如何更改?

  10. 10

    如何管理React Router组件的布局

  11. 11

    如何根据布局获取容器组件?

  12. 12

    如何将div包装/捕捉/调整为TETRIS样式的网格布局?

  13. 13

    如何在强制布局中拖动时将svg元素捕捉到网格

  14. 14

    如何将div包装/捕捉/调整为TETRIS样式的网格布局?

  15. 15

    如何检测布局组件中加载了新的角度组件?

  16. 16

    在错误404的情况下使用ngIf重用组件,可能吗?如何捕捉错误?

  17. 17

    如何在QML中设计多层流体布局

  18. 18

    如何在QML布局中给项目指定间距?

  19. 19

    如何捕捉熊猫DataError?

  20. 20

    QML表单布局

  21. 21

    QML访问您的qml组件

  22. 22

    如何在QML中动态添加组件?

  23. 23

    如何将动态内容放入QML组件

  24. 24

    QML QT5中如何显示分配的属性组件?

  25. 25

    如何在运行时更改 QML 组件的样式?

  26. 26

    Gridbag布局->如何阻止组件随窗口大小调整?

  27. 27

    如何在父级布局中使用挖空组件视图?

  28. 28

    如何将Ember组件的布局与输入元素组合

  29. 29

    如何将进度条组件放在布局的顶部?

热门标签

归档