Issues aligning elements through the use of anchors

unixfan

Coming from a wxwidget background, I recently decided to try Qt and see whether it would get me anywhere.
Unfortunately, I'm already stuck. Using Qtcreator, I modified the "Hello World" example to keep the text anchored near the top left corner.

Thinking this was enough, I resized the window. This, however, moved the text near the center of the window.

Am I doing something wrong? I tried to do the same via grid + column + row and it wouldn't work either.

Library is Qt Quick 1.1 and I'm using HsQML to load the UI into my Haskell project.

Here's the QML code:

@import QtQuick 1.1

Rectangle {
id: rectangle1
width: 360
height: 360
Text {
width: 69
height: 15
text: "Hello World"
anchors.left: parent.left
anchors.leftMargin: 8
anchors.top: parent.top
anchors.topMargin: 8
}
MouseArea {
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.top: parent.top
anchors.left: parent.left
onClicked: {
Qt.quit();
}
}
}@

EDIT: Is there any way to use more elements (stuff like tabs, spacers, etc) from within the Qt Quick project suite or will I have to write it in code? A regular Qt Gui project seems to contain quite a number of additional options compared to the Qt Quick Project.

unai_i

Hi,
The code you posted should do the work. You can try to check where your rectangle is drawn to make sure it's not the rectangle that is not placed in the place you expect by giving it a color.

As for more advanced controls like tabs and others you can have a look at QtQuick.Controls but this will require to switch your code to Qt 5 and QtQuick 2.

Best regards.

unixfan

Thanks. Got it now.

I was under the, apparently quite wrong, impression that the root (i. e.the rectangle, in this case) object would always fill the screen. Turned out that the whole rectangle moved to the middle, rather than scaling with the window.

What's would be the best way to make sure elements like the rectangle/grid/etc always scales with the window? From a design view, is it a good idea to have the font inflate as well or should the whole layout just reshuffle in a way that keeps elements tightly bound to each other?

QtQuick.Controls looks interesting. Qt5/QtQuick isn't part of HsQML yet, though. Probably will be a few months before it's release, unfortunately.

unixfan

This has to be the most frustrating experience in a long time.

Is there no QML specific way to set an element to always fill the screen or, at the very least, to disable resizing on a window?

All infos I can find online deal with C++, which I don't have at my disposal for this project.

unai_i

I don't know Haskell at all but from the screenshots shown in HsQML website I guess that you can fill your window if you find a means to pass width and height of your window to QML.
At first you can simply try something along:
@
import QtQuick 1.1

Item { // unless you need to explicitly change background color you don't need Rectangle
id: root Item
anchors.fill: parent
Text {
width: 69
height: 15
text: "Hello World"
anchors.left: parent.left
anchors.leftMargin: 8
anchors.top: parent.top
anchors.topMargin: 8
MouseArea {
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.top: parent.top
anchors.left: parent.left
onClicked: {
Qt.quit();
}
}
}
}

@

If you can fill your window, then you can do the layout as you want.
However, I have no clue how you can do if your need is to resize the window to your content.
Hope it helps.

oakes

I started using HsQML and have run into the same problem; I can't figure out how to make the content update when the window is resized. I tried adding "anchors.fill: parent" to the root item, but that causes the window to be a small square, ignoring the width/height I set for it. Is there no way to make the root item follow the window size via QML?

oakes

I found that the solution is to make the root element a Window, and add "visible: true" to it. I can now resize the window and the contents resize with it.