Basic Form Layout for Symbian in QML



  • 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?



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



  • 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)..



  • 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..



  • 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



  • 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?



  • 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.



  • 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!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.