maemo.org - Talk - Sailfish Silica and anchors

maemo.org - Talk (https://talk.maemo.org/index.php)

- Development (https://talk.maemo.org/forumdisplay.php?f=13)

- - Sailfish Silica and anchors (https://talk.maemo.org/showthread.php?t=91059)

Sailfish Silica and anchors

Hi,

I'm playing around with Sailfish Silica. Column is a sub-optimal solution in my case, simple anchoring would be the best here. That's my code:

Code:

import QtQuick 2.0

import Sailfish.Silica 1.0

import Sailfish.Silica.theme 1.0



Page {

    id: page

    SilicaFlickable

    {

        anchors.fill: parent

        PullDownMenu

        {

            /**/

        }

        contentHeight: childrenRect.height

        

        width: page.width

        PageHeader {  title: "blah"  }



        /**/

 

        TextField

        {

            text: "test2"

            anchors.bottom: parent.bottom

        }

    }

}

But the TextField isn't anchored to the bottom of the page (the bottom of the screen) but to the bottom of the pull menu.

What am I doing wrong?

Re: Sailfish Silica and anchors

I suspect some reparenting takes place at runtime. Try anchoring with id instead of parent.

Re: Sailfish Silica and anchors

Quote:

Originally Posted by qwazix (Post 1367908)

I suspect some reparenting takes place at runtime. Try anchoring with id instead of parent.

Then I'm getting

Code:

QML TextField: Cannot anchor to an item that isn't a parent or sibling.

While anchoring to the silicaflickable or page

Re: Sailfish Silica and anchors

So that confirms my suspicion. The only way I can think of then is to do

Code:

TextField { y: page.height - height }

So that it stays at the bottom of the page.

EDIT: now that I read your code again, you may try putting your TextField directly in the page, not in the flickable, and keep anchoring with parent or id. It should work, but I am not sure it will be exactly what you want.

Re: Sailfish Silica and anchors

Reparing would not cause a problem as long as you always use the "parent" keyword to refer to the parent object.

I'm far from a QtQuick expert but I suspect the problem is that the Flickable's contentHeight, which you defined as the height of the children, is less than the full page height. Thus the bottom anchor is not at the page bottom, but at the bottom of the "content".

(If you don't want to be "flickable", why don't you put it outside the flickable?)

Re: Sailfish Silica and anchors

What I was saying, is that probably the pulley menu becomes the parent of all the contents of the flickable for some reason, so that when the textfield is anchored at the bottom of the parent it goes to the bottom of the pullmenu.

As far as I know contentHeight does not affect the actual flickable height which is set by anchors.fill:parent in this case.

That said, javispedro is right that it should be put outside the flickable. Putting ut inside and anchoring it to the bottom doesn't make much sense.

Re: Sailfish Silica and anchors

Reposting the code with now-important stuff

Code:

import QtQuick 2.0

import Sailfish.Silica 1.0

import Sailfish.Silica.theme 1.0





Page {

    id: page

    

    // To enable PullDownMenu, place our content in a SilicaFlickable

    SilicaFlickable

    {

        id: p1flick

        anchors.fill: parent

        

        // PullDownMenu and PushUpMenu must be declared in SilicaFlickable, SilicaListView or SilicaGridView

        PullDownMenu

        {

            MenuItem

            {

                text: "Settings"

            }

            MenuItem

            {

                text: "Fullscreen"

                onClicked: { header.hidden = !header.hidden; console.log(header.state) }

            }

        }

        

        // Tell SilicaFlickable the height of its content.

        contentHeight: childrenRect.height

        

        // Place our content in a Column.  The PageHeader is always placed at the top

        // of the page, followed by our content.

        Column

        {

            id: content

            width: page.width

            spacing: Theme.paddingMedium

            PageHeader

            {

                id: header

                property bool hidden: false

            }



            Text

            {

                text: "test"

                height: parent.height - header.height

                Component.onCompleted: { console.log(parent.height); console.log(header.height) }

            }



            TextField

            {

                id: textfield

                text: "test2"

            }

        }

    }

}

Now parent.height is 3 (strange). The same if I change parent to content (the Column's id). If I disable that property binding in Text, parent.height becomes 118.

It looks ok but lags as hell with

Code:

QQuickWindow: possible QQuickItem::polish() loop

What am I doing wrong?

Re: Sailfish Silica and anchors

Quote:

Originally Posted by marmistrz (Post 1368295)

What am I doing wrong?

This, specially when "parent" is a positioner:

Code:

height: parent.height - header.height

If you want to put a filler, then calculate its height based on either a constant, the window size, or the page's size. What you're doing there is triggering a loop (e.g. Column's height is calculated based on Text's height, which is calculated based on Header's height and ... Column's height).