wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

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

4
example/MainPage.qml
View File

@ -30,6 +30,10 @@ FluWindow {
text:"InfoBar"
page:"qrc:/T_InfoBar.qml"
}
ListElement{
text:"Progress"
page:"qrc:/T_Progress.qml"
}
ListElement{
text:"Rectangle"
page:"qrc:/T-Rectangle.qml"

1
example/T-Rectangle.qml
View File

@ -12,6 +12,7 @@ Item {
FluText{
text:"Rectangle"
fontStyle: FluText.TitleLarge
Layout.topMargin: 20
}
FluRectangle{

42
example/T_Progress.qml Normal file
View File

@ -0,0 +1,42 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
ColumnLayout{
spacing: 5
FluText{
text:"Progress"
fontStyle: FluText.TitleLarge
}
FluProgressBar{
Layout.topMargin: 20
}
FluProgressRing{
Layout.topMargin: 10
}
FluProgressBar{
id:progress_bar
Layout.topMargin: 20
indeterminate: false
}
FluProgressRing{
id:progress_ring
Layout.topMargin: 10
indeterminate: false
}
FluSlider{
Layout.topMargin: 30
value:50
onValueChanged:{
progress_bar.progress = value/100
progress_ring.progress = value/100
}
}
}
}

1
example/qml.qrc
View File

@ -9,5 +9,6 @@
<file>T_Buttons.qml</file>
<file>T-Rectangle.qml</file>
<file>T_InfoBar.qml</file>
<file>T_Progress.qml</file>
</qresource>
</RCC>

7
src/Fluent.cpp
View File

@ -63,10 +63,9 @@ void Fluent::initializeEngine(QQmlEngine *engine, const char *uri)
{
Q_UNUSED(engine)
Q_UNUSED(uri)
// QFont font;
// font.setFamily("Microsoft YaHei");
// QGuiApplication::setFont(font);
// QQuickWindow::setTextRenderType(QQuickWindow::NativeTextRendering);
QFont font;
font.setFamily("Microsoft YaHei");
QGuiApplication::setFont(font);
QFontDatabase::addApplicationFont(":/com.zhuzichu/res/font/fontawesome-webfont.ttf");
engine->rootContext()->setContextProperty("FluApp",FluApp::getInstance());
}

19
src/build-preset/plugins.qmltypes
View File

@ -1025,15 +1025,27 @@ Module {
exports: ["FluentUI/FluProgressBar 1.0"]
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "data"
defaultProperty: "contentItem"
Property { name: "progress"; type: "double" }
Property { name: "indeterminate"; type: "bool" }
Property { name: "radius"; type: "QVariant" }
Property { name: "color"; type: "QColor" }
Property { name: "borderColor"; type: "QColor" }
Property { name: "borderWidth"; type: "int" }
Property { name: "contentItem"; type: "QQuickItem"; isList: true; isReadonly: true }
}
Component {
prototype: "QQuickItem"
prototype: "QQuickRectangle"
name: "FluentUI/FluProgressRing 1.0"
exports: ["FluentUI/FluProgressRing 1.0"]
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "data"
Property { name: "linWidth"; type: "double" }
Property { name: "progress"; type: "double" }
Property { name: "indeterminate"; type: "bool" }
Property { name: "radius2"; type: "double"; isReadonly: true }
Property { name: "primaryColor"; type: "QColor" }
}
Component {
prototype: "QQuickItem"
@ -1078,6 +1090,9 @@ Module {
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "data"
Property { name: "lineWidth"; type: "int" }
Property { name: "dotSize"; type: "int" }
Property { name: "value"; type: "int" }
}
Component {
prototype: "QQuickText"

6
src/controls/FluAppBar.qml
View File

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

90
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{
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
}