Delegate with Image and Text wading ColumnLayout - qt

Question

I have following QML Item:
import QtQuick 2.0
import QtQuick.Layouts 1.2
import si.mikroelektronika 1.0
Item
{
id: ueCategorySelector
width: 768
height: 128
clip: true
Rectangle
{
radius: 16
gradient: Gradient
{
GradientStop
{
position: 0
color: "#ffffff"
} // GradientStop
GradientStop
{
position: 1
color: "#000000"
} // GradientStop
} // Gradient
border.color: "#4682b4"
border.width: 1
antialiasing: true
anchors.centerIn: parent
anchors.fill: parent
ColumnLayout
{
anchors.margins: parent.radius/2
spacing: 0
antialiasing: true
anchors.fill: parent
anchors.centerIn: parent
ListView
{
id: ueCategoryListView
antialiasing: true
orientation: ListView.Horizontal
clip: true
Layout.fillWidth: true
Layout.fillHeight: true
spacing: 64
model: ueCategoriesModel
delegate: Rectangle
{
radius: 16
width: 160
height: ueCategoryListView.height-2*Layout.margins
clip: true
border.color: "#4682b4"
antialiasing: true
gradient: Gradient
{
GradientStop
{
position: 0
color: "#000000"
} // GradientStop
GradientStop
{
position: 1
color: "#ffffff"
} // GradientStop
} // Gradient
ColumnLayout
{
anchors.centerIn: parent
anchors.fill: parent
antialiasing: true
spacing: 8
Image
{
Layout.fillWidth: true
Layout.fillHeight: false
Layout.alignment: Qt.AlignCenter|Qt.AlignTop
fillMode: Image.PreserveAspectFit
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
antialiasing: true
source: "image://ueCategoriesModel/"+model.ueRoleImage
} // Image
Text
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignCenter|Qt.AlignBottom
color: "#000000"
text: model.ueRoleName
wrapMode: Text.WordWrap
font.family: "Courier"
textFormat: Text.RichText
font.bold: true
font.pointSize: 10
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
} // Text
} // ColumnLayout
} // delegate
} // ListView
} // ColumnLayot
} // Rectangle
} // Item
Everything is ok, but the Image of Listview delegate is wading the ColumnLayout, as you can see in screenshot:
This should not be happening, but why is it happening?

Answer 1

According to user #BaCaRoZzo hint, here is now working code:
import QtQuick 2.0
import QtQuick.Layouts 1.2
import si.mikroelektronika 1.0
Item
{
id: ueCategorySelector
clip: true
Rectangle
{
id: ueCategorySelectorWrapper
radius: 16
gradient: Gradient
{
GradientStop
{
position: 0
color: "#ffffff"
} // GradientStop
GradientStop
{
position: 1
color: "#000000"
} // GradientStop
} // Gradient
border.color: "#4682b4"
border.width: 1
antialiasing: true
anchors.fill: parent
ColumnLayout
{
anchors.margins: parent.radius/2
spacing: 0
antialiasing: true
anchors.fill: parent
ListView
{
id: ueCategoryListView
antialiasing: true
orientation: ListView.Horizontal
clip: true
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
Layout.margins: 8
spacing: 8
model: ueCategoriesModel
delegate: Rectangle
{
radius: 16
width: 256
height: ueCategoryListView.height-2*Layout.margins
clip: true
border.color: "#4682b4"
antialiasing: true
gradient: Gradient
{
GradientStop
{
position: 0
color: "#000000"
ParallelAnimation on color
{
loops: 1
running: ueDelegateMouseArea.pressed
ColorAnimation
{
from: "#4682b4"
to: "#000000"
duration: 100
} // ColorAnimation
} // ParallelAnimation
} // GradientStop
GradientStop
{
position: 1
color: "#ffffff"
} // GradientStop
} // Gradient
MouseArea
{
id: ueDelegateMouseArea
anchors.fill: parent
} // MouseAres
ColumnLayout
{
anchors.fill: parent
antialiasing: true
spacing: 8
Image
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignTop
Layout.topMargin: ueCategorySelectorWrapper.radius+4
fillMode: Image.PreserveAspectFit
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
antialiasing: true
source: "image://ueCategoriesModel/"+model.ueRoleImage
} // Image
Text
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom
Layout.bottomMargin: ueCategorySelectorWrapper.radius+4
color: "#000000"
text: model.ueRoleName
wrapMode: Text.WordWrap
font.family: "Courier"
textFormat: Text.RichText
font.bold: true
font.pointSize: 10
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
} // Text
} // ColumnLayout
} // delegate
} // ListView
} // ColumnLayot
} // Rectangle
} // Item