QML 文本滚动

Posted 2023-02-16

【中文标题】QML 文本滚动

【英文标题】：QML text scroll

【发布时间】：2011-03-22 17:08:50

【问题描述】：

我正在使用 C++ 和 QML 创建一个漂亮的界面。 我想要一个“控制台视图”，随着时间的推移会打印出大量的文本。 但是，当文本项的文本或 webview 内容增长时，视图不会“向下滚动”。

如何使 text/webview 项底部的文本始终保持可见？

我尝试过使用 flickable 和 the_webview.evaluatejavascript + window.scrollTo ，但我无法让它们做我想做的事。 这似乎是一个相当简单的 UI，但我在使用 QML 时遇到了严重的麻烦。

谢谢你的回答。

【参考方案1】：

是的，我会使用包含 Text 对象的 Flickable。每当您向Text 添加文本时，请检查其paintedHeight，如果更大，请调整Flickable 的contentY。

【讨论】：

这启发了我的最终解决方案：

【参考方案2】：

也许您应该考虑使用ListView 并将消息作为视图中的项目。然后你可以使用ListView::positionViewAtEnd。

【参考方案3】：

funkybro 的回答启发了我的最终解决方案：

function scroll_to_bottom() 
    flickabe_item.contentY = 
        Math.max(0, webview_item.height - flickabe_item.height);
    return;

谢谢！

【参考方案4】：

我对此的解决方案是垂直翻转内容和 Flickable。这样，文本以正确的方式结束，并自然地锚定在可滑动区域的底部。

由于变换是由 OpenGL 在幕后处理的，因此它也可能更有效。

Flickable 
    id: flick
    anchors.fill: parent
    contentHeight: text.height
    Text 
        id: text
        width: parent.width
        transform: Scale  yScale: -1; origin.y: text.height/2 
    

    transform: Scale  yScale: -1; origin.y: flick.height/2