Qt5/QML - Text/TextArea 中的分页

Question

假设我有一个 QML Text 或 TextArea，其中包含一个很长的 HTML 页面。我想把它分成几页让它更容易阅读。

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

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

有没有什么办法可以做类似的事情，最好是在纯 QML 中（尽管 C++ 也可以）。

Answer 1

您可以在加载后测量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
    }
}

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

Qt5/QML - Text/TextArea 中的分页

Qt5/QML - Pagination in Text/TextArea

qt

textarea

qml

qt5