2

我正在尝试使用 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 （第一个控件）锚定到父级的顶部/左/右。当父级垂直调整大小时，输出窗口会垂直调整大小以填充可用空间。使用上面的代码不会发生这种情况，我得到的是 inputWindow 卡在 outputWindow 的底部并随之移动。

我可以使用 QT UI 文件轻松完成此操作，但是在广泛搜索有关如何使用 QML 执行此操作的任何信息之后，我不得不在这里提问。任何帮助，将不胜感激。谢谢。

4

4 回答 4

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 结束。

于 2011-05-07T09:13:44.877 回答
2

只需使用正确的anchors, 并使用wrapModeand 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;
    }
}
于 2013-03-27T13:27:03.683 回答
1 
 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"
    }
于 2011-07-27T11:48:24.050 回答
1

尽可能使用列是行。我发现它们在布置各种 UI 元素时最有效。此外，我认为将项目锚定到同一级别的其他项目并不总是有效，我认为最好的做法是锚定到父项。

于 2011-05-07T22:36:38.053 回答