From d09414db1bf6451c3b03555d4de00d40a3eb76eb Mon Sep 17 00:00:00 2001
From: zhuzichu <zhuzichu520@gmail.com>
Date: Wed, 28 Jun 2023 18:07:39 +0800
Subject: [PATCH] update

---
 example/qml/component/CodeExpander.qml     |  3 +-
 example/qml/global/ItemsOriginal.qml       |  6 +++
 example/qml/page/T_Image.qml               | 48 ++++++++++++++++++++++
 src/imports/FluentUI/Controls/FluImage.qml | 42 +++++++++++++++++++
 4 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 example/qml/page/T_Image.qml
 create mode 100644 src/imports/FluentUI/Controls/FluImage.qml

diff --git a/example/qml/component/CodeExpander.qml b/example/qml/component/CodeExpander.qml
index 41ec8fd9..97f99365 100644
--- a/example/qml/component/CodeExpander.qml
+++ b/example/qml/component/CodeExpander.qml
@@ -133,7 +133,8 @@ FluExpander{
                     "FluRemoteLoader",
                     "FluMenuBar",
                     "FluPagination",
-                    "FluRadioButtons"
+                    "FluRadioButtons",
+                    "FluImage"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");
diff --git a/example/qml/global/ItemsOriginal.qml b/example/qml/global/ItemsOriginal.qml
index b65ad888..aa8852ca 100644
--- a/example/qml/global/ItemsOriginal.qml
+++ b/example/qml/global/ItemsOriginal.qml
@@ -54,6 +54,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_Text.qml")
             }
         }
+        FluPaneItem{
+            title:"Image"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Image.qml")
+            }
+        }
         FluPaneItem{
             title:"Slider"
             image:"qrc:/example/res/image/control/Slider.png"
diff --git a/example/qml/page/T_Image.qml b/example/qml/page/T_Image.qml
new file mode 100644
index 00000000..1016fcfb
--- /dev/null
+++ b/example/qml/page/T_Image.qml
@@ -0,0 +1,48 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Image"
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 300
+        paddings: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+            FluImage{
+                width: 384
+                height: 240
+                source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_4.jpg"
+                onStatusChanged:{
+                    if(status === Image.Error){
+                        showError("图片加载失败，请重新加载")
+                    }
+                }
+                clickErrorListener: function(){
+                    source = "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluImage{
+    width: 400
+    height: 300
+    source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
+}'
+    }
+
+}
diff --git a/src/imports/FluentUI/Controls/FluImage.qml b/src/imports/FluentUI/Controls/FluImage.qml
new file mode 100644
index 00000000..e39b4a7d
--- /dev/null
+++ b/src/imports/FluentUI/Controls/FluImage.qml
@@ -0,0 +1,42 @@
+import QtQuick
+import QtQuick.Controls
+import FluentUI
+
+Item {
+    property url source
+    property string errorButtonText: "重新加载"
+    property var status
+    property var clickErrorListener : function(){
+        image.source = ""
+        image.source = control.source
+    }
+    id: control
+    Image{
+        id:image
+        anchors.fill: parent
+        source: control.source
+        opacity: control.status === Image.Ready
+        onStatusChanged:{
+            control.status = image.status
+        }
+        Behavior on opacity {
+            NumberAnimation{
+                duration: 83
+            }
+        }
+    }
+    Rectangle{
+        anchors.fill: parent
+        color: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
+        FluProgressRing{
+            anchors.centerIn: parent
+            visible: control.status === Image.Loading
+        }
+        FluFilledButton{
+            text: control.errorButtonText
+            anchors.centerIn: parent
+            visible: control.status === Image.Error
+            onClicked: clickErrorListener()
+        }
+    }
+}