qquickwidget, ListView horizontal orientation, adding spaces without reason

? Offline

Has you can see from this image, my ListView is adding spaces... and I can't figure out why.

The Listview is contained in a QQuickWidget which lays in a QVBoxLayout.

Any help or hint is appreciated!

The data for the ListView is given via QObjectList:


class myDescriptorObject: public QObject
{
   Q_OBJECT
      Q_PROPERTY(QString tabHeader READ tabHeader CONSTANT)
      Q_PROPERTY(bool tabClosable READ tabClosable CONSTANT)

   const QString m_headerText;
   const bool m_isClosable;
public:
   myDescriptorObject(const QString& header, bool isClosable QObject* parent = nullptr);
   QString tabHeader() const { return m_headerText; }
   bool tabClosable() const { return m_isClosable; }
};

...

QList<QObject*>objList;
objList.append(new myDescriptorObject("Accounts", false));
objList.append(new myDescriptorObject("Transactions", false));
objList.append(new myDescriptorObject("Totals", false));
objList.append(new myDescriptorObject("VAT codes", false));
objList.append(new myDescriptorObject("Exchange rates", false));
objList.append(new myDescriptorObject("Syskey", true));
objList.append(new myDescriptorObject("Budget", false));
objList.append(new myDescriptorObject("Documents", false));
objList.append(new myDescriptorObject("1000 USD Cash", true));
rootContext()->setContextProperty("tabsModel", QVariant::fromValue(objList));

...

The QML is this

import QtQuick 2.12
import QtQuick.Controls 2.12

Rectangle {
    id: tabBox

    property int currentIndex: -1
        
    SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
    
    color: "#ffd500"

    signal tabClicked(int index)
    signal tabClose(int index)

    function setCurrentTab(index){
        currentIndex = index
    }

    ListView{
        id: listTabs    
        anchors.fill: parent
        clip: true
        smooth: true
        orientation: ListView.Horizontal
        boundsMovement: Flickable.StopAtBounds
        boundsBehavior: Flickable.DragAndOvershootBounds
        model: tabsModel
        delegate: tabsItem
        spacing: 3
    }

    Component{
        id: tabsItem
        Rectangle{
            id: tabRect
            property bool isCurrent: index === currentIndex
            onIsCurrentChanged: isCurrent ? listTabs.positionViewAtIndex(index, ListView.Contain) : 0

            height: parent.height
            color: isCurrent ? "#ffffff" : "#d9b500"
            radius: 4


            Item{
                id: tabLeftSpace
                anchors.left: parent.left
                width: 5
            }
            
            Label{
                id: lblHeader
                anchors.left: tabLeftSpace.right
                anchors.top : parent.top
                anchors.bottom: parent.bottom
                text: model.tabHeader
                verticalAlignment: Text.AlignVCenter
                renderType: Text.NativeRendering
                color: isCurrent ? "#234571" : "#4a4a4a"
                font.bold: true
                MouseArea{
                    id: tabClickedArea
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {
                        tabClicked(index)
                    }
                }
            }

            Item{
                id: closeItem
                visible: model.tabClosable
                anchors.left: lblHeader.right
                anchors.verticalCenter: parent.verticalCenter
                height: parent.height 
                width: visible ? parent.height + 5 : 0
                Image {
                    id: closeImage
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.right: parent.right
                    width: parent.height
                    source: "qrc:/icons/svg/erase.svg"
                    smooth: true
                    mipmap: true
                }
                MouseArea{
                    id: closeTabArea
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    onClicked: {
                        tabClose(index)
                    }
                }
            }

            Item{
                id: tabRightSpace
                anchors.left: closeItem.visible ? closeItem.right : lblHeader.right
                width: 5
                height: parent.height
            }

            Rectangle{
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                color: parent.color
                height: parent.radius
            }
            width: childrenRect.width
        }
    }
}

? Offline

I reported this issue as a bug:
https://bugreports.qt.io/browse/QTBUG-73352

Yunus

@JoZCaVaLLo
Hi. Yeah maybe this could be a bug. But if its so important for you, is can be manipulated with a rectangle in qml.