如何在Qt Quick的ListModel中创建动态属性绑定？

针对你遇到的ListModel无法绑定属性、append的值不随foo更新的问题，有以下几种实用方案：

方案一：直接在Delegate中绑定foo（最简洁） #

如果所有矩形的宽度都需要跟随foo变化，完全不需要在ListModel中存储width值，直接在delegate里绑定foo即可：

import QtQuick 2.0
import QtQuick.Controls

Window {
    width: 400
    height: 300
    visible: true
    property int foo: 10

    ListModel {
        id: listModel
        // 不需要存储width属性
    }

    Row {
        anchors.top: parent.top
        Repeater {
            id: repeater
            model: listModel

            delegate: Rectangle {
                width: foo // 直接绑定到foo
                height: 50
                color: "green"
                spacing: 5 // 加个间距方便区分
            }
        }
    }
    Button {
        text: "add item"
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: {
            listModel.append({}) // 只需要添加空项即可
        }
    }
    // 测试foo变化的按钮
    Button {
        text: "increase foo"
        anchors.top: parent.top
        anchors.right: parent.right
        onClicked: foo += 10
    }
}

方案二：区分绑定与自定义宽度（灵活场景） #

如果需要部分矩形绑定foo，部分使用自定义宽度，可以在model中存储一个标记位，在delegate中判断：

import QtQuick 2.0
import QtQuick.Controls

Window {
    width: 400
    height: 300
    visible: true
    property int foo: 10

    ListModel {
        id: listModel
    }

    Row {
        anchors.top: parent.top
        Repeater {
            id: repeater
            model: listModel

            delegate: Rectangle {
                // 根据model标记决定宽度来源
                width: model.isBoundToFoo ? foo : model.customWidth
                height: 50
                color: model.isBoundToFoo ? "green" : "blue"
                spacing: 5
            }
        }
    }
    Button {
        text: "add bound item"
        anchors.top: parent.top
        anchors.left: parent.left
        onClicked: {
            listModel.append({isBoundToFoo: true})
        }
    }
    Button {
        text: "add custom item"
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: {
            listModel.append({isBoundToFoo: false, customWidth: 80})
        }
    }
    Button {
        text: "increase foo"
        anchors.top: parent.top
        anchors.right: parent.right
        onClicked: foo += 10
    }
}

方案三：动态创建属性绑定（针对需在model中存储绑定的场景） #

如果必须在ListModel中存储绑定关系，可以使用Qt.binding()函数动态创建绑定，这样model中的width会跟随foo自动更新：

import QtQuick 2.0
import QtQuick.Controls

Window {
    width: 400
    height: 300
    visible: true
    property int foo: 10

    ListModel {
        id: listModel
    }

    Row {
        anchors.top: parent.top
        Repeater {
            id: repeater
            model: listModel

            delegate: Rectangle {
                width: model.width
                height: 50
                color: "green"
                spacing: 5
            }
        }
    }
    Button {
        text: "add item"
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: {
            // 先添加空项，获取索引后设置绑定属性
            const itemIndex = listModel.append({})
            listModel.setProperty(itemIndex, "width", Qt.binding(() => foo))
        }
    }
    Button {
        text: "increase foo"
        anchors.top: parent.top
        anchors.right: parent.right
        onClicked: foo += 10
    }
}

内容的提问来源于stack exchange，提问作者Kamichanw