如何使一个TextArea有一个最大的大小和滚动条？

Question

我有一个TextArea将通常只包含大约一行文本。我这样做，但是，希望用户能够添加多认为与有TextArea最多扩展到最高约15行，此时任何额外的文本可以通过滚动条来访问。我已经能够得到滚动方面具有包含在TextArea的Flickable（这是最终包含在Rectangle）工作。

Rectangle {
    id: rec
    width: 200
    height: 25

    Flickable {
        id: flickable
        anchors.fill: parent
        contentWidth: textArea.width
        contentHeight: textArea.height

        TextArea.flickable:
            TextArea {
            id: textArea
            text: qsTr("Hello, world!")
            wrapMode: Text.WordWrap
        }
        ScrollBar.vertical: ScrollBar { }
    }
}

在这一点上，我怎么会去具有文本框与文本扩展到像素（比如，300）的一些预先定义的最大数量？

编辑

好了，差不多了，只是有与获取文本与米奇的解决方案正确居中的一个问题。我main.qml文件包含以下内容：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    HelloWorld{
        anchors.centerIn: parent
    }
}

任我HelloWorld.qml文件包含以下内容：

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Styles 1.4

ColumnLayout{

    width: 250

    FontMetrics {
        id: fontMetrics
        font: textArea.font
    }

    Flickable {
        id: flickable
        width: parent.width
        height: Math.min(contentHeight, fontMetrics.height * 15)
        contentWidth: width
        contentHeight: textArea.implicitHeight
        clip: true

        TextArea.flickable: TextArea {
            id: textArea
            text: "Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! "
                + "Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! "
            wrapMode: Text.WordWrap
            //padding: 0

            background: Rectangle {
                border.color: "blue"
            }
        }
        ScrollBar.vertical: ScrollBar {}
    }

}

这是非常接近的工作，但由于某种原因，当我有main.qml之外这段代码，文本被直到用户选择它转向下和向右：

选择文本后，它看起来像这样（这是我希望它在开始）：

Answer 1

设置height的Flickable是contentHeight或300 - 取其较小者：

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    width: 400
    height: 400
    color: "#444"
    visible: true

    Rectangle {
        anchors.fill: flickable
    }

    Flickable {
        id: flickable
        width: parent.width
        height: Math.min(contentHeight, 300)
        contentWidth: width
        contentHeight: textArea.implicitHeight

        TextArea.flickable: TextArea {
            id: textArea
            text: qsTr("Hello, world! Hello, world! Hello, world! Hello, world! ")
            wrapMode: Text.WordWrap
        }
        ScrollBar.vertical: ScrollBar {}
    }
}

如果你不希望Rectangle是它在哪里（Flickable的兄弟），你可以将其删除，添加

clip: true

到Flickable和

background: Rectangle {}

到TextArea。

另外，如果你想成为一个有点更精确，你可以使用FontMetrics计算行高度：

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    width: 400
    height: 400
    color: "#444"
    visible: true

    FontMetrics {
        id: fontMetrics
        font: textArea.font
    }

    Flickable {
        id: flickable
        width: parent.width
        height: Math.min(contentHeight, fontMetrics.height * 15)
        contentWidth: width
        contentHeight: textArea.implicitHeight
        clip: true

        TextArea.flickable: TextArea {
            id: textArea
            text: "Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! "
                + "Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! "
            wrapMode: Text.WordWrap
            padding: 0

            background: Rectangle {}
        }
        ScrollBar.vertical: ScrollBar {}
    }
}

Answer 2

啊哈！一番搜索后，我终于找到了一个方便的特性叫做paintedHeight这TextArea的一部分。这将让你TextArea文本的高度，所以我用这个来发现每一行的大小为13，只需更新每当编辑文本的基础Rectangle的高度，并简单地用if声明封盖它。这里是我的古怪的解决方案：

Rectangle {
    property int paintedHeight: 13
    id: rec
    width: 200
    height: paintedHeight * 2

    Flickable {
        id: flickable
        anchors.fill: parent
        contentWidth: textArea.width
        contentHeight: textArea.height

        TextArea.flickable:
            TextArea {
            id: textArea
            wrapMode: Text.WordWrap

            property int maxNumberOfLines: 15
            onTextChanged: {
                rec.height = (lineCount * rec.paintedHeight) + rec.paintedHeight

                // cap the height so that the box stops expanding at maxNumberOfLines
                if(rec.height > rec.paintedHeight * (maxNumberOfLines + 1)){
                    rec.height = rec.paintedHeight * (maxNumberOfLines + 1)
                }
            }
        }
        ScrollBar.vertical: ScrollBar { }
    }
}

如果任何人发现自己处于类似的情况，只是执行console.log(paintedHeight)获取当前的文本的高度（和相应的划分，如果你有一个以上的线），让你的文字的高度，因为它可能是比我这取决于不同在样式和字体你使用（我使用的是Fusion风格）。然后，只需修改与你的尺寸，并与你想要的文字具有的最大行数paintedHeight的Rectangle财产maxNumberOfLines的TextArea财产。