FluentUI/example/qml/page/T_Acrylic.qml

116 lines
3.0 KiB
QML
Raw Normal View History

2023-08-24 15:50:37 +08:00
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
2023-06-12 16:46:02 +08:00
import "qrc:///example/qml/component"
2023-08-26 17:20:30 +08:00
import "../component"
2023-05-12 19:26:49 +08:00
FluScrollablePage{
title:"Acrylic"
2023-07-27 17:46:18 +08:00
RowLayout{
2023-07-27 18:13:50 +08:00
spacing: 10
2023-07-27 17:46:18 +08:00
Layout.topMargin: 20
FluText{
2023-07-27 18:13:50 +08:00
text:"tintColor:"
2023-07-27 17:46:18 +08:00
Layout.alignment: Qt.AlignVCenter
}
FluColorPicker{
id:color_picker
}
}
RowLayout{
2023-07-27 18:13:50 +08:00
spacing: 10
2023-07-27 17:46:18 +08:00
FluText{
2023-07-27 18:13:50 +08:00
text:"tintOpacity:"
2023-07-27 17:46:18 +08:00
Layout.alignment: Qt.AlignVCenter
}
FluSlider{
id:slider_tint_opacity
value: 65
}
}
RowLayout{
2023-07-27 18:13:50 +08:00
spacing: 10
2023-07-27 17:46:18 +08:00
FluText{
2023-07-27 18:13:50 +08:00
text:"blurRadius:"
2023-07-27 17:46:18 +08:00
Layout.alignment: Qt.AlignVCenter
}
FluSlider{
id:slider_blur_radius
value: 32
}
}
2023-05-12 19:26:49 +08:00
FluArea{
Layout.fillWidth: true
2023-07-27 17:46:18 +08:00
height: 1200/4+20
2023-05-12 19:26:49 +08:00
paddings: 10
2023-07-27 17:46:18 +08:00
Layout.topMargin: 10
2023-05-12 19:26:49 +08:00
FluRectangle{
2023-07-27 17:46:18 +08:00
width: 1920/4
height: 1200/4
2023-05-12 22:22:55 +08:00
radius:[15,15,15,15]
2023-05-12 19:26:49 +08:00
Image {
2023-05-14 13:05:06 +08:00
id:image
2023-05-12 19:26:49 +08:00
asynchronous: true
2023-07-27 17:46:18 +08:00
source: "qrc:/example/res/image/bg_scenic.png"
2023-05-12 19:26:49 +08:00
anchors.fill: parent
2023-05-17 11:42:03 +08:00
sourceSize: Qt.size(2*width,2*height)
2023-05-14 13:05:06 +08:00
}
FluAcrylic {
2023-07-27 17:46:18 +08:00
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
2023-05-14 13:05:06 +08:00
FluText {
anchors.centerIn: parent
text: "Acrylic"
color: "#FFFFFF"
font.bold: true
2023-05-12 19:26:49 +08:00
}
2023-07-27 17:46:18 +08:00
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
}
}
2023-05-12 19:26:49 +08:00
}
2023-05-12 22:22:55 +08:00
Layout.topMargin: 20
2023-05-12 19:26:49 +08:00
}
2023-05-12 22:22:55 +08:00
2023-05-12 19:26:49 +08:00
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'Image{
2023-05-14 13:05:06 +08:00
id:image
2023-05-12 19:26:49 +08:00
width: 800
height: 600
source: "qrc:/example/res/image/image_huoyin.webp"
radius: 8
2023-05-14 13:05:06 +08:00
}
2023-05-12 19:26:49 +08:00
FluAcrylic{
2023-07-27 17:46:18 +08:00
target:image
2023-05-12 19:26:49 +08:00
width: 100
height: 100
anchors.centerIn: parent
2023-06-20 19:02:18 +08:00
}
2023-05-12 19:26:49 +08:00
}'
}
}