【QView】基于QML的UI组件框架 之 AIcon(图标)【未完待续】

【未完待续】后续还会加入双击、长按等信号

先上结果演示

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

硬件：通用PC(测试有效)
系统：Windows (均测试有效) ，由于这个示例是使用直接下载的阿里矢量图标字体，QT在使用时可能在android或者linux下会乱码，解决办法参照我的文章QT、qml 使用矢量图标字体库iconfont时 在linux或者Android下会显示乱码
软件 ：基于QT6.2.4 + Qml

功能描述

AIcon类型用于应用图标显示。使用阿里矢量图标，主要新增图标与文件的相对位置关系调整等功能。

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

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

    property string icon:               ""              //图标UNICODE码
    property string iconFamily :        "adimecoin"     //图标字体名称
    property color  iconColor:          "#606266"       //图标颜色
    property int    iconSize:           16              //图标的大小
    property bool   bold:               false           //是否加粗
    property string label:              ""              //label
    property string labelFamily:        "adimecoin"     //图标字体名称
    property string labelPos:           "bottom"        //label相对于icon的方位
    property color  labelColor:         "#606266"       //label的颜色
    property int    labelSize:          8              //label的大小
    property int    space:              0               //label和icon间距
    property real   radius:             0               //圆角值，(默认 0)
    property int    borderWidth:        1               //边框宽度
    property color  borderColor:        "#606266"       //边框颜色
    property color  backgroundColor:    "transparent"   //背景颜色
    property real   backgroundOpacity:  1.0             //背景透明度

icon[string ] (默认值：“”)

AIcon组件的 icon属性决定了图标（icon）的unicode码，即显示内容。

iconFamily [string] (默认值：“adimecoin”)

AIcon组件的 iconFamily 属性决定了图标（icon）的字体名称。

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

AIcon组件的 iconColor属性决定了图标（icon）的颜色。

iconSize [int] (默认值：16)

AIcon组件的 iconSize 属性决定了图标（icon）的大小。

bold[bool] (默认值： false)

AIcon组件的 bold属性决定了文字（label）的是否加粗。

label[string ] (默认值：“”)

AIcon组件的 label属性决定了文字（label）的显示内容。

labelFamily[string] (默认值：“adimecoin”)

AIcon组件的 label属性决定了文字（label）的字体。

labelPos[string] (默认值：“bottom”)

AIcon组件的 labelPos属性决定了图标（icon）和文字(label)的相对位置，以下是 labelPos的所有可能值及其含义：
top：图标文字下上显示，文字相对于图标在正上方。
bottom图标文字上下显示，文字相对于图标在正下方。
left图标文字右左显示，文字相对于图标在正左侧。
right图标文字左右显示，文字相对于图标在正右侧。

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

AIcon组件的 labelColor属性决定了文字(label)的颜色。

labelSize[int] (默认值：8)

AIcon组件的 labelSize属性决定了文字(label)的大小。

space[int] (默认值：0)

AIcon组件的 space属性决定了图标（icon） 和 文字(label)的间距。

radius[real] (默认值：0)

AIcon组件的 radius属性决定了AIcon的圆角值。

borderWidth [int] (默认值：1)

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

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

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

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

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

backgroundOpacity [real] (默认值：1.0)

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

实例用法

/******************************************************************************
 * Copyright 2023-Adiemcoin.
 * All right reserved. See COPYRIGHT for detailed Information.
 *
 * @文件       IconsPage.qml
 * @概要       XXXX Function
 *
 * @作者       Adimecoin(QQ:413819260)
 * @e-mail    adimecoin@foxmail.com
 * @创建日期   2023/11/30
 * @修改历史
 *****************************************************************************/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import "./QView"
import "./QView/BasisComponents"
Page {
    property var iconModel: []
    FontLoader {
        id: customFont
        source: "qrc:/QView-Demo/QML/QView/adimecoin.ttf"
    }
    Component.onCompleted: {
        iconModel = jsonData;
    }
    Item {
        id: description
        height: 160
        Column{
            AImage{
                width: 200
                height: 100
                src:"qrc:/QView-Demo/QML/QView/QView.png"
                radius: 20
            }
            Row{
                Text {
                    text: qsTr("图标库名称: ")
                    color: APPSettings.contentColor
                }
                Text {
                    text: qsTr(iconModel.name)
                    color: APPSettings.contentColor
                }
            }
            Row{
                Text {
                    text: qsTr("图标库字体: ")
                    color: APPSettings.contentColor
                }
                Text {
                    text: qsTr(iconModel.font_family)
                    color: APPSettings.contentColor
                }
            }
            Row{
                Text {
                    text: qsTr("图标库描述: ")
                    color: APPSettings.contentColor
                }
                Text {
                    text: qsTr(iconModel.description)
                    color: APPSettings.contentColor
                }
            }
        }
    }
    GridView{
        anchors.top: description.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        model: jsonData.glyphs
        delegate: AIcon{
            width: 80
            height: 80
            iconFamily: iconModel.font_family
            iconSize: 32
            icon: String.fromCharCode(parseInt(modelData.unicode, 16))
            labelPos: "bottom"
            labelSize: 12
            label: modelData.name
        }
        clip: true
        cellWidth: 80
        cellHeight: 80

    }


}

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