Qt5/QML - 文本/文本区域中的分页

Alex Shaw 发表于 Dev

亚历克斯·肖

假设我有一个 QMLText或TextArea包含一个很长的 HTML 页面。我想通过将其拆分为页面来使其更易于阅读。

更具体地说，每次我按下向下键时，我都希望它向下滚动，直到屏幕上的当前文本都不存在为止。

我已经知道如何使整个 TextArea 可滚动；这不是我要找的。我正在寻找的更像是您在电子书阅读器中期望的那种行为。

有没有办法做这样的事情，最好是在纯 QML 中（尽管 C++ 也很好）。

叶子

您可以TextArea在加载后测量高度，将其除以容器高度，从而获得页数。然后您只需TextArea根据当前页面移动相对于其容器的位置。

我的想法的简单说明：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Window {
    id: main
    visible: true
    width: 640
    height: 800  

    property int currentPage: 1
    property int pageCount: 1

    ColumnLayout
    {
        anchors.fill: parent
        anchors.margins: 5
        RowLayout {
            Layout.preferredHeight: 40
            Layout.alignment: Qt.AlignHCenter
            Button {
                text: "<"
                onClicked: {
                    if(main.currentPage > 1)
                        main.currentPage --;
                }
            }
            Text {
                text: main.currentPage + " / " + main.pageCount
            }
            Button {
                text: ">"
                onClicked: {
                    if(main.currentPage < main.pageCount)
                        main.currentPage ++;
                }
            }
        }
        Rectangle {
            id: container
            clip: true
            Layout.fillHeight: true
            Layout.fillWidth: true
            TextArea {
                id: msg
                text: "Loading ..."
                width: container.width
                height: container.height
                y: -(main.currentPage - 1) * container.height
                textFormat: TextEdit.RichText
                wrapMode: TextEdit.Wrap
                Component.onCompleted: {
                    msg.makeRequest();
                }
                onContentHeightChanged: {
                    msg.height = msg.contentHeight;
                    if(msg.contentHeight >= container.height && container.height > 0)
                    {
                        main.pageCount = msg.contentHeight / container.height;
                        loader.running = false;
                    }
                }
                function makeRequest()
                {
                    var doc = new XMLHttpRequest();
                    msg.text = "";
                    doc.onreadystatechange = function() {
                        if (doc.readyState === XMLHttpRequest.DONE) {
                            msg.text = doc.responseText;
                        }
                    }
                    doc.open("GET", "http://www.gutenberg.org/files/730/730-h/730-h.htm");
                    doc.send();
                }
            }
        }
    }
    BusyIndicator {
        id: loader
        running: true
        anchors.centerIn: parent
    }
}

当然，您必须处理边距、页面上的最后一行、重新计算调整大小等的值。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。