qml实现消息图片展示

本文主要介绍如何展示不同大小尺寸的图片，并加上边框。实现步骤如下。

1、实现不同尺寸的图片的展示。主要运用OpacityMask实现圆角功能。

Rectangle {

    width: image_area.paintedWidth

    height: image_area.paintedHeight

    radius: 5

    property alias url: image_area.source

    property int size: 200

    Image {

        id: image_area

        sourceSize: Qt.size(size, size)

        smooth: true

        visible: false

    }

    Rectangle {

        id: mask_area

        anchors.fill: image_area

        radius: 5

        visible: false

    }

    OpacityMask {

        anchors.fill: image_area

        source: image_area

        maskSource: mask_area

    }

}

2、实现边框。边框通过RectangularGlow实现。

Item {

    width: rect.width

    height: rect.height

    property alias url: rect.url

    property alias size: rect.size

    RectangularGlow {

        id: effect

        anchors.fill: rect

        glowRadius: 2   // 边框宽度

        spread: 1       // 颜色是否渐进

        color: "#e0e0e0"    // 边框颜色

        cornerRadius: rect.radius + glowRadius

    }

    MyBorderImage {

        id: rect

    }

}

最终效果如图：

文章来源: qml实现消息图片展示