当前位置：首页 > article >正文

QML Image 圆角设置

article 2025/2/21 2:55:18

Image 默认是没有圆角的，但是为了让ui看起来美观，有时需要加上圆角，这里分享一种利用遮罩实现的方法。

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import Movie 1.0

Card {
    id:root
    width: 325
    height: 226

    property var curMovieData

    Movie{
        onMovieData: {
            root.curMovieData = data
            var imgStr = curMovieData[0][1]
            preview.source = imgStr.replace(/^https:\/\//i, "http://");
        }
    }

    // 原始图片
    Image {
        id: preview
        anchors.fill: parent
        anchors.margins: 5
        fillMode: Image.PreserveAspectCrop
        visible: false  // 隐藏原始图片
    }

    // 圆角遮罩
    Rectangle {
        id: mask
        anchors.fill: parent
        radius: 20
        visible: false  // 隐藏遮罩
    }

    // 应用遮罩
    OpacityMask {
        anchors.fill: parent
        source: preview
        maskSource: mask
    }

}

整体效果：