Flow, how to align contents to bottom [answered]

Question

1

Flow, how to align contents to bottom [answered]

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

kimmoli

7188 ●94 ●133 ●160

http://www.kimmoli.fi/

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

Actually the same visual annoyance is seen on Settings shortcuts page...
kimmoli ( 2014-05-30 20:23:07 +0200 )edit

Accepted Answer

0

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

kimmoli

7188 ●94 ●133 ●160

http://www.kimmoli.fi/

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

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

Answer 2

0

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

coderus

22985 ●253 ●337 ●370

https://coderus.openrepos...

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

Flow, how to align contents to bottom [answered]

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

2 Answers

Comments

Question tools

Stats

Related questions

Flow, how to align contents to bottom [answered]

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

2 Answers

Comments

Question tools

Public thread

Stats

Related questions

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