Loading...

XML

Word

Printable

Details

Type: Bug
Resolution: Done
Priority: P2: Important
Fix Version/s: 5.7.0
Affects Version/s: 5.3.1, 5.6.0 Alpha
Component/s: Quick: Layouts
Labels:
- Reported_by_support_silver
Environment:
Mac OS X, Windows 7

Commits:
68293395ed6c513703a206389734201d3202c30c fa48abf36faa9d1b60c37af441260e6b3d05c37f 8f1fcb0142b26f8e12c51b6c646eca1242b35102

Description

If ColumnLayout's height or RowLayout's width can't be divided evenly among it's items, visible gaps appear between them.

This often occurs when using SplitView because moving the splitter introduces fractional values, but can also occur when using plain Row/ColumnLayouts when changing window size etc.

As a result, it's impossible to place items with pixel-perfect precision using layouts.

Sample code:

 
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ColumnLayout {
        id: col
        spacing: 0
        anchors.fill: parent
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#0000ff"
        }
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#ff0000"
        }
    }
}

Adjust window height a bit and the gap will appear between the items (white line on the attached screenshot).

Test project is attached.

Proposed solution:
Round to integers during calculation, for example, by using Amber's algorithm from this link:
http://stackoverflow.com/questions/1925691/proportionately-distribute-prorate-a-value-across-a-set-of-values

Another test:

replace main.qml with the code below, run the project then click mouse button repeatedly. The bottom line will tear off from the filled area after a few clicks:

 
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ColumnLayout {
        id: col
        spacing: 0
        width: 640
        height: 480
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#0000ff"
        }
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 1
            color: "#ff0000"
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: col.height -= 0.1
    }
}