diff --git a/example/CMakeLists.txt b/example/CMakeLists.txt index 10734dbf..b684a632 100644 --- a/example/CMakeLists.txt +++ b/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库类型 diff --git a/example/qml/page/T_Acrylic.qml b/example/qml/page/T_Acrylic.qml index 3c625222..093ea129 100644 --- a/example/qml/page/T_Acrylic.qml +++ b/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/5+20 + height: 1200/4+20 paddings: 10 - + Layout.topMargin: 10 FluRectangle{ - width: 1920/5 - height: 1200/5 + width: 1920/4 + 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 - anchors.bottom: parent.bottom - anchors.right: parent.right - width: 100 - height: 100 + id:acrylic + target: image + width: 200 + height: 200 + 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 diff --git a/example/qml/page/T_Home.qml b/example/qml/page/T_Home.qml index 0c67b6ac..28c58cd1 100644 --- a/example/qml/page/T_Home.qml +++ b/example/qml/page/T_Home.qml @@ -68,19 +68,14 @@ FluScrollablePage{ id: control width: 220 height: 240 - FluArea{ - radius: 8 + FluItem{ + radius: [8,8,8,8] width: 200 height: 220 anchors.centerIn: parent - color: 'transparent' - FluAcrylic { - sourceItem:bg + FluAcrylic{ 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) - rectX: list.x-list.contentX+10+(control.width)*index - rectY: list.y+10 - acrylicOpacity:0.8 + tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) } Rectangle{ anchors.fill: parent @@ -99,7 +94,6 @@ FluScrollablePage{ } } } - ColumnLayout{ Image { Layout.topMargin: 20 diff --git a/example/qml/page/T_Http.qml b/example/qml/page/T_Http.qml index e18dc449..1ee6bbc3 100644 --- a/example/qml/page/T_Http.qml +++ b/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() } diff --git a/example/qml/window/MainWindow.qml b/example/qml/window/MainWindow.qml index 921c166e..64c23cab 100644 --- a/example/qml/window/MainWindow.qml +++ b/example/qml/window/MainWindow.qml @@ -65,7 +65,6 @@ CustomWindow { } positiveText:"退出" neutralText:"取消" - blurSource: nav_view onPositiveClicked:{ window.deleteWindow() FluApp.closeApp() diff --git a/example/res/image/bg_scenic.png b/example/res/image/bg_scenic.png new file mode 100644 index 00000000..ca77f871 Binary files /dev/null and b/example/res/image/bg_scenic.png differ diff --git a/src/imports/FluentUI/Controls/FluAcrylic.qml b/src/imports/FluentUI/Controls/FluAcrylic.qml index ff8f79ee..831b876d 100644 --- a/src/imports/FluentUI/Controls/FluAcrylic.qml +++ b/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 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 + property color tintColor: Qt.rgba(1,1,1,1) + property real tintOpacity: 0.65 + property real luminosity: 0.01 + property real noiseOpacity : 0.066 + property alias target : effect_source.sourceItem + property int blurRadius: 32 + + ShaderEffectSource { + id: effect_source anchors.fill: parent - radius: [8,8,8,8] - ShaderEffectSource { - 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 - } + visible: false + sourceRect: Qt.rect(control.x, control.y, control.width, control.height) } + + 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 + } + } diff --git a/src/imports/FluentUI/Controls/FluColorPicker.qml b/src/imports/FluentUI/Controls/FluColorPicker.qml index e18f92fd..685e612a 100644 --- a/src/imports/FluentUI/Controls/FluColorPicker.qml +++ b/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 diff --git a/src/imports/FluentUI/Controls/FluContentDialog.qml b/src/imports/FluentUI/Controls/FluContentDialog.qml index 6ad0b86c..dd325092 100644 --- a/src/imports/FluentUI/Controls/FluContentDialog.qml +++ b/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 diff --git a/src/imports/FluentUI/Controls/FluNavigationView.qml b/src/imports/FluentUI/Controls/FluNavigationView.qml index 57eedce9..5fb2f898 100644 --- a/src/imports/FluentUI/Controls/FluNavigationView.qml +++ b/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 diff --git a/src/imports/FluentUI/Controls/FluPopup.qml b/src/imports/FluentUI/Controls/FluPopup.qml index 8c802fc3..75129f9e 100644 --- a/src/imports/FluentUI/Controls/FluPopup.qml +++ b/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: FluAcrylic{ - id:blur - 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 + background: FluRectangle{ + radius: [5,5,5,5] + color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1) } } diff --git a/src/imports/FluentUI/Image/noise.png b/src/imports/FluentUI/Image/noise.png new file mode 100644 index 00000000..af77ffe4 Binary files /dev/null and b/src/imports/FluentUI/Image/noise.png differ