Qt Quick hates me

August 17, 2012

I haven’t blogged since a while, because I do not do much KDE hacking lately, but today I’ve got around to playing with QML again.

The goal was to build something like a breadcrumb navigation widget, where the current directory is indicated by its name being written in a larger font. Here’s what I arrived at after a few minutes:

import QtQuick 1.1

Rectangle {
    width: 800
    height: 100
    color: "black"

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        spacing: 10

        Repeater {
            id: repeater
            property int currentIndex: 4
            model: ["/home", "/username", "/some", "/pseudo", "/path"]

            Text {
                text: modelData
                font.pixelSize: index == repeater.currentIndex ? 40 : 20
                color: "white"
            }
        }
    }
}

Close enough. Just adjust that alignment:

...
Text {
    ...
    height: 60
    verticalAlignment: Text.AlignBottom
}
...

Gah! Can you see it? The baselines are misaligned. Usually, you lay out text such that all letters “sit” on an even line (the baseline).

The documentation does not mention any type baseline alignment in a Row element (or any type of vertical alignment in a Row element, for that matter).

I then tried to hack around this problem by dropping the Row element and laying out the Text elements manually, but the elements in the repeater won’t anchor to each other. That’s probably a problem with the elements not being fully initialized when the anchor property is evaluated, but at this point I give up.

This has been my second experience with Quick. When I tried it for the first time, my goal was a Quick version of the Planarity game. I got stuck when I noticed that Qt Quick 1 does not have any kind of line or ellipse primitive (only rectangles and images). Really?!?

So, while I understand very well and appreciate the idea behind Qt Quick, I have come to the conclusion that Qt Quick hates me. Or I have a talent of hitting a roadblock within ten minutes, regardless of the general direction.

P. S. Turns out the WordPress WYSIWYG editor hates me, too. (Well, either me or the combination of <pre> and images.)

About these ads

9 Responses to “Qt Quick hates me”

  1. dipesh Says:

    Sure do the text’s baselines not align. The text fragments have a different font-size and you align there bottom and not the baseline.

    You do not need to do everything with QML base components as shipped with Qt 4.8. Just look if there are other components which may do what you like to achieve or use QDeclarativeItem/QGraphicsItem to write yur own component(s). That enables full access to QFontMetrics and all of Qt. You could also go with tge easy way to just export a qreal fontBaseline(QString, QFont) and do the offser calc/positioning in QML.

  2. markg85 Says:

    Hi,

    I know why that happens.Your printing the text in a loop meaning that each individual text is on it’s own.

    If you where to print it like this:
    Text {
    id: name
    text: “/home/username/some/pseudo/path”
    color: “white”
    }

    then you do get the baseline you want. And yeah, then it gets a whole lot more complicated to do whatever you want to do since you can’t simply say “click path”.. How would you know where path is ;)

    What you can do – which will make it a whole lot more complicated – is making a custom “fontdata” object from http://qt-project.org/doc/qt-4.8/qfontmetrics.html. Yes, just to get/calculate the base line!

    Another thing you can do is report a bug (or feature request) in Qt to request a baseline property in the Text component.

    Good luck!

  3. Christoph Says:

    The missing text baseline anchor is worth a bug report.

  4. Jumbaa Says:

    anchors.baseline

  5. Tuukka Says:

    The alignment in the pictures doesn’t make any sense. It’s not baseline but it’s not bounding box either. In the AlignBottom case the big slash seems to be aligned with the small text baseline but not with the small slashes.

    Look like a bug.

  6. ahiemstra Says:

    Ehm, you do know there is an anchors.baseline property right?

    Giving the row item a proper height then adding “anchors.baseline: parent.verticalCenter;” to the Text item gives me precisely what you want.

    • markg85 Says:

      I tested tested that out and it indeed works nicely!

      import QtQuick 1.1

      Rectangle {
      width: 800
      height: 100
      color: “black”

      Row {
      anchors.horizontalCenter: parent.horizontalCenter
      height: parent.height

      Repeater {
      id: repeater
      property int currentIndex: 4
      model: [“/home”, “/username”, “/some”, “/pseudo”, “/path”]

      Text {
      text: modelData
      font.pointSize: index == repeater.currentIndex ? 40 : 20
      color: “white”
      anchors.baseline: parent.verticalCenter
      }
      }
      }
      }

      Just posting the snippet for ease of use :)

  7. nuno Says:

    Rectangle {
    width: 800
    height: 100
    color: “black”

    Row {

    y:40
    anchors.horizontalCenter: parent.horizontalCenter
    spacing: 10

    Repeater {
    id: repeater
    property int currentIndex: 4
    model: [“/home”, “/username”, “/some”, “/pseudo”, “/path”]

    Text {
    text: modelData
    font.pixelSize: index == repeater.currentIndex ? 40 : 20
    color: “white”
    anchors.baseline: parent.verticalCenter

    }
    }
    }
    }

  8. anonymity is great Says:

    Qt Quick hates everyone (who wants to do serious work in it). Wait until you want to bridge QML and C++, then the real hell will start…

    A disappointed QML user (boy, am I happy that Digia is going to maintain and develop QtWidgets during the lifetime of Qt 5.x: http://blog.qt.nokia.com/2012/08/09/digia-extends-its-commitment-to-qt-with-plans-to-acquire-full-qt-software-technology-and-business-from-nokia/).


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.