main
zhuzihcu 2023-03-01 11:58:30 +08:00
parent 0d6bc69b3c
commit 392f6e0047
36 changed files with 427 additions and 243 deletions

View File

@ -9,6 +9,7 @@ Window {
id:app
color: "#00000000"
Component.onCompleted: {
FluApp.isFps = true
FluApp.setAppWindow(app)
FluApp.routes = {
"/":"qrc:/MainPage.qml",

View File

@ -10,6 +10,8 @@ FluWindow {
width: 800
height: 600
title: "FluentUI"
minimumSize: Qt.size(600,400)
// property var maximumSize
FluAppBar{
id:appbar
@ -26,6 +28,10 @@ FluWindow {
text:"ToggleSwitch"
page:"qrc:/T_ToggleSwitch.qml"
}
ListElement{
text:"Slider"
page:"qrc:/T_Slider.qml"
}
ListElement{
text:"InfoBar"
page:"qrc:/T_InfoBar.qml"
@ -36,7 +42,7 @@ FluWindow {
}
ListElement{
text:"Rectangle"
page:"qrc:/T-Rectangle.qml"
page:"qrc:/T_Rectangle.qml"
}
ListElement{
text:"Typography"

View File

@ -1,60 +0,0 @@
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:"Rectangle"
fontStyle: FluText.TitleLarge
Layout.topMargin: 20
}
FluRectangle{
width: 50
height: 50
color:"#ffeb3b"
radius:[15,0,0,0]
}
FluRectangle{
width: 50
height: 50
color:"#f7630c"
radius:[0,15,0,0]
}
FluRectangle{
width: 50
height: 50
color:"#e71123"
radius:[0,0,15,0]
}
FluRectangle{
width: 50
height: 50
color:"#b4009e"
radius:[0,0,0,15]
}
FluRectangle{
width: 50
height: 50
color:"#744da9"
radius:[15,15,15,15]
}
FluRectangle{
width: 50
height: 50
color:"#0078d4"
radius:[0,0,0,0]
}
}
}

145
example/T_Rectangle.qml Normal file
View File

@ -0,0 +1,145 @@
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:"Rectangle"
fontStyle: FluText.TitleLarge
}
RowLayout{
Layout.topMargin: 20
FluRectangle{
width: 50
height: 50
color:"#0078d4"
radius:[0,0,0,0]
}
FluRectangle{
width: 50
height: 50
color:"#744da9"
radius:[15,15,15,15]
}
FluRectangle{
width: 50
height: 50
color:"#ffeb3b"
radius:[15,0,0,0]
}
FluRectangle{
width: 50
height: 50
color:"#f7630c"
radius:[0,15,0,0]
}
FluRectangle{
width: 50
height: 50
color:"#e71123"
radius:[0,0,15,0]
}
FluRectangle{
width: 50
height: 50
color:"#b4009e"
radius:[0,0,0,15]
}
}
FluText{
text:"配合图片使用"
fontStyle: FluText.Subtitle
Layout.topMargin: 20
}
RowLayout{
spacing: 14
FluRectangle{
width: 50
height: 50
radius:[25,0,25,25]
Image {
asynchronous: true
anchors.fill: parent
source: "qrc:/res/svg/avatar_1.svg"
}
layer.enabled: true
layer.effect: FluDropShadow {}
}
FluRectangle{
width: 50
height: 50
radius:[10,10,10,10]
Image {
asynchronous: true
anchors.fill: parent
source: "qrc:/res/svg/avatar_2.svg"
}
layer.enabled: true
layer.effect: FluDropShadow {}
}
FluRectangle{
width: 50
height: 50
radius:[25,25,25,25]
Image {
asynchronous: true
anchors.fill: parent
source: "qrc:/res/svg/avatar_3.svg"
}
layer.enabled: true
layer.effect: DropShadow {
radius: 5
samples: 4
color: "#80000000"
}
}
FluRectangle{
width: 50
height: 50
radius:[0,25,25,25]
Image {
asynchronous: true
anchors.fill: parent
source: "qrc:/res/svg/avatar_4.svg"
}
layer.enabled: true
layer.effect: FluDropShadow {}
}
}
FluRectangle{
width: 1080/5
height: 1439/5
radius:[25,25,25,25]
Image {
asynchronous: true
source: "qrc:/res/image/image_huoyin.webp"
anchors.fill: parent
}
Layout.topMargin: 10
layer.enabled: true
layer.effect: FluDropShadow {}
}
}
}

27
example/T_Slider.qml Normal file
View File

@ -0,0 +1,27 @@
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:"Slider"
fontStyle: FluText.TitleLarge
}
FluSlider{
Layout.topMargin: 20
value: 50
}
}
}

View File

