QML TextArea：使用QtQuick.Controls时的不同行为>；2.0对1.4_Qt_Qml_Qtquick2

QML TextArea：使用QtQuick.Controls时的不同行为>；2.0对1.4

qt qml

QML TextArea：使用QtQuick.Controls时的不同行为>；2.0对1.4,qt,qml,qtquick2,Qt,Qml,Qtquick2,我是Qml新手，但我想尝试一下，看看是否值得用它来代替旧的Qt小部件，特别是因为我听说它更适合移动设备。对于核心逻辑，我使用QML来支持几个C++类。我需要一个可滚动的TextArea，就像在文本编辑器中一样，因此我发现我必须使用一个嵌套在ScrollView中的TextArea，如下所示： ScrollView { ... TextArea { ... } } 我喜欢我的黑色QML应用程序的效果，它有一个好看的文本编辑器，在我的黑色背景上有一个漂亮的

我是Qml新手，但我想尝试一下，看看是否值得用它来代替旧的Qt小部件，特别是因为我听说它更适合移动设备。对于核心逻辑，我使用QML来支持几个C++类。我需要一个可滚动的TextArea，就像在文本编辑器中一样，因此我发现我必须使用一个嵌套在ScrollView中的TextArea，如下所示：

ScrollView {
    ...
    TextArea {
        ...
    }
}

我喜欢我的黑色QML应用程序的效果，它有一个好看的文本编辑器，在我的黑色背景上有一个漂亮的滚动条

当我需要在代码中实现scrollTo函数时，问题出现了。我的应用程序是一种播放器，当它达到1/4的高度时，会突出显示文本并向下滚动。我发现我可以使用flickableItem.contentY属性来调整文本在ScrollView中的相对位置，但该属性不存在，即使其他答案引用了它

我访问了Qt文档，但没有任何迹象，只有一个contentItem属性。所以我尝试调整contentItem.y属性，但结果很糟糕。文本和整个背景都在平移，覆盖了我的顶部工具栏

因此，我在文档中搜索TextArea的其他实现，发现QtQuick.Controls 1.4有一个继承了ScrollView类的TextArea实现。我想这就是解决办法。我切换到旧的实现，并设法使整个工作。现在，我可以通过编程方式滚动我的TextArea，浏览flickableItem.contentY属性和contentHeight vs height属性，以计算我有多少空间

这里的问题是1.4版本有着难看的滚动条，我觉得使用旧版本有点像黑客。他们从ScrollView中删除flickableItem属性有什么原因吗？对于新的控件版本，是否有其他方法可以做同样的事情

这是我的密码：

import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.12

TextArea {
    id: textArea

    anchors.fill: parent
    backgroundVisible: false

    /*background: Rectangle {
        anchors.fill: parent
        color: "#000000"
    }*/

    //color: "#ffffff"

    textColor: "#ffffff"
    selectByKeyboard: true
    selectByMouse: true
    verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn

    function scrollToY(y) {
        if ((contentHeight-y) > flickableItem.height && y > flickableItem.height/4) {
            flickableItem.contentY = y - flickableItem.height/4
        }
    }
}

我不知道Qt Quick Controls 1和Qt Quick Controls 2之间实现更改背后的原因。但是，Qt Quick Controls 2中的

ScrollView

可以通过编程方式在

ScrollBar.vertical.position

中滚动。我编写了一个示例代码，它使用计时器移动内容，直到计时器停止时向下滚动。请注意，如果内容适合可见区域，则滚动条将被禁用，计时器不会启动，因为不需要移动内容。您可以通过将布尔值

useLongText

值更改为false来测试这一点

import QtQuick.Window 2.2
import QtQuick 2.9
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 400
    height: 400
    color: "blue"
    property string exampleTextShort: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."

    property string exampleTextLong: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
"

    property bool useLongText: true // Change this to test with short text too

    Timer {
        id: timer
        running: scrollView.wholeTextSeen ? false : true
        repeat: true
        interval: 2000
        onTriggered: {
            scrollView.scrollDown()
        }
    }

    Rectangle{
        id: rect
        anchors.centerIn: parent
        width: parent.width*0.2;
        height: parent.height*0.2;
        ScrollView {
            id: scrollView
            anchors.fill: parent
            clip: true
            property bool wholeTextSeen: ScrollBar.vertical.size >= 1 ? true : false
            ScrollBar.vertical.policy: ScrollBar.vertical.size >= 1 ? ScrollBar.AlwaysOff : ScrollBar.AlwaysOn
            TextArea {
                readOnly: true
                text: useLongText ? exampleTextLong : exampleTextShort
                wrapMode: Text.WordWrap
            }

            function scrollDown() {
                if (wholeTextSeen) {
                    timer.running = false
                } else {
                    var scrollVar = ScrollBar.vertical.position + ScrollBar.vertical.size
                    console.log("scrollVar:",scrollVar)
                    if (scrollVar >= 1) {
                        wholeTextSeen = true
                    } else {
                        var step = 0.2
                        step = scrollVar + step > 1 ? 1 - scrollVar : step
                        ScrollBar.vertical.position = ScrollBar.vertical.position + step
                    }
                }
            }
        }
    }
}

