QML ListView滚动条无法遍历全部内容，contentHeight异常为0求助

问题根源分析 #

1. Delegate高度计算异常：你的delegate使用anchors.fill: parent强制每个列表项高度等于ListView高度，导致所有项重叠，ListView无法正确计算contentHeight；同时Text组件的Layout.fillHeight: true属性在普通Column中无效，因为该属性仅适用于Layout系列容器。
2. 数组索引错误：循环追加数据时始终使用strings[0]/strings[1]/strings[2]，而非当前循环的strings[i]，导致所有列表项内容重复。
3. ScrollBar尺寸设置错误：手动指定size: listView.contentHeight / listView.height会干扰滚动条的自动尺寸计算逻辑。

修正后的代码 #

import QtQuick 2.15
import QtQuick.Controls 2.5
import QtQuick.Layouts 6.3

Page{
    Connections{
        target: recipeFetcher
    }

    ListView {
        width: parent.width
        height: parent.height
        id: listView

        model: ListModel {
            id: recipeModel
        }

        delegate: ColumnLayout {
            width: listView.width
            spacing: 10
            padding: 10

            Text {
                Layout.fillWidth: true
                text: model.titleText
                color: "white"
                wrapMode: Text.Wrap
                horizontalAlignment: Text.AlignHCenter
            }

            Text {
                Layout.fillWidth: true
                text: model.ingredientsText
                color: "orange"
                wrapMode: Text.Wrap
                horizontalAlignment: Text.AlignHCenter
            }

            Text {
                Layout.fillWidth: true
                text: model.instructionsText
                color: "blue"
                wrapMode: Text.Wrap
                horizontalAlignment: Text.AlignHCenter
            }
        }

        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AlwaysOn
            contentItem: Rectangle {
                implicitWidth: 5
                color: "orange"
                radius: width
            }
        }

        Component.onCompleted: {
            var strings = [
                ['a'.repeat(3000), 'b'.repeat(3000), 'c'.repeat(3000)],
                ['a'.repeat(3000), 'b'.repeat(3000), 'c'.repeat(3000)],
                ['a'.repeat(3000), 'b'.repeat(3000), 'c'.repeat(3000)]
            ]

            for (var i = 0; i < strings.length; ++i) {
                recipeModel.append({
                    titleText: strings[i][0] + "\n\n",
                    ingredientsText: strings[i][1] + "\n\n",
                    instructionsText: strings[i][2] + "\n\n"
                });
            }
            Qt.callLater(() => console.log(listView.contentHeight))
        }
    }
}

关键修正说明 #

• 用ColumnLayout替代普通Column，移除anchors.fill: parent，让列表项高度由内部文本自动撑开，同时通过Layout.fillWidth: true保证文本宽度匹配列表项。
• 修正循环数组索引，确保每个列表项对应数组中的独立元素。
• 删除ScrollBar的手动size设置，让其自动根据ListView内容计算尺寸。
• 使用Qt.callLater延迟打印contentHeight，确保UI完成布局更新后获取准确数值。

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