Question

我有以下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

一切正常，但Image Listview的{{1}}正在涉及delegate，正如您在屏幕截图中看到的那样：这不应该发生，但为什么会发生？

Answer 1

根据用户@BaCaRoZzo提示，现在这里是工作代码：

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

使用带有ColumnLayout的图像和文本进行委托

1 个答案: