我無法在QML中創建可調整大小的TextEdit控件

Question

我正在嘗試使用QML創建一個簡單的窗口，該窗口具有2個控件，一個TextEdit和TextInput。 我試圖讓TextInput（單個）錨定到父窗口的底部，而TextEdit（多行）是TextInput上方的可調整大小的控件。 單行textInput可以調整大小以適合父級的寬度，但是多行TextEdit可以調整大小以填充TextInput上方的屏幕其余部分。

這是我到目前為止的內容：

import QtQuick 1.0

Item {
    id: container
    width: 500
    height: 400
    TextEdit {
        color: "red"
        id:outputWindow
        anchors.top: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: inputWindow.bottom
        wrapMode: Text.Wrap
        text: "Welcome"
    }

    TextInput {
        color:"blue"
        id:inputWindow
        anchors.left: parent.left
        anchors.right: parent.right
        //anchors.top: outputWindow.bottom
        anchors.bottom: parent.bottom
        text: "Input here"
        focus:true
    }
}

我希望將inputWindow（第二個控件）錨定到父級的底部（和左/右），而將outputWindow（第一個控件）錨定到父級的頂部/左/右。 當父級垂直調整大小時，outputWindow垂直調整大小以填充可用空間。 使用上面的代碼不會發生這種情況，我得到的是inputWindow固定在outputWindow的底部並隨其移動。

我可以使用QT UI文件輕松完成此操作，但是在廣泛搜索了有關如何使用QML進行此操作的信息之后，我不得不在這里詢問。 任何幫助，將不勝感激。 謝謝。

Answer 1

只需使用正確的anchors ，然后使用wrapMode和clip ：

import QtQuick 1.1

Item {
    id: container;
    width: 500;
    height: 400;

    TextEdit {
        color: "red";
        id:outputWindow;
        anchors.top: parent.top;
        anchors.left: parent.left;
        anchors.right: parent.right;
        anchors.bottom: inputWindow.top;
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere;
        text: new Array(100).join("Welcome\n"); // dumb content to show layout
        clip: true;
    }
    TextInput {
        id: inputWindow;
        color:"blue"
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        text: "Input here";
        focus: true;
    }
}

Answer 2

您在outputWindow定義中有一些小錯誤

TextEdit {
    color: "red"
    id:outputWindow
    anchors.top: parent.top // anchor to top of parent
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: inputWindow.top // anchor bottom to top of input window
    wrapMode: Text.Wrap
    text: "Welcome"
}

這樣，outputWindow在其容器的頂部開始，在inputWindow結束。

Answer 3

使用列盡可能是行。 我發現它們在布置各種UI元素時最有效。 另外，我認為，將項目錨定到同一級別上的其他項目並不是一直都有效，我認為將其錨定到父級是最佳做法。

Answer 4

 TextEdit {
        color: "red"
        id:outputWindow

        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right

        height : parent.height - inputWindow.height //replace bottom anchor with this

        wrapMode: Text.Wrap
        text: "Welcome"
    }