如何让ListView项高度根据内部内容动态自适应？

你已经找对核心方向啦——用childrenRect.height让容器高度跟随内容，但还有几个关键细节调整后，就能完美实现你要的效果：

修正后的Delegate代码 #

Component { 
    id: sysNotificationsDelegate
    Rectangle { 
        anchors.left: parent.left 
        anchors.right: parent.right 
        height: childrenRect.height + 10 // 额外加10px上下内边距，可选
        color: "#eee"
        padding: 5 // 给文本四周留5px空白，提升视觉体验

        Text { 
            text: model.body 
            wrapMode: Text.WordWrap 
            // 给Text设置宽度约束，让它在容器内换行
            anchors.left: parent.left 
            anchors.right: parent.right 
            anchors.margins: 5 // 和外层padding呼应，可选
        }
    }
}

ListView { 
    anchors.fill: parent 
    spacing: 10 
    clip: true // 防止内容溢出ListView边界
    model: ListModel { id: listModel }
    delegate: sysNotificationsDelegate
}

关键要点解释 #

• 给Text设置宽度约束：这是最核心的一步！如果不给Text限制宽度，wrapMode: Text.WordWrap根本不会生效——Text会一直横向延展，不会换行，自然高度就固定成一行了。通过anchors.left/right绑定父容器，Text会自动继承容器的宽度，超过宽度时就会换行，高度也会跟着内容自动增加。
• 利用childrenRect.height：这个属性会实时计算容器内所有子元素的总高度，所以Rectangle的高度会完全跟随Text的高度变化，实现类似CSS height:auto的效果。
• 可选的内边距优化：添加padding或者给height额外加数值，能让文本和容器边缘保持距离，避免内容贴边的生硬感，提升UI美观度。
• 开启ListView的clip：默认情况下ListView不会裁剪超出可视区域的内容，设置clip: true可以防止长文本项溢出到ListView外面。

这样调整后，不管你的文本是10个字符还是1000个字符，每个ListView项都会自动适配文本的高度啦！

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