Ask / Submit
1

Flow, how to align contents to bottom [answered]

asked 2014-05-30 13:00:52 +0200

kimmoli gravatar image

I implemented a DockedPanel component, and want to use IconButton and Switch -components there, but i have issues getting them aligned them by bottom edge.

This is the result i'm seeking for: image description

However, the code below looks like this: image description

And if i try to anchor them, i get following error:

QML Flow: Cannot specify anchors for items inside Flow. Flow will not function.

DockedPanel
{
    width: parent.width
    height: Theme.itemSizeExtraLarge + Theme.paddingLarge

    dock: Dock.Top
    Flow
    {
        anchors.centerIn: parent

        IconButton
        {
            icon.source: "image://theme/icon-l-about"
        }
        Switch {
            icon.source: "image://theme/icon-l-repeat"
        }
        Switch {
            icon.source: "image://theme/icon-l-share"
        }
    }
}
edit retag flag offensive reopen delete

The question has been closed for the following reason "the question is answered, an answer was accepted" by kimmoli
close date 2014-10-11 21:42:22.807275

Comments

1

Actually the same visual annoyance is seen on Settings shortcuts page...

kimmoli ( 2014-05-30 20:23:07 +0200 )edit

2 Answers

Sort by » oldest newest most voted
0

answered 2014-05-30 20:22:27 +0200

kimmoli gravatar image

updated 2014-05-30 21:01:25 +0200

Workaround is to toss Flow, and use Row instead; With that i can use bottom anchoring, altough some anchors are not usable with Row.

Output becomes acceptable; image description

DockedPanel
{
    width: parent.width
    height: Theme.itemSizeExtraLarge + Theme.paddingLarge

    dock: Dock.Top
    Row
    {
        anchors.centerIn: parent
        height: parent.height

        IconButton {
            icon.source: "image://theme/icon-l-repeat"
            anchors.bottom: parent.bottom
        }
        Switch {
            icon.source: "image://theme/icon-l-repeat"
            anchors.bottom: parent.bottom
        }
        Switch {
            icon.source: "image://theme/icon-l-share"
            anchors.bottom: parent.bottom
        }
    }
}

And seems that even IconButton and IconSwitch are both bottom-aligned, there is some offset; image description


After adding adding anchors.bottomMargin: 8 to Switch components it starts to look - better: image description

And with those icons earlier, but from same category icon-m-, it looks now this; Maybe needs some spacing tuning still between IconButton and Switch components (like they did to Google logo) image description

edit flag offensive delete publish link more

Comments

1

No idea about coding but what i see in the pic still doesn't look good. Making the i icon smaller might improve it visually.

ApB ( 2014-05-30 20:38:47 +0200 )edit
0

answered 2014-06-01 09:11:17 +0200

coderus gravatar image

Just look into components codes. IconButton have fixed geometry: width: Theme.itemSizeSmall; height: Theme.itemSizeSmall but switch have no. It affects on spacing offsets.

edit flag offensive delete publish link more

Question tools

Follow
1 follower

Stats

Asked: 2014-05-30 13:00:52 +0200

Seen: 659 times

Last updated: Jun 01 '14