@ -7,8 +7,22 @@
<file>SettingPage.qml</file>
<file>AboutPage.qml</file>
<file>T_Buttons.qml</file>
<file>T-Rectangle.qml</file>
<file>T_Rectangle.qml</file>
<file>T_InfoBar.qml</file>
<file>T_Progress.qml</file>
<file>T_Slider.qml</file>
<file>res/image/image_huoyin.webp</file>
<file>res/svg/avatar_1.svg</file>
<file>res/svg/avatar_2.svg</file>
<file>res/svg/avatar_3.svg</file>
<file>res/svg/avatar_4.svg</file>
<file>res/svg/avatar_5.svg</file>
<file>res/svg/avatar_6.svg</file>
<file>res/svg/avatar_7.svg</file>
<file>res/svg/avatar_8.svg</file>
<file>res/svg/avatar_9.svg</file>
<file>res/svg/avatar_10.svg</file>
<file>res/svg/avatar_11.svg</file>
<file>res/svg/avatar_12.svg</file>
</qresource>
</RCC>

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 22 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 44 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 30 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 40 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 25 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 21 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 24 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 20 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 23 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 30 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -22,6 +22,7 @@ FluApp::FluApp(QObject *parent)
: QObject{parent}
{
isDark(true);
isFps(true);
}

View File

@ -12,6 +12,7 @@ class FluApp : public QObject
Q_OBJECT
Q_PROPERTY_AUTO(QString,initialRoute);
Q_PROPERTY_AUTO(bool,isDark);
Q_PROPERTY_AUTO(bool,isFps);
Q_PROPERTY_AUTO(QJsonObject,routes);
public:

View File

@ -30,7 +30,7 @@ void Fluent::registerTypes(const char *uri){
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluShadow.qml"),uri,major,minor,"FluShadow");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDropShadow.qml"),uri,major,minor,"FluDropShadow");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTooltip.qml"),uri,major,minor,"FluTooltip");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDivider.qml"),uri,major,minor,"FluDivider");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluIcon.qml"),uri,major,minor,"FluIcon");

View File

@ -14,3 +14,10 @@ void WindowHelper::setTitle(const QString& text){
void WindowHelper::initWindow(FramelessView* window){
this->window = window;
}
void WindowHelper::setMinimumSize(const QSize &size){
this->window->setMinimumSize(size);
}
void WindowHelper::setMaximumSize(const QSize &size){
this->window->setMaximumSize(size);
}

View File

@ -16,6 +16,8 @@ public:
Q_INVOKABLE void initWindow(FramelessView* window);
Q_INVOKABLE void setTitle(const QString& text);
Q_INVOKABLE void setMinimumSize(const QSize &size);
Q_INVOKABLE void setMaximumSize(const QSize &size);
private:
FramelessView* window;

View File

@ -817,6 +817,14 @@ Module {
name: "setTitle"
Parameter { name: "text"; type: "string" }
}
Method {
name: "setMinimumSize"
Parameter { name: "size"; type: "QSize" }
}
Method {
name: "setMaximumSize"
Parameter { name: "size"; type: "QSize" }
}
}
Component {
prototype: "QQuickRectangle"
@ -896,6 +904,24 @@ Module {
isComposite: true
defaultProperty: "data"
}
Component {
prototype: "QQuickItem"
name: "FluentUI/FluDropShadow 1.0"
exports: ["FluentUI/FluDropShadow 1.0"]
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "data"
Property { name: "fast"; type: "bool" }
Property { name: "source"; type: "QVariant" }
Property { name: "radius"; type: "double" }
Property { name: "samples"; type: "int" }
Property { name: "color"; type: "QColor" }
Property { name: "horizontalOffset"; type: "double" }
Property { name: "verticalOffset"; type: "double" }
Property { name: "spread"; type: "double" }
Property { name: "cached"; type: "bool" }
Property { name: "transparentBorder"; type: "bool" }
}
Component {
prototype: "QQuickRectangle"
name: "FluentUI/FluFilledButton 1.0"
@ -1072,17 +1098,6 @@ Module {
Property { name: "borderWidth"; type: "int" }
Property { name: "contentItem"; type: "QQuickItem"; isList: true; isReadonly: true }
}
Component {
prototype: "QQuickItem"
name: "FluentUI/FluShadow 1.0"
exports: ["FluentUI/FluShadow 1.0"]
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "data"
Property { name: "shadowColor"; type: "QColor" }
Property { name: "radius"; type: "int" }
Property { name: "isShadow"; type: "bool" }
}
Component {
prototype: "QQuickItem"
name: "FluentUI/FluSlider 1.0"
@ -1161,6 +1176,8 @@ Module {
defaultProperty: "data"
Property { name: "isMax"; type: "bool" }
Property { name: "title"; type: "string" }
Property { name: "minimumSize"; type: "QVariant" }
Property { name: "maximumSize"; type: "QVariant" }
Property { name: "window"; type: "QVariant" }
Method {
name: "showSuccess"

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

View File

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

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

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
}
}
}
@ -70,14 +83,5 @@ Rectangle {
}
}
Timer{
id:timer
running: indeterminate
interval: 800
triggeredOnStart: true
onTriggered: {
control.rotation = 360
}
}
}

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

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

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 {

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

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

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

View File

@ -23,6 +23,7 @@
<file>controls/FluIcon.qml</file>
<file>controls/FluDivider.qml</file>
<file>controls/FluTooltip.qml</file>
<file>controls/FluShadow.qml</file>
<file>controls/FluDropShadow.qml</file>
<file>controls/TFpsMonitor.qml</file>
</qresource>
</RCC>