amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-07-03 08:35:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzihcu
2023-03-01 11:58:30 +08:00
parent 0d6bc69b3c
commit 392f6e0047
36 changed files with 427 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/controls/FluAppBar.qml
View File

@ -53,6 +53,13 @@ Rectangle{
height: parent.height
spacing: 5
TFpsMonitor{
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: 12
Layout.topMargin: 5
visible: FluApp.isFps
}
RowLayout{
Layout.alignment: Qt.AlignVCenter
spacing: 5

8
src/controls/FluDropShadow.qml Normal file
View File

@ -0,0 +1,8 @@
import QtQuick 2.15
import QtGraphicalEffects 1.15
DropShadow {
radius: 5
samples: 4
color: FluApp.isDark ? "#80FFFFFF" : "#80000000"
}

43
src/controls/FluProgressBar.qml
View File

@ -1,7 +1,6 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
//进度条4
FluRectangle {
id: control
@ -9,51 +8,41 @@ FluRectangle {
height: 6
radius: [3,3,3,3]
clip: true
color:Qt.rgba(214/255,214/255,214/255,1)
property real progress: 0.25
color: FluApp.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
property real progress: 0.5
property bool indeterminate: true
Component.onCompleted: {
anim.enabled = false
if(indeterminate){
rect.x = -control.width*0.5
bar.x = -control.width*0.5
behavior.enabled = true
bar.x = control.width
}else{
rect.x = 0
bar.x = 0
}
anim.enabled = true
}
}
Rectangle{
id:rect
id:bar
radius: 3
width: control.width*progress
height: control.height
color:Qt.rgba(0/255,102/255,180/255,1)
color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) : Qt.rgba(0/255,102/255,180/255,1)
Behavior on x{
id:anim
enabled: true
id:behavior
enabled: false
NumberAnimation{
duration: 800
duration: 1000
onRunningChanged: {
if(!running){
anim.enabled = false
rect.x = -control.width*0.5
anim.enabled = true
timer.start()
behavior.enabled = false
bar.x = -control.width*0.5
behavior.enabled = true
bar.x = control.width
}
}
}
}
Timer{
id:timer
running: indeterminate
interval: 800
triggeredOnStart: true
onTriggered: {
rect.x = control.width
}
}
}
}

64
src/controls/FluProgressRing.qml
View File

@ -1,7 +1,6 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
//进度条4
Rectangle {
id: control
@ -10,28 +9,42 @@ Rectangle {
radius: 30
border.width: linWidth
color: "#00000000"
border.color: Qt.rgba(214/255,214/255,214/255,1)
border.color: FluApp.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
property real linWidth : 6
property real progress: 0.25
property bool indeterminate: true
readonly property real radius2 : radius - linWidth/2
property color primaryColor : Qt.rgba(0/255,102/255,180/255,1)
property color primaryColor : FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) : Qt.rgba(0/255,102/255,180/255,1)
onProgressChanged: {
canvas.requestPaint()
}
Connections{
target: FluApp
function onIsDarkChanged(isDark){
canvas.requestPaint()
}
}
Component.onCompleted: {
if(indeterminate){
behavior.enabled = true
control.rotation = 360
}
}
Behavior on rotation{
id:anim
enabled: true
id:behavior
enabled: false
NumberAnimation{
duration: 800
duration: 1000
onRunningChanged: {
if(!running){
anim.enabled = false
behavior.enabled = false
control.rotation = 0
anim.enabled = true
timer.start()
behavior.enabled = true
control.rotation = 360
}
}
}
@ -54,30 +67,21 @@ Rectangle {
ctx.arc(width/2, height/2, radius2 ,-0.5 * Math.PI,-0.5 * Math.PI + progress * 2 * Math.PI);
ctx.stroke();
ctx.closePath();
// var start_x = width/2 + Math.cos(-0.5 * Math.PI) * radius2;
// var start_y = height/2 + Math.sin(-0.5 * Math.PI) * radius2;
// ctx.beginPath();
// ctx.arc(start_x, start_y, 3, 0, 2*Math.PI);
// ctx.fill();
// ctx.closePath();
// var end_x = width/2 + Math.cos(-0.5 * Math.PI + progress * 2 * Math.PI) * radius2;
// var end_y = height/2 + Math.sin(-0.5 * Math.PI + progress * 2 * Math.PI) * radius2;
// ctx.beginPath();
// ctx.arc(end_x, end_y, 3, 0, 2*Math.PI);
// ctx.fill();
// ctx.closePath();
// var start_x = width/2 + Math.cos(-0.5 * Math.PI) * radius2;
// var start_y = height/2 + Math.sin(-0.5 * Math.PI) * radius2;
// ctx.beginPath();
// ctx.arc(start_x, start_y, 3, 0, 2*Math.PI);
// ctx.fill();
// ctx.closePath();
// var end_x = width/2 + Math.cos(-0.5 * Math.PI + progress * 2 * Math.PI) * radius2;
// var end_y = height/2 + Math.sin(-0.5 * Math.PI + progress * 2 * Math.PI) * radius2;
// ctx.beginPath();
// ctx.arc(end_x, end_y, 3, 0, 2*Math.PI);
// ctx.fill();
// ctx.closePath();
ctx.restore();
}
}
Timer{
id:timer
running: indeterminate
interval: 800
triggeredOnStart: true
onTriggered: {
control.rotation = 360
}
}
}

52
src/controls/FluRectangle.qml
View File

@ -1,13 +1,12 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Shapes 1.15
import QtGraphicalEffects 1.15
Item{
id:root
property var radius:[0,0,0,0]
property color color : "#FFFFFF"
property color borderColor:"transparent"
property color borderColor:"red"
property int borderWidth: 1
default property alias contentItem: container.children
@ -20,35 +19,40 @@ Item{
}
Shape {
id: shape
width: root.width
height: root.height
layer.enabled: true
layer.samples: 4
layer.smooth: true
Canvas {
id: canvas
anchors.fill: parent
visible: false
ShapePath {
startX: 0
startY: radius[0]
fillColor: color
strokeColor: borderColor
strokeWidth: borderWidth
PathQuad { x: radius[0]; y: 0; controlX: 0; controlY: 0 }
PathLine { x: shape.width - radius[1]; y: 0 }
PathQuad { x: shape.width; y: radius[1]; controlX: shape.width; controlY: 0 }
PathLine { x: shape.width; y: shape.height - radius[2] }
PathQuad { x: shape.width - radius[2]; y: shape.height; controlX: shape.width; controlY: shape.height }
PathLine { x: radius[3]; y: shape.height }
PathQuad { x: 0; y: shape.height - radius[3]; controlX: 0; controlY: shape.height }
PathLine { x: 0; y: radius[0] }
onPaint: {
var ctx = getContext("2d");
var x = 0;
var y = 0;
var w = root.width;
var h = root.height;
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.beginPath();
ctx.moveTo(x + radius[0], y);
ctx.lineTo(x + w - radius[1], y);
ctx.arcTo(x + w, y, x + w, y + radius[1], radius[1]);
ctx.lineTo(x + w, y + h - radius[2]);
ctx.arcTo(x + w, y + h, x + w - radius[2], y + h, radius[2]);
ctx.lineTo(x + radius[3], y + h);
ctx.arcTo(x, y + h, x, y + h - radius[3], radius[3]);
ctx.lineTo(x, y + radius[0]);
ctx.arcTo(x, y, x + radius[0], y, radius[0]);
ctx.closePath();
ctx.fillStyle = root.color;
ctx.fill();
ctx.restore();
}
}
OpacityMask {
anchors.fill: container
source: container
maskSource: shape
maskSource: canvas
}
}

71
src/controls/FluShadow.qml
View File

@ -1,71 +0,0 @@
import QtQuick 2.15
Item {
id:root
anchors.fill: parent
anchors.margins: -5
property color shadowColor: "#333333"
property int radius: 5
property bool isShadow: true
Rectangle{
id:react_background
width: root.width - 8
height: root.height - 8
anchors.centerIn: parent
radius: root.radius
color:"#00000000"
opacity: 0.25
border.width: 1
border.color : Qt.lighter(shadowColor,1.1)
}
Rectangle{
width: root.width - 6
height: root.height - 6
anchors.centerIn: parent
radius: root.radius
color:"#00000000"
border.width: 1
opacity: 0.2
border.color : Qt.lighter(shadowColor,1.2)
}
Rectangle{
width: root.width - 4
height: root.height - 4
anchors.centerIn: parent
radius: root.radius
color:"#00000000"
border.width: 1
opacity: 0.15
border.color : Qt.lighter(shadowColor,1.3)
}
Rectangle{
width: root.width - 2
height: root.height - 2
anchors.centerIn: parent
radius: root.radius
color:"#00000000"
border.width: 1
opacity: 0.1
border.color : Qt.lighter(shadowColor,1.4)
}
Rectangle{
width: root.width
height: root.height
anchors.centerIn: parent
radius: root.radius
color:"#00000000"
border.width: 1
opacity:0.05
border.color : Qt.lighter(shadowColor,1.5)
}
}

17
src/controls/FluSlider.qml
View File

@ -26,18 +26,16 @@ Item{
radius: [3,3,3,3]
clip: true
anchors.verticalCenter: parent.verticalCenter
color:Qt.rgba(138/255,138/255,138/255,1)
color:FluApp.isDark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
Rectangle{
id:rect
radius: 3
width: control.width*(value/100)
height: control.height
color:Qt.rgba(0/255,102/255,180/255,1)
color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) :Qt.rgba(0/255,102/255,180/255,1)
}
}
Rectangle{
id:dot
width: dotSize
@ -45,16 +43,13 @@ Item{
radius: 15
anchors.verticalCenter: parent.verticalCenter
layer.enabled: true
layer.effect: DropShadow {
radius: 5
samples: 4
color: "#80000000"
}
color:FluApp.isDark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
layer.effect: FluDropShadow {}
Rectangle{
width: dotSize/2
height: dotSize/2
radius: dotSize/4
color:Qt.rgba(0/255,102/255,180/255,1)
color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) :Qt.rgba(0/255,102/255,180/255,1)
anchors.centerIn: parent
scale: control_mouse.containsMouse ? 1.2 : 1
Behavior on scale {

6
src/controls/FluTooltip.qml
View File

@ -19,10 +19,6 @@ ToolTip {
color: FluApp.isDark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)
radius: 5
layer.enabled: true
layer.effect: DropShadow {
radius: 5
samples: 4
color: "#80000000"
}
layer.effect: FluDropShadow {}
}
}

8
src/controls/FluWindow.qml
View File

@ -12,6 +12,8 @@ Rectangle {
return Window.Maximized === Window.window.visibility
}
property string title: "FluentUI"
property var minimumSize
property var maximumSize
Behavior on opacity{
NumberAnimation{
@ -47,6 +49,12 @@ Rectangle {
if(FluApp.equalsWindow(view,window)){
helper.initWindow(view);
helper.setTitle(title);
if(minimumSize){
helper.setMinimumSize(minimumSize)
}
if(maximumSize){
helper.setMaximumSize(maximumSize)
}
}
}
}

70
src/controls/TFpsMonitor.qml Normal file
View File

@ -0,0 +1,70 @@
import QtQuick 2.15
import FluentUI 1.0
/*! TODO */
Item {
id: toou2d_fps
width: contentItemLoader.width + 5;
height: contentItemLoader.height + 5;
readonly property alias fps: _private.fps;
readonly property alias fpsAvg: _private.fpsAvg;
property color color: "#C0C0C0"
property Component contentItem: contentComponent;
Component{
id:contentComponent
FluText{
text: " Avg " + fpsAvg + " | " + fps + " Fps";
}
}
FluObject{
id:_private;
property int frameCounter: 0
property int frameCounterAvg: 0
property int counter: 0
property int fps: 0
property int fpsAvg: 0
}
Rectangle {
id: monitor
radius: 3
width: 6
height: width
opacity: 0;
NumberAnimation on rotation {
from:0
to: 360
duration: 800
loops: Animation.Infinite
}
onRotationChanged: _private.frameCounter++;
}
Loader{
id:contentItemLoader
sourceComponent: contentItem
}
Timer {
interval: 2000
repeat: true
running: visible
onTriggered: {
_private.frameCounterAvg += _private.frameCounter;
_private.fps = _private.frameCounter/2;
_private.counter++;
_private.frameCounter = 0;
if (_private.counter >= 3) {
_private.fpsAvg = _private.frameCounterAvg/(2 * _private.counter)
_private.frameCounterAvg = 0;
_private.counter = 0;
}
}
}
}