【QView】基于QML的UI组件框架 之 AImage (图片)

先上结果演示

环境（不说版本就是耍流氓）

硬件：通用PC / 手机 / Jetson Xavier NX 套件(均测试有效)
系统：Ubuntu 20.04 / Android / Windows (均测试有效)
软件 ：基于QT6.2.4 + Qml

功能描述

AImage类型用于Image显示。基于QML的Image组件进行封装，主要新增图片圆形或圆角显示、背景色、边框控制等功能。
使用src属性将图像的源指定为URL。图像可以以Qt支持的任何标准图像格式提供，包括位图格式（如PNG和JPEG）和矢量图形格式（如SVG）。如果需要显示动画图像，请使用AnimatedSprite或AnimatedImage。

如果未指定宽度和高度属性，则图像会自动使用加载图像的大小。默认情况下，指定项目的宽度和高度会使图像缩放到该大小。可以通过设置fillMode属性来更改，从而允许拉伸和平铺图像。
图像的形状或者圆角显示可以通过设置shape 和radius 属性来更改。

更多的使用详见**“实例用法”**

属性名称 [类型] (默认值)

    property string src: ""                         //图片
    property string fillMode : "Stretch"            //填充模式，(默认'Stretch')
    property int    aWidth: 16                      //宽高
    property int    aHeight: 16
    property string shape: "square"                 //图像形状，circle-圆形，square-方形 （默认 'square' ）
    property real   radius: 0                       //圆角值，(默认 0)
    property int    borderWidth: 0                  //边框宽度
    property color  borderColor: "#606266"          //边框颜色
    property color  backgroundColor: "transparent"  //背景颜色(默认 'transparent')
    property real   backgroundOpacity: 1.0          //背景透明度

src [url] (默认值：“#606266”)

AImage可以处理Qt所支持的任何图像格式，从Qt支持的任何URL方案加载。
URL可以是绝对的，也可以相对于组件的URL。

fillMode [string] (默认值：“Stretch”)

AImage 组件的 fillMode 属性决定了图像如何缩放以适应组件的大小。以下是 fillMode 的所有可能值及其含义：

**Stretch **: 图像会被拉伸以填充整个 Image 组件的区域，可能会导致图像的宽高比失真。

PreserveAspectFit: 图像会被等比例缩放以适应 Image 组件的区域，同时保持图像的宽高比。图像会完全填充在 Image 组件的区域内，但可能无法完全覆盖 Image 组件的区域。

PreserveAspectCrop: 图像会被等比例缩放以适应 Image 组件的区域，同时保持图像的宽高比。图像会完全覆盖 Image 组件的区域，但可能部分图像会超出 Image 组件的区域并被裁剪。

Tile: 图像会被重复平铺以填充 Image 组件的区域，图像的大小不会改变。

TileVertically: 图像会垂直平铺以填充 Image 组件的区域，图像的宽度会被拉伸以适应 Image 组件的宽度。

TileHorizontally: 图像会水平平铺以填充 Image 组件的区域，图像的高度会被拉伸以适应 Image 组件的高度。

Pad: 图像会保持原始大小居中显示在 Image 组件的区域内，不会进行任何缩放或拉伸。如果 Image 组件的区域大于图像的大小，那么多余的区域将会是透明的。

这些 fillMode 的值可以让你在不同的场景下选择最适合的图像显示方式。

aWidth、aHeight [int] (默认值：16)

AImage 组件的 aWidth、aHeight是宽高。

shape [string] (默认值：“square”)

AImage 组件的 shape 属性决定了图像的显示形状，以下是 shape 的所有可能值及其含义：
square：显示方形，shape 为“square”时，radius 有效。
circle显示圆形。

radius [real] (默认值：0)

AImage 组件的 radius 属性决定了图像的显示的圆角值，shape 为“square”时有效。

borderWidth [int] (默认值：0)

AImage 组件的 borderWidth属性决定了图像的显示的边框粗细。

borderColor [color] (默认值：“#606266”)

AImage 组件的 borderColor属性决定了图像的显示的边框颜色。

backgroundColor [color] (默认值：“#606266”)

AImage 组件的 borderWidth属性决定了图像的显示的背景颜色。

backgroundOpacity [real] (默认值：1.0)

AImage 组件的 borderWidth属性决定了图像的显示的透明度。

实例用法

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import "./QView"
import "./QView/BasisComponents"
Page {
    ScrollView{
        anchors.fill: parent
        Column{
            Text {
                text: qsTr("基本图像")
                color: "#606266"

            }
            AImage{
                anchors.topMargin: 25
                width: 200
                height: 200
                src:"qrc:/2.jpg"
            }
            Text {
                text: qsTr("圆形图像")
                color: "#606266"
            }
            AImage{
                anchors.topMargin: 25
                width: 200
                height: 200
                shape: "circle"
                src:"qrc:/2.jpg"
            }
            Text {
                text: qsTr("自定义圆角:radius:20")
                color: "#606266"
            }
            AImage{
                anchors.topMargin: 25
                width: 200
                height: 200
                radius:20
                src:"qrc:/2.jpg"
            }
            Text {
                text: qsTr("填充模式:默认Stretch")
                color: "#606266"
            }
            AImage{
                anchors.topMargin: 25
                width: 200
                height: 200
                src:"qrc:/2.jpg"
            }
            Text {
                text: qsTr("填充模式:PreserveAspectFit")
                color: "#606266"
            }
            AImage{
                anchors.topMargin: 25
                width: 200
                height: 200
                fillMode : "PreserveAspectFit"
                src:"qrc:/2.jpg"
            }
            Text {
                text: qsTr("填充模式:PreserveAspectCrop")
                color: "#606266"
            }
            AImage{
                anchors.topMargin: 15
                width: 200
                height: 200
                fillMode : "PreserveAspectCrop"
                src:"qrc:/2.jpg"
            }
            Text {
                text: qsTr("填充模式:Tile")
                color: "#606266"
            }
            AImage{
                anchors.topMargin: 25
                width: 200
                height: 200
                fillMode : "Tile"
                src:"qrc:/2.jpg"
            }
            Text {
                text: qsTr("填充模式:TileVertically")
                color: "#606266"
            }
            AImage{
                anchors.topMargin: 15
                width: 200
                height: 200
                fillMode : "TileVertically"
                src:"qrc:/2.jpg"
            }
            Text {
                text: qsTr("填充模式:TileHorizontally")
                color: "#606266"
            }
            AImage{
                anchors.topMargin: 25
                width: 200
                height: 200
                fillMode : "TileHorizontally"
                src:"qrc:/2.jpg"
            }
            Text {
                text: qsTr("填充模式:Pad")
                color: "#606266"
            }
            AImage{
                anchors.topMargin: 25
                width: 200
                height: 200
                fillMode : "Pad"
                src:"qrc:/2.jpg"
            }
            Text {
                text: qsTr("---------------------------------")
                color: "#606266"
                anchors.topMargin: 25
            }
        }

    }


}

OK！
至此，问题解决。欢迎留言交流