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, "
"); code = code.replace(/ /g, " "); 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() + } + } +}