Qt5/QML - 文本/文本區域中的分頁

Question

假設我有一個 QML Text或TextArea ，其中包含一個很長的 HTML 頁面。 我想通過將其拆分為頁面來使其更易於閱讀。

更具體地說，每次我按下向下鍵時，我都希望它向下滾動，直到屏幕上的當前文本都不存在為止。

我已經知道如何使整個 TextArea 可滾動； 這不是我要找的。 我正在尋找的更像是您在電子書閱讀器中期望的那種行為。

有沒有辦法做這樣的事情，最好是在純 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
    }
}

當然，您必須處理邊距、頁面上的最后一行、重新計算調整大小等的值。