运行长文本时的示例输出对我来说如下所示：

qml: scrollVar: 0.15625
qml: scrollVar: 0.35625
qml: scrollVar: 0.55625
qml: scrollVar: 0.7562500000000001
qml: scrollVar: 0.95625
qml: scrollVar: 1

我不知道Qt Quick Controls 1和Qt Quick Controls 2之间实现更改背后的原因。但是，Qt Quick Controls 2中的

ScrollView

可以通过编程方式在

ScrollBar.vertical.position

useLongText

值更改为false来测试这一点

import QtQuick.Window 2.2
import QtQuick 2.9
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 400
    height: 400
    color: "blue"
    property string exampleTextShort: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."

    property string exampleTextLong: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
"

    property bool useLongText: true // Change this to test with short text too

    Timer {
        id: timer
        running: scrollView.wholeTextSeen ? false : true
        repeat: true
        interval: 2000
        onTriggered: {
            scrollView.scrollDown()
        }
    }

    Rectangle{
        id: rect
        anchors.centerIn: parent
        width: parent.width*0.2;
        height: parent.height*0.2;
        ScrollView {
            id: scrollView
            anchors.fill: parent
            clip: true
            property bool wholeTextSeen: ScrollBar.vertical.size >= 1 ? true : false
            ScrollBar.vertical.policy: ScrollBar.vertical.size >= 1 ? ScrollBar.AlwaysOff : ScrollBar.AlwaysOn
            TextArea {
                readOnly: true
                text: useLongText ? exampleTextLong : exampleTextShort
                wrapMode: Text.WordWrap
            }

            function scrollDown() {
                if (wholeTextSeen) {
                    timer.running = false
                } else {
                    var scrollVar = ScrollBar.vertical.position + ScrollBar.vertical.size
                    console.log("scrollVar:",scrollVar)
                    if (scrollVar >= 1) {
                        wholeTextSeen = true
                    } else {
                        var step = 0.2
                        step = scrollVar + step > 1 ? 1 - scrollVar : step
                        ScrollBar.vertical.position = ScrollBar.vertical.position + step
                    }
                }
            }
        }
    }
}

运行长文本时的示例输出对我来说如下所示：

qml: scrollVar: 0.15625
qml: scrollVar: 0.35625
qml: scrollVar: 0.55625
qml: scrollVar: 0.7562500000000001
qml: scrollVar: 0.95625
qml: scrollVar: 1

简单来说你想要一个可滚动的文本区域？简单来说你想要一个可滚动的文本区域？非常感谢<代码>滚动条.垂直.位置正是我要搜索的。在您的代码片段中，您以任意速率滚动文本，而我需要向下滚动精确文本行的数量，并且仅当它>可见文本区域高度的1/4时。不过，这应该很容易找到。出于好奇，关键字

滚动条

（类型名称）不是声明了一个新的子项吗？它不应该是一个属性名吗，例如，

scrollBar

？

scrollBar.vertical

在ScrollView中被称为附加属性。您可以从中阅读有关附加属性的更多信息。所以，您需要设置附加属性的position属性，以使内容以编程方式沿垂直方向移动。再次感谢。正如你们可能注意到的，我对Qml语言非常陌生，但我学得很快，我已经用它创建了一个很好的应用程序。我还是喜欢在C++中编写核心内容，因为我有点老了，但是我很欣赏QTQuy的漂亮UI特性，QML降低了工作量。代码>滚动条.垂直.位置正是我要搜索的。在您的代码片段中，您以任意速率滚动文本，而我需要向下滚动精确文本行的数量，并且仅当它>可见文本区域高度的1/4时。不过，这应该很容易找到。出于好奇，关键字

滚动条

（类型名称）不是声明了一个新的子项吗？它不应该是一个属性名吗，例如，

scrollBar

？

scrollBar.vertical