update
|
@ -9,6 +9,7 @@ Window {
|
|||
id:app
|
||||
color: "#00000000"
|
||||
Component.onCompleted: {
|
||||
FluApp.isFps = true
|
||||
FluApp.setAppWindow(app)
|
||||
FluApp.routes = {
|
||||
"/":"qrc:/MainPage.qml",
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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]
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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 {}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
|
@ -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
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
|
@ -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>
|
||||
|
|
After Width: | Height: | Size: 59 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 44 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 40 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 32 KiB |
|
@ -22,6 +22,7 @@ FluApp::FluApp(QObject *parent)
|
|||
: QObject{parent}
|
||||
{
|
||||
isDark(true);
|
||||
isFps(true);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
import QtQuick 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
|
||||
DropShadow {
|
||||
radius: 5
|
||||
samples: 4
|
||||
color: FluApp.isDark ? "#80FFFFFF" : "#80000000"
|
||||
}
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
||||
|
||||
}
|
|
@ -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 {
|
||||
|
|
|
@ -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 {}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|