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

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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.

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