如何实现可换行、限高1/3窗口高度且超限时滚动的Text组件？

问题1：Text组件缩小窗口高度时无法滚动 #

原代码里ScrollView用Layout.preferredHeight: parent.height / 3强制固定高度，且Text宽度绑定逻辑有误，导致内容高度计算异常。修改点：

• 替换为Layout.maxHeight: parent.height / 3，限制ScrollView最大高度为窗口1/3
• 新增Layout.preferredHeight: implicitHeight，让ScrollView在内容高度小于窗口1/3时自适应高度
• 调整Text宽度绑定为width: descriptionBox.viewport.width，确保Text宽度与ScrollView实际显示区域一致，正确触发换行和内容高度计算

问题2：ListView顶部未与Text组件底部对齐 #

原代码中ScrollView高度固定，且ListView代理的宽度绑定Window.width易导致布局偏移。修改后ScrollView高度随内容自适应（不超过窗口1/3），ListView通过Layout.fillHeight: true自动填充剩余空间，自然与ScrollView底部对齐；同时修正代理宽度绑定为width: useListView.width - 20，避免窗口尺寸变化时错位。

修改后的完整代码 #

ColumnLayout {
    anchors.fill: parent
    // anchors.margins: 10

    ScrollView {
        id: descriptionBox
        clip: true
        Layout.fillWidth: true
        // 限制最大高度为窗口1/3，内容不足时自适应高度
        Layout.maxHeight: parent.height / 3
        Layout.preferredHeight: implicitHeight

        Text {
            id: descriptionBoxLabel
            text: "Eum id neque possimus inventore similique. Et dolores exercitationem vel dignissimos. Voluptatibus assumenda veniam consequuntur. Harum reprehenderit tempora nostrum. Assumenda unde omnis non sit minima voluptas eligendi eum."
            // 绑定ScrollView视口宽度，确保正确换行
            width: descriptionBox.viewport.width
            wrapMode: Text.WordWrap
        }
    }

    ListView {
        id: useListView
        model: ["Apple", "Banana", "Pear", "Watermelon"]
        delegate: CheckDelegate {
            text: modelData
            // 绑定ListView宽度，避免窗口变化时错位
            width: useListView.width - 20
        }

        Layout.fillWidth: true
        // 填充剩余高度，自动与上方ScrollView底部对齐
        Layout.fillHeight: true
    }
}

关键说明 #

• ScrollView的implicitHeight会根据内部Text的实际高度自动计算，结合Layout.maxHeight实现「内容高度≤窗口1/3时自适应，超过时固定高度并滚动」的效果
• Text绑定viewport.width而非parent.width，因为viewport是ScrollView实际显示内容的区域，能避免忽略内边距导致的布局误差
• ListView使用Layout.fillHeight: true后，ColumnLayout会自动分配剩余空间，无需额外调整位置，自然与上方组件底部对齐

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