amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-26 21:37:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzichu 2023-07-27 17:46:18 +08:00
parent 4f27ff41b9
commit f531f5b138
12 changed files with 108 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/CMakeLists.txt
View File

@ -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库类型

70
example/qml/page/T_Acrylic.qml
View File

@ -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

14
example/qml/page/T_Home.qml
View File

@ -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

3
example/qml/page/T_Http.qml
View File

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

1
example/qml/window/MainWindow.qml
View File

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

BIN
example/res/image/bg_scenic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 MiB

66
src/imports/FluentUI/Controls/FluAcrylic.qml
View File

@ -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
}
}

1
src/imports/FluentUI/Controls/FluColorPicker.qml
View File

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

11
src/imports/FluentUI/Controls/FluContentDialog.qml
View File

@ -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

16
src/imports/FluentUI/Controls/FluNavigationView.qml
View File

@ -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

15
src/imports/FluentUI/Controls/FluPopup.qml
View File

@ -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)
}
}

BIN
src/imports/FluentUI/Image/noise.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB