Basic Form Layout for Symbian in QML

Reptile

I'm trying to do something that seems like it would be really simple, but I'm having a hard time accomplishing it. Basically, it's meant to be a kinetic-scrollable list of labels and textfields. I have not once been able to get the text fields to stretch to the width of the screen. I originally had something to this effect:

@Flickable {

Grid {
columns: 2

Label {
text: "Label1"
}
TextEdit {

}
}
}@

But that caused the textedit fields to be the minimum size. I got fed up with the grid after a while and just had the children directly under the flickable, whilst using anchors. But the same thing happened. When I tried this for the textedit fields:

@TextEdit {
anchors.right: parent.right
}@

I assumed it would stretch them to the edge of the screen, since the flickable is anchored to the left and right of the parent. But when I try the above, the text fields disappear. What am I doing wrong?

raaghuu

you should use @TextEdit{anchors.fill: parent}@

Reptile

I just tried that and something really weird happens. The textedit component completely disappears, and the label next to it is positioned strangely. When I scroll, the gap between the label and the controls underneath it grows larger and larger (there seems to be a transparent rectangle between the label and the other form controls)..

Reptile

I'm posting a more accurate representation of my code in the hopes someone can see what I'm doing wrong. Here, I don't have the right of the text field anchored to the right of the flickable... the text field shows up with the minimum size..
@Page {
id: inputPage
anchors.fill: parent
Flickable {
id: flickable
contentHeight: childrenRect.height
contentWidth: childrenRect.width
anchors.top: subtitleText.bottom

    anchors.left: parent.left
    anchors.right: parent.right
    //width: 640
    anchors.bottom: parent.bottom
    //height: 200
    flickableDirection: Flickable.VerticalFlick
    clip: true
    //boundsBehavior: Flickable.DragOverBounds
    TextField {
        id: testField
        anchors.top: parent.top
        anchors.left: parent.left
        //anchors.right: parent.right
    }

}@

And here, I try to anchor it o the right of the flickable, and the text field disappears.

@Page {
id: inputPage
anchors.fill: parent
Flickable {
id: flickable
contentHeight: childrenRect.height
contentWidth: childrenRect.width
anchors.top: subtitleText.bottom

    anchors.left: parent.left
    anchors.right: parent.right
    //width: 640
    anchors.bottom: parent.bottom
    //height: 200
    flickableDirection: Flickable.VerticalFlick
    clip: true
    //boundsBehavior: Flickable.DragOverBounds
    TextField {
        id: testField
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
    }@

I also noticed some strangeness with the flickable when scrolling, that I'm not sure is related. It seems to jump back to the top when I try to flick and won't go past a certain point (well short of the size of the children), as if the size of the content is set incorrectly? But if I flick hard enough, it's as though the flickable "grows" in size.. and is able to scroll further..

mbrasser

Hi,

Note that the parent of the TextField is not the Flickable itself, but the Flickable's contentItem, which means, for example, that contentItem.childrenRect.width is needed to give you the width of textField. (childrenRect will return an empty or invalid geometry)

However, fixing this will create a dependency loop -- the Flickable will be trying to set the contentWidth/contentHeight based on the dimensions of its children, and the TextField will be trying to set its geometry based on the dimensions of its parent (anchoring both left and right).

Regards,
Michael

Reptile

Thanks for the reply. I'm now having to anchor the top and the left and then use a root level element's width to figure out the width of the text field...

@Label {
id: label1
text: "Label1"
anchors.top: parent.top
anchors.left: parent.left
}
TextField {
id: field1
anchors.top: parent.top
anchors.left: label1.right
width: window.width - label1.width
}@

Is there a better way than this? I feel like there some be some simple, scalable way to accomplish this so that I could also add controls later on really easily, even if I want to add several input fields on the same line or "row"...

That in-explicit parenting of the flickable was also the reason the grid wasn't working correctly, right?

Reptile

On a related note, I just figured out why the flicking is behaving so strangely, I had to set the Flickable's contentHeight to contentItem.childrenRect.height instead of just childrenRect.height.

Reptile

Sorry for the triple post, but I just figured out that setting contentHeight to contentItem.childrenRect.height actually fixed all of my problems! Thanks everyone!