I'm unable to create a resizable TextEdit control in QML

I am trying to create a simple window using QML which has 2 controls,开发者_运维技巧 a TextEdit and TextInput. I am trying to get the TextInput (single) to be anchored to the bottom of the parent window, while the TextEdit (multiline) is a resizable control above the TextInput. The single-line textInput can resize to fit the width of the parent, but the multiline TextEdit can resize to fill the rest of the screen above the TextInput.

This is what I have so far:

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
    }
}

I would like inputWindow (2nd control) to be anchored to the bottom (and left/right) of the parent, while outputWindow (the 1st control) is anchored to top/left/right of parent. When the parent is resized vertically, the outputWindow resizes vertically to fill the available space. This does not happen using the code above, what I get is the inputWindow is stuck to the bottom of the outputWindow and moves with it.

I am able to do this easily using a QT UI file, but after having searched extensively for any information on how to do this using QML, I have to ask here. Any help would be appreciated. Thanks.

---

You have some small errors in the outputWindow definition

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"
}

This way outputWindow starts at the top of its container and ends at inputWindow.

---

Just use the correct anchors, and use wrapMode and 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;
    }
}

---

Use columns are rows as much as possible. I've found them to be most effective while laying out various UI elements. Also, anchoring items to other items on the same level doesn't work all the time i think, i think its best practice to anchor to the parent.

---

 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"
    }