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

update

Browse Source
This commit is contained in:
朱子楚\zhuzi
2023-02-28 23:57:55 +08:00
parent 02e4579021
commit 0d6bc69b3c
12 changed files with 303 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/controls/FluAppBar.qml
View File

@ -8,9 +8,9 @@ Rectangle{
color: FluApp.isDark ? "#323232" : "#FFFFFF"
height: 50
width: {
if(parent==null)
return 200
return parent.width
if(parent==null)
return 200
return parent.width
}
property string title: "标题"
@ -84,7 +84,11 @@ Rectangle{
return Window.Maximized === Window.window.visibility ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize
}
Layout.alignment: Qt.AlignVCenter
text:Window.Maximized === Window.window.visibility?"向下还原":"最大化"
text:{
if(Window.window == null)
return ""
Window.Maximized === Window.window.visibility?"向下还原":"最大化"
}
iconSize: 15
onClicked: {
toggleMaximized()

59
src/controls/FluProgressBar.qml
View File

@ -1,6 +1,59 @@
import QtQuick 2.15
import FluentUI 1.0
import QtQuick 2.12
import QtQuick.Controls 2.12
Item {
//进度条4
FluRectangle {
id: control
width: 180
height: 6
radius: [3,3,3,3]
clip: true
color:Qt.rgba(214/255,214/255,214/255,1)
property real progress: 0.25
property bool indeterminate: true
Component.onCompleted: {
anim.enabled = false
if(indeterminate){
rect.x = -control.width*0.5
}else{
rect.x = 0
}
anim.enabled = true
}
Rectangle{
id:rect
radius: 3
width: control.width*progress
height: control.height
color:Qt.rgba(0/255,102/255,180/255,1)
Behavior on x{
id:anim
enabled: true
NumberAnimation{
duration: 800
onRunningChanged: {
if(!running){
anim.enabled = false
rect.x = -control.width*0.5
anim.enabled = true
timer.start()
}
}
}
}
Timer{
id:timer
running: indeterminate
interval: 800
triggeredOnStart: true
onTriggered: {
rect.x = control.width
}
}
}
}

83
src/controls/FluProgressRing.qml
View File

@ -1,6 +1,83 @@
import QtQuick 2.15
import FluentUI 1.0
import QtQuick 2.12
import QtQuick.Controls 2.12
Item {
//进度条4
Rectangle {
id: control
width: 60
height: 60
radius: 30
border.width: linWidth
color: "#00000000"
border.color: 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)
onProgressChanged: {
canvas.requestPaint()
}
Behavior on rotation{
id:anim
enabled: true
NumberAnimation{
duration: 800
onRunningChanged: {
if(!running){
anim.enabled = false
control.rotation = 0
anim.enabled = true
timer.start()
}
}
}
}
Canvas {
id:canvas
anchors.fill: parent
antialiasing: true
renderTarget: Canvas.Image
onPaint: {
var ctx = canvas.getContext("2d");
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.lineWidth = linWidth;
ctx.strokeStyle = primaryColor;
ctx.fillStyle = primaryColor;
ctx.beginPath();
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();
ctx.restore();
}
}
Timer{
id:timer
running: indeterminate
interval: 800
triggeredOnStart: true
onTriggered: {
control.rotation = 360
}
}
}

92
src/controls/FluSlider.qml
View File

@ -1,6 +1,92 @@
import QtQuick 2.15
import FluentUI 1.0
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.15
Item {
Item{
id:root
property int lineWidth: 6
property int dotSize: 30
property int value: 50
Component.onCompleted: {
dot.x =value/100*control.width - dotSize/2
root.value = Qt.binding(function(){
return (dot.x+15)/control.width*100
})
}
FluRectangle {
id: control
width: 300
height: root.lineWidth
radius: [3,3,3,3]
clip: true
anchors.verticalCenter: parent.verticalCenter
color: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)
}
}
Rectangle{
id:dot
width: dotSize
height: dotSize
radius: 15
anchors.verticalCenter: parent.verticalCenter
layer.enabled: true
layer.effect: DropShadow {
radius: 5
samples: 4
color: "#80000000"
}
Rectangle{
width: dotSize/2
height: dotSize/2
radius: dotSize/4
color:Qt.rgba(0/255,102/255,180/255,1)
anchors.centerIn: parent
scale: control_mouse.containsMouse ? 1.2 : 1
Behavior on scale {
NumberAnimation{
duration: 150
}
}
}
MouseArea{
id:control_mouse
anchors.fill: parent
hoverEnabled: true
drag {
target: dot
axis: Drag.XAxis
minimumX: -dotSize/2
maximumX: control.width - dotSize/2
}
onPressed: {
tool_tip.visible = true
}
onReleased: {
tool_tip.visible = false
}
}
FluTooltip{
id:tool_tip
text:String(root.value)
}
}
}

2
src/controls/FluText.qml
View File

@ -60,7 +60,7 @@ Text {
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Body:
return text.font.pixelSize = 14
return text.pixelSize * 1.0
case FluText.Caption:
return text.pixelSize * 0.8
default:

1
src/controls/FluTooltip.qml
View File

@ -9,6 +9,7 @@ ToolTip {
contentItem: FluText {
text: tool_tip.text
font: tool_tip.font
fontStyle: FluText.BodyLarge
padding: 4
wrapMode: Text.WrapAnywhere
}