update

example/CMakeLists.txt

@@ -8,7 +8,7 @@ if(APPLE)
     set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
 endif()
 
-#设置插件位置，不然import example有时候会爆红
+#导入exmaple的QML位置，不然import example有时候会爆红
 set(QML_IMPORT_PATH ${CMAKE_BINARY_DIR}/example CACHE STRING "Qt Creator extra QML import paths" FORCE)
 
 #判断FluentUI库类型

example/qml/page/T_Acrylic.qml

@@ -9,35 +9,81 @@ FluScrollablePage{
 
     title:"Acrylic"
 
+    RowLayout{
+        Layout.topMargin: 20
+        FluText{
+            text:"tintColor->"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluColorPicker{
+            id:color_picker
+        }
+    }
+    RowLayout{
+        FluText{
+            text:"tintOpacity->"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_tint_opacity
+            value: 65
+        }
+    }
+    RowLayout{
+        FluText{
+            text:"blurRadius->"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_blur_radius
+            value: 32
+        }
+    }
     FluArea{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        height: 1200/4+20
-        height: 1200/5+20
         paddings: 10
-
+        Layout.topMargin: 10
         FluRectangle{
-            width: 1920/5
+            width: 1920/4
-            height: 1200/5
+            height: 1200/4
             radius:[15,15,15,15]
             Image {
                 id:image
                 asynchronous: true
-                source: "qrc:/example/res/image/banner_3.jpg"
+                source: "qrc:/example/res/image/bg_scenic.png"
                 anchors.fill: parent
                 sourceSize: Qt.size(2*width,2*height)
             }
             FluAcrylic {
-                sourceItem:image
+                id:acrylic
-                anchors.bottom: parent.bottom
+                target: image
-                anchors.right: parent.right
+                width: 200
-                width: 100
+                height: 200
-                height: 100
+                tintOpacity: slider_tint_opacity.value/100
+                tintColor: color_picker.colorValue
+                blurRadius: slider_blur_radius.value
+                x:(image.width-width)/2
+                y:(image.height-height)/2
                 FluText {
                     anchors.centerIn: parent
                     text: "Acrylic"
                     color: "#FFFFFF"
                     font.bold: true
                 }
+                MouseArea {
+                    property point clickPos: Qt.point(0,0)
+                    id:drag_area
+                    anchors.fill: parent
+                    onPressed: (mouse)=>{
+                                   clickPos = Qt.point(mouse.x, mouse.y)
+                               }
+                    onPositionChanged: (mouse)=>{
+                                           var delta = Qt.point(mouse.x - clickPos.x,mouse.y - clickPos.y)
+                                           acrylic.x = acrylic.x + delta.x
+                                           acrylic.y = acrylic.y + delta.y
+                                       }
+                }
             }
             Layout.topMargin: 20
         }
@@ -54,7 +100,7 @@ FluScrollablePage{
     radius: 8
     }
     FluAcrylic{
-        sourceItem:image
+        target:image
         width: 100
         height: 100
         anchors.centerIn: parent

example/qml/page/T_Home.qml

@@ -68,19 +68,14 @@ FluScrollablePage{
                 id: control
                 width: 220
                 height: 240
-                FluArea{
+                FluItem{
-                    radius: 8
+                    radius: [8,8,8,8]
                     width: 200
                     height: 220
                     anchors.centerIn: parent
-                    color: 'transparent'
+                    FluAcrylic{
-                    FluAcrylic {
-                        sourceItem:bg
                         anchors.fill: parent
-                        color: FluTheme.dark ? Window.active ?  Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+                        tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
-                        rectX: list.x-list.contentX+10+(control.width)*index
-                        rectY: list.y+10
-                        acrylicOpacity:0.8
                     }
                     Rectangle{
                         anchors.fill: parent
@@ -99,7 +94,6 @@ FluScrollablePage{
                             }
                         }
                     }
-
                     ColumnLayout{
                         Image {
                             Layout.topMargin: 20

example/qml/page/T_Http.qml

@@ -133,9 +133,6 @@ FluContentPage{
                 implicitWidth: parent.width
                 implicitHeight: 36
                 text: "下载文件"
-                onYChanged: {
-                    console.debug(y)
-                }
                 onClicked: {
                     file_dialog.open()
                 }

example/qml/window/MainWindow.qml

@@ -65,7 +65,6 @@ CustomWindow {
         }
         positiveText:"退出"
         neutralText:"取消"
-        blurSource: nav_view
         onPositiveClicked:{
             window.deleteWindow()
             FluApp.closeApp()

src/imports/FluentUI/Controls/FluAcrylic.qml

@@ -2,36 +2,44 @@ import QtQuick
 import Qt5Compat.GraphicalEffects
 import FluentUI
 
-Item {
+FluItem {
     id: control
-    property alias color: rect.color
+    property color tintColor: Qt.rgba(1,1,1,1)
-    property alias acrylicOpacity: rect.opacity
+    property real tintOpacity: 0.65
-    property alias radius:bg.radius
+    property real luminosity: 0.01
-    property alias blurRadius: blur.radius
+    property real noiseOpacity : 0.066
-    property int rectX: control.x
+    property alias target : effect_source.sourceItem
-    property int rectY: control.y
+    property int blurRadius: 32
-    property var sourceItem: control.parent
+
-    FluRectangle{
+    ShaderEffectSource {
-        id:bg
+        id: effect_source
         anchors.fill: parent
-        radius: [8,8,8,8]
+        visible: false
-        ShaderEffectSource {
+        sourceRect: Qt.rect(control.x, control.y, control.width, control.height)
-            id: effect_source
-            anchors.fill: parent
-            sourceItem: control.sourceItem
-            sourceRect: Qt.rect(rectX, rectY, control.width, control.height)
-            Rectangle {
-                id: rect
-                anchors.fill: parent
-                color: "white"
-                opacity: 0.5
-            }
-        }
-        FastBlur {
-            id:blur
-            radius: 50
-            anchors.fill: effect_source
-            source: effect_source
-        }
     }
+
+    FastBlur {
+        id:fast_blur
+        anchors.fill: parent
+        source: effect_source
+        radius: control.blurRadius
+    }
+
+    Rectangle{
+        anchors.fill: parent
+        color: Qt.rgba(255, 255, 255, luminosity)
+    }
+
+    Rectangle{
+        anchors.fill: parent
+        color: Qt.rgba(tintColor.r, tintColor.g, tintColor.b, tintOpacity)
+    }
+
+    Image{
+        anchors.fill: parent
+        source: "../Image/noise.png"
+        fillMode: Image.Tile
+        opacity: control.noiseOpacity
+    }
+
 }

src/imports/FluentUI/Controls/FluColorPicker.qml

@@ -11,6 +11,7 @@ Button{
     height: 36
     implicitWidth: width
     implicitHeight: height
+    property alias colorValue: container.colorValue
     background:
         Rectangle{
         id:layout_color

src/imports/FluentUI/Controls/FluContentDialog.qml

@@ -16,17 +16,12 @@ FluPopup {
     signal negativeClicked
     signal positiveClicked
     property int buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-    property var minWidth: {
-        if(Window.window==null)
-            return 400
-        return  Math.min(Window.window.width,400)
-    }
     focus: true
+    implicitWidth: 400
+    implicitHeight: text_title.height + text_message.height + layout_actions.height
     Rectangle {
         id:layout_content
         anchors.fill: parent
-        implicitWidth:minWidth
-        implicitHeight: text_title.height + text_message.height + layout_actions.height
         color: 'transparent'
         radius:5
         FluText{
@@ -62,7 +57,7 @@ FluPopup {
             id:layout_actions
             height: 68
             radius: 5
-            color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255, blurBackground ? blurOpacity - 0.4 : 1) : Qt.rgba(243/255,243/255,243/255,blurBackground ? blurOpacity - 0.4 : 1)
+            color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
             anchors{
                 top:text_message.bottom
                 left: parent.left

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -697,7 +697,7 @@ Item {
         border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
         border.width:  d.isMinimal || d.isCompactAndPanel ? 1 : 0
         color: {
-            if(d.isMinimal){
+            if(d.isMinimal || d.enableNavigationPanel){
                 return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
             }
             return "transparent"
@@ -722,20 +722,6 @@ Item {
                 return true
             return d.isMinimalAndPanel  ? true : false
         }
-        FluAcrylic {
-            sourceItem:loader_content
-            anchors.fill: layout_list
-            color: {
-                if(d.isMinimalAndPanel || d.isCompactAndPanel){
-                    return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
-                }
-                return "transparent"
-            }
-            visible: d.isMinimalAndPanel || d.isCompactAndPanel
-            rectX: d.isCompactAndPanel ? (layout_list.x - 50) : layout_list.x
-            rectY: layout_list.y - 60
-            acrylicOpacity:0.9
-        }
         Item{
             id:layout_header
             width: layout_list.width

src/imports/FluentUI/Controls/FluPopup.qml

@@ -10,11 +10,6 @@ Popup {
     modal:true
     anchors.centerIn: Overlay.overlay
     closePolicy: Popup.CloseOnEscape
-    property alias blurSource: blur.sourceItem
-    property bool blurBackground: true
-    property alias blurOpacity: blur.acrylicOpacity
-    property alias blurRectX: blur.rectX
-    property alias blurRectY: blur.rectY
     enter: Transition {
         NumberAnimation {
             properties: "scale"
@@ -45,12 +40,8 @@ Popup {
             to:0
         }
     }
-
+    background: FluRectangle{
-    background: FluAcrylic{
+        radius: [5,5,5,5]
-        id:blur
+        color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1)
-        color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1)
-        rectX: popup.x
-        rectY: popup.y
-        acrylicOpacity:blurBackground ? 0.8 : 1
     }
 }