[Development] Proposal: Make QML's Rectangle border be inner instead of centered on the outline

Tor Arne Vestbø tor.arne.vestbo at digia.com
Thu Oct 18 12:06:24 CEST 2012


The border of a Rectangle in QtQuick 1 was drawn as an outline, 
resulting in the bottom and right borders to be drawn outside of the 
rectangle's width/height. This caused issues such as:

  - Unintuitive manual margin calculations required if you wanted to 
center an item inside a Rectangle with a border.

For example, in the following snippet:


Which has the following output:


The first kitten (red border) has too much right/bottom margin, if using 
the intuitive approach. The second kitten looks correct (green border), 
but needs manual adjustments to the border.

  - Clipping away the bottom and right borders if an item was clipped to 
its parent based on its width/height.

This issue is described in the documentation, here:


Neither of these issues are very good experiences/selling point for 
first time Qt Quick users.

At some point I filed a task to add a border.type property, to allow us 
to extend the border with inner/outer variants:


But I think we can do one better for Qt Quick 2, by changing the 
default. Of course this does not prevent us from introducing border.type 
at a later stage. If we don't change the default now, we'll be stuck 
with the same issue for Qt Quick2 as we had for Qt Quick 1.

Samuel has kindly already provided a patch that does this, and it's up 
for review at:


The patch is surprisingly simple, and largely consists of nice red 
blocks of removing logic that's no longer needed, thanks to the 
simplified logic and Kim's forward-thinking when implementing the 
drawing code.

So, anyone against making the kittens happy? :)

Tor Arne

More information about the Development mailing list