Sailfish Silica and anchors - maemo.org

Active Topics

Nokia Booklet 3G (RX-75) Drivers (58)
to Alternatives by teroyk - 15 hrs, 30 mins ago
N9 Led issues (1)
to Nokia N9 / N950 by aspergerguy - 2 days, 10 hrs ago
For Sale: Nokia N900 in excellent condition, with new battery (11)
to Buy & Sell by Trazlink - 3 days, 6 hrs ago
[Announce] Slumber – Sleep Timer for SailfishOS (48)
to SailfishOS by eson - 3 days, 14 hrs ago
Look what I drew on my phone (1,728)
to General by ste-phan - 3 days, 16 hrs ago
Russian Open Mobile development based on SFOS (378)
to SailfishOS by ste-phan - 3 days, 17 hrs ago
Podcatcher (1)
to Applications by ste-phan - 3 days, 18 hrs ago
more...

Thread Tools

marmistrz	2013-08-17 , 17:46
Posts: 3,328 \| Thanked: 4,476 times \| Joined on May 2011 @ Poland	#1

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?

__________________
If you want to support my work, you can donate by PayPal or Flattr

Projects no longer actively developed: here

Quote & Reply |

	qwazix	2013-08-17 , 18:51
	Moderator \| Posts: 2,622 \| Thanked: 5,447 times \| Joined on Jan 2010	#2

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

__________________
Proud coding competition 2012 winner: ρcam
My other apps: speedcrunch N9 N900 Jolla –– contactlaunch –– timenow

Nemo UX blog: Grog
My website: qwazix.com
My job: oob

Quote & Reply |

The Following User Says Thank You to qwazix For This Useful Post:
fw190

marmistrz	2013-08-17 , 19:24
Posts: 3,328 \| Thanked: 4,476 times \| Joined on May 2011 @ Poland	#3

Originally Posted by qwazix

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

__________________
If you want to support my work, you can donate by PayPal or Flattr

Projects no longer actively developed: here

Quote & Reply |

	qwazix	2013-08-17 , 21:29
	Moderator \| Posts: 2,622 \| Thanked: 5,447 times \| Joined on Jan 2010	#4

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.

Last edited by qwazix; 2013-08-17 at 21:34.

Quote & Reply |

The Following 2 Users Say Thank You to qwazix For This Useful Post:
fw190, marmistrz

	javispedro	2013-08-17 , 22:20
	Posts: 2,355 \| Thanked: 5,249 times \| Joined on Jan 2009 @ Barcelona	#5

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

Quote & Reply |

The Following 2 Users Say Thank You to javispedro For This Useful Post:
marmistrz, mikecomputing

	qwazix	2013-08-18 , 07:38
	Moderator \| Posts: 2,622 \| Thanked: 5,447 times \| Joined on Jan 2010	#6

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.

Quote & Reply |

The Following 2 Users Say Thank You to qwazix For This Useful Post:
marmistrz, mikecomputing

marmistrz	2013-08-20 , 09:46
Posts: 3,328 \| Thanked: 4,476 times \| Joined on May 2011 @ Poland	#7

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?

__________________
If you want to support my work, you can donate by PayPal or Flattr

Projects no longer actively developed: here

Last edited by marmistrz; 2013-08-20 at 09:49.

Quote & Reply |

	javispedro	2013-08-21 , 23:58
	Posts: 2,355 \| Thanked: 5,249 times \| Joined on Jan 2009 @ Barcelona	#8

Originally Posted by marmistrz

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

Quote & Reply |

The Following User Says Thank You to javispedro For This Useful Post:
marmistrz

« Previous Thread | Next Thread »

Forum Jump

All times are GMT. The time now is 06:08.

Active Topics

Nokia Booklet 3G (RX-75) Drivers (58)

N9 Led issues (1)

For Sale: Nokia N900 in excellent condition, with new battery (11)

[Announce] Slumber – Sleep Timer for SailfishOS (48)

Look what I drew on my phone (1,728)

Russian Open Mobile development based on SFOS (378)

Podcatcher (1)