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

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 2

只需使用正确的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 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"
    }

我无法在QML中创建可调整大小的TextEdit控件

4 个答案: