diff --git a/example/qml/page/T_Home.qml b/example/qml/page/T_Home.qml index 8100050d..10f477b3 100644 --- a/example/qml/page/T_Home.qml +++ b/example/qml/page/T_Home.qml @@ -22,6 +22,7 @@ FluScrollablePage{ Layout.fillWidth: true height: 320 Image { + id: bg fillMode:Image.PreserveAspectCrop anchors.fill: parent verticalAlignment: Qt.AlignTop @@ -61,6 +62,7 @@ FluScrollablePage{ } clip: false delegate:Item{ + id: control width: 220 height: 240 FluArea{ @@ -68,6 +70,15 @@ FluScrollablePage{ width: 200 height: 220 anchors.centerIn: parent + color: 'transparent' + FluAcrylic { + sourceItem:bg + anchors.fill: parent + color: FluTheme.dark ? 'black' : 'white' + rectX: control.parent.x-control.parent.contentX+10+(control.width)*index + rectY: control.parent.y+10 + acrylicOpacity:0.5 + } Rectangle{ anchors.fill: parent radius: 8 diff --git a/src/imports/FluentUI/Controls/FluAcrylic.qml b/src/imports/FluentUI/Controls/FluAcrylic.qml index 32cf2277..0d8e05f0 100644 --- a/src/imports/FluentUI/Controls/FluAcrylic.qml +++ b/src/imports/FluentUI/Controls/FluAcrylic.qml @@ -8,6 +8,8 @@ Item { property alias acrylicOpacity: rect.opacity property alias radius:bg.radius property alias blurRadius: blur.radius + property int rectX: control.x + property int rectY: control.y property var sourceItem: control.parent FluRectangle{ id:bg @@ -17,7 +19,7 @@ Item { id: effect_source anchors.fill: parent sourceItem: control.sourceItem - sourceRect: Qt.rect(control.x, control.y, control.width, control.height) + sourceRect: Qt.rect(rectX, rectY, control.width, control.height) Rectangle { id: rect anchors.fill: parent