This commit is contained in:
zhuzihcu
2023-02-28 18:29:00 +08:00
parent f1b52fc5ee
commit 02e4579021
38 changed files with 1188 additions and 156 deletions

View File

@ -3,7 +3,6 @@ import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0
Rectangle{
color: FluApp.isDark ? "#323232" : "#FFFFFF"
@ -63,7 +62,7 @@ Rectangle{
}
FluToggleSwitch{
checked: FluApp.isDark
onClicked2:{
onClickFunc:function(){
FluApp.isDark = !FluApp.isDark
}
}
@ -73,7 +72,7 @@ Rectangle{
icon : FluentIcons.FA_window_minimize
Layout.alignment: Qt.AlignVCenter
iconSize: 15
iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
text:"最小化"
onClicked: {
Window.window.showMinimized()
}
@ -85,7 +84,7 @@ Rectangle{
return Window.Maximized === Window.window.visibility ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize
}
Layout.alignment: Qt.AlignVCenter
iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
text:Window.Maximized === Window.window.visibility?"向下还原":"最大化"
iconSize: 15
onClicked: {
toggleMaximized()
@ -94,19 +93,18 @@ Rectangle{
FluIconButton{
icon : FluentIcons.FA_close
Layout.alignment: Qt.AlignVCenter
text:"关闭"
iconSize: 15
iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
onClicked: {
Window.window.close()
}
}
}
Rectangle{
FluDivider{
width: parent.width;
height: 1;
anchors.bottom: parent.bottom;
color: FluApp.isDark ? "#666666" : "#EEEEEE"
}
}

View File

@ -4,6 +4,7 @@ import QtQuick.Controls 2.15
Rectangle {
id: button
property string text: "Standard Button"
property int startPadding : 15
property int endPadding : 15
property int topPadding: 8
@ -15,12 +16,12 @@ Rectangle {
color:{
if(FluApp.isDark){
if(disabled){
return "#C7C7C7"
return Qt.rgba(59/255,59/255,59/255,1)
}
return button_mouse.containsMouse ? "#444444" : "#3e3e3e"
}else{
if(disabled){
return "#C7C7C7"
return Qt.rgba(252/255,252/255,252/255,1)
}
return button_mouse.containsMouse ? "#FBFBFB" : "#FFFFFF"
}
@ -34,13 +35,26 @@ Rectangle {
FluText {
id: button_text
text: "Standard Button"
text: button.text
font.pixelSize: 14
leftPadding: button.startPadding
rightPadding: button.endPadding
topPadding: button.topPadding
bottomPadding: button.bottomPadding
anchors.centerIn: parent
color: {
if(FluApp.isDark){
if(disabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
return Qt.rgba(0,0,0,1)
}
}
}
MouseArea {

View File

@ -1,4 +1,5 @@
import QtQuick 2.15
import QtQuick 2.15
import FluentUI 1.0
Item {

View File

@ -1,4 +1,5 @@
import QtQuick 2.15
import QtQuick 2.15
import FluentUI 1.0
Item {

View File

@ -0,0 +1,8 @@
import QtQuick 2.15
import FluentUI 1.0
Rectangle {
color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
}

View File

@ -1,4 +1,5 @@
import QtQuick 2.15
import QtQuick 2.15
import FluentUI 1.0
Item {

View File

@ -1,30 +1,48 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
Rectangle {
id: button
property string text: "Filled Button"
property int startPadding : 15
property int endPadding : 15
property int topPadding: 8
property int bottomPadding: 8
property bool disabled: false
property color primaryColor : "#0064B0"
signal clicked
radius: 4
color:{
if(disabled){
return "#C7C7C7"
if(FluApp.isDark){
if(disabled){
return Qt.rgba(199/255,199/255,199/255,1)
}
return button_mouse.containsMouse ? Qt.rgba(74/255,149/255,207/255,1) : Qt.rgba(76/255,160/255,224/255,1)
}else{
if(disabled){
return Qt.rgba(199/255,199/255,199/255,1)
}
return button_mouse.containsMouse ? Qt.rgba(25/255,117/255,187/255,1) : Qt.rgba(0/255,102/255,180/255,1)
}
return button_mouse.containsMouse ? Qt.lighter(primaryColor,1.15) : primaryColor
}
width: button_text.implicitWidth
height: button_text.implicitHeight
FluText {
id: button_text
text: "Filled Button"
color: "#FFFFFFFF"
text: button.text
color: {
if(FluApp.isDark){
if(disabled){
return Qt.rgba(173/255,173/255,173/255,1)
}
return Qt.rgba(0,0,0,1)
}else{
return Qt.rgba(1,1,1,1)
}
}
font.pixelSize: 14
leftPadding: button.startPadding
rightPadding: button.endPadding

16
src/controls/FluIcon.qml Normal file
View File

@ -0,0 +1,16 @@
import QtQuick 2.15
Text {
property int icon
property int iconSize: 20
property color iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
id:text_icon
font.family: "fontawesome"
font.pixelSize: iconSize
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: iconColor
text: (String.fromCharCode(icon).toString(16));
}

View File

@ -1,4 +1,5 @@
import QtQuick 2.15
import FluentUI 1.0
Rectangle {
@ -8,16 +9,23 @@ Rectangle {
property int iconSize: 20
property int icon
property color iconColor: "#000000"
property alias text: tool_tip.text
signal clicked
property bool disabled: false
radius: 4
color: {
if(FluApp.isDark){
return button_mouse.containsMouse ? "#000000" : "#00000000"
if(disabled){
return Qt.rgba(59/255,59/255,59/255,1)
}
return button_mouse.containsMouse ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(50/255,50/255,50/255,1)
}else{
return button_mouse.containsMouse ? "#F4F4F4" : "#00000000"
if(disabled){
return Qt.rgba(1,1,1,1)
}
return button_mouse.containsMouse ? Qt.rgba(244/255,244/255,244/255,1) : Qt.rgba(1,1,1,1)
}
}
@ -28,7 +36,19 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.centerIn: parent
color: iconColor
color:{
if(FluApp.isDark){
if(disabled){
return Qt.rgba(130/255,130/255,130/255,1)
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
return Qt.rgba(161/255,161/255,161/255,1)
}
return Qt.rgba(0,0,0,1)
}
}
text: (String.fromCharCode(icon).toString(16));
}
@ -36,9 +56,21 @@ Rectangle {
id:button_mouse
anchors.fill: parent
hoverEnabled: true
enabled: !disabled
onClicked: {
button.clicked()
}
}
FluTooltip{
id:tool_tip
visible: {
if(button.text === ""){
return false
}
return button_mouse.containsMouse
}
delay: 1000
}
}

233
src/controls/FluInfoBar.qml Normal file
View File

@ -0,0 +1,233 @@
import QtQuick 2.15
import FluentUI 1.0
FluObject {
id:infoBar
property var root;
property int layoutY: 75;
function showSuccess(text,duration,moremsg){
mcontrol.create(mcontrol.const_success,text,duration,moremsg ? moremsg : "");
}
function showInfo(text,duration,moremsg){
mcontrol.create(mcontrol.const_info,text,duration,moremsg ? moremsg : "");
}
function showWarning(text,duration,moremsg){
mcontrol.create(mcontrol.const_warning,text,duration,moremsg ? moremsg : "");
}
function showError(text,duration,moremsg){
mcontrol.create(mcontrol.const_error,text,duration,moremsg ? moremsg : "");
}
function showCustom(itemcomponent,duration){
mcontrol.createCustom(itemcomponent,duration);
}
FluObject{
id:mcontrol
property string const_success: "success";
property string const_info: "info";
property string const_warning: "warning";
property string const_error: "error";
property int maxWidth: 300;
property var screenLayout: null;
function create(type,text,duration,moremsg){
if(screenLayout){
var last = screenLayout.getLastloader();
if(last.type === type && last.text === text && moremsg === last.moremsg){
last.restart();
return;
}
}
initScreenLayout();
contentComponent.createObject(screenLayout,{
type:type,
text:text,
duration:duration,
moremsg:moremsg,
});
}
function createCustom(itemcomponent,duration){
initScreenLayout();
if(itemcomponent){
contentComponent.createObject(screenLayout,{itemcomponent:itemcomponent,duration:duration});
}
}
function initScreenLayout(){
if(screenLayout == null){
screenLayout = screenlayoutComponent.createObject(root);
screenLayout.y = infoBar.layoutY;
screenLayout.z = 100000;
}
}
Component{
id:screenlayoutComponent
Column{
spacing: 20
width: parent.width
move: Transition {
NumberAnimation { properties: "y"; easing.type: Easing.OutBack; duration: 300 }
}
onChildrenChanged: if(children.length === 0) destroy();
function getLastloader(){
if(children.length > 0){
return children[children.length - 1];
}
return null;
}
}
}
Component{
id:contentComponent
Item{
id:content;
property int duration: 1500
property var itemcomponent
property string type
property string text
property string moremsg
width: parent.width;
height: loader.height;
function close(){
content.destroy();
}
function restart(){
delayTimer.restart();
}
Timer {
id:delayTimer
interval: duration; running: true; repeat: true
onTriggered: content.close();
}
Loader{
id:loader;
x:(parent.width - width) / 2;
property var _super: content;
scale: item ? 1 : 0;
asynchronous: true
Behavior on scale {
NumberAnimation {
easing.type: Easing.OutBack;
duration: 100
}
}
sourceComponent:itemcomponent ? itemcomponent : mcontrol.fluent_sytle;
}
}
}
property Component fluent_sytle: Rectangle{
width: rowlayout.width + (_super.moremsg ? 25 : 80);
height: rowlayout.height + 20;
color: {
if(FluApp.isDark){
switch(_super.type){
case mcontrol.const_success: return Qt.rgba(57/255,61/255,27/255,1);
case mcontrol.const_warning: return Qt.rgba(67/255,53/255,25/255,1);
case mcontrol.const_info: return Qt.rgba(39/255,39/255,39/255,1);
case mcontrol.const_error: return Qt.rgba(68/255,39/255,38/255,1);
}
return Qt.rgba(255,255,255,1)
}else{
switch(_super.type){
case mcontrol.const_success: return "#dff6dd";
case mcontrol.const_warning: return "#fff4ce";
case mcontrol.const_info: return "#f4f4f4";
case mcontrol.const_error: return "#fde7e9";
}
return "#FFFFFF"
}
}
radius: 4
border.width: 1
border.color: {
if(FluApp.isDark){
switch(_super.type){
case mcontrol.const_success: return Qt.rgba(56/255,61/255,27/255,1);
case mcontrol.const_warning: return Qt.rgba(66/255,53/255,25/255,1);
case mcontrol.const_info: return Qt.rgba(38/255,39/255,39/255,1);
case mcontrol.const_error: return Qt.rgba(67/255,39/255,38/255,1);
}
return "#FFFFFF"
}else{
switch(_super.type){
case mcontrol.const_success: return "#d2e8d0";
case mcontrol.const_warning: return "#f0e6c2";
case mcontrol.const_info: return "#e6e6e6";
case mcontrol.const_error: return "#eed9db";
}
return "#FFFFFF"
}
}
Row{
id:rowlayout
x:20;
y:(parent.height - height) / 2;
spacing: 10
FluIcon{
icon:{
switch(_super.type){
case mcontrol.const_success: return FluentIcons.FA_check_circle;
case mcontrol.const_warning: return FluentIcons.FA_info_circle;
case mcontrol.const_info: return FluentIcons.FA_info_circle;
case mcontrol.const_error: return FluentIcons.FA_times_circle;
}
return FluentIcons.FA_info_circle
}
iconSize:20
color: {
if(FluApp.isDark){
switch(_super.type){
case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1);
case mcontrol.const_warning: return Qt.rgba(252/255,225/255,0/255,1);
case mcontrol.const_info: return Qt.rgba(76/255,160/255,224/255,1);
case mcontrol.const_error: return Qt.rgba(255/255,153/255,164/255,1);
}
return "#FFFFFF"
}else{
switch(_super.type){
case mcontrol.const_success: return "#0f7b0f";
case mcontrol.const_warning: return "#9d5d00";
case mcontrol.const_info: return "#0066b4";
case mcontrol.const_error: return "#c42b1c";
}
return "#FFFFFF"
}
}
}
FluText{
text:_super.text
wrapMode: Text.WrapAnywhere
width: Math.min(implicitWidth,mcontrol.maxWidth)
}
}
}
}
}

View File

@ -0,0 +1,7 @@
import QtQuick 2.15
QtObject {
id:flu_object;
default property list<QtObject> children;
}

View File

@ -1,4 +1,5 @@
import QtQuick 2.15
import QtQuick 2.15
import FluentUI 1.0
Item {

View File

@ -1,4 +1,5 @@
import QtQuick 2.15
import QtQuick 2.15
import FluentUI 1.0
Item {

View File

@ -1,5 +1,111 @@
import QtQuick 2.15
import QtQuick 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0
Item {
id:root
width: childrenRect.width
height: childrenRect.height
property bool checked: false
property string text: "RodioButton"
signal clicked
property bool disabled: false
RowLayout{
Rectangle{
id:rect_check
width: 20
height: 20
radius: 10
layer.samples: 4
layer.enabled: true
layer.smooth: true
border.width: {
if(checked&&disabled){
return 3
}
if(root_mouse.containsPress){
if(checked){
return 5
}
return 1
}
if(root_mouse.containsMouse){
if(checked){
return 3
}
return 1
}
return checked ? 5 : 1
}
Behavior on border.width {
NumberAnimation{
duration: 100
}
}
border.color: {
if(disabled){
if(FluApp.isDark){
return Qt.rgba(82/255,82/255,82/255,1)
}else{
return Qt.rgba(198/255,198/255,198/255,1)
}
}
if(checked){
if(FluApp.isDark){
return Qt.rgba(76/255,164/255,224/255,1)
}else{
return Qt.rgba(0/255,102/255,180/255,1)
}
}else{
if(FluApp.isDark){
return Qt.rgba(161/255,161/255,161/255,1)
}else{
return Qt.rgba(141/255,141/255,141/255,1)
}
}
}
color:{
if(disabled&&checked){
return Qt.rgba(159/255,159/255,159/255,1)
}
if(FluApp.isDark){
if(root_mouse.containsMouse){
return Qt.rgba(43/255,43/255,43/255,1)
}
return Qt.rgba(50/255,50/255,50/255,1)
}else{
if(root_mouse.containsMouse){
if(checked){
return Qt.rgba(1,1,1,1)
}
return Qt.rgba(222/255,222/255,222/255,1)
}
return Qt.rgba(1,1,1,1)
}
}
}
FluText{
text: root.text
Layout.alignment: Qt.AlignVCenter
}
}
MouseArea{
id:root_mouse
hoverEnabled: true
anchors.fill: parent
enabled: !disabled
onClicked: {
root.clicked()
}
}
}

View File

@ -1,5 +1,54 @@
import QtQuick 2.15
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Shapes 1.15
import QtGraphicalEffects 1.15
Item {
Item{
id:root
property var radius:[0,0,0,0]
property color color : "#FFFFFF"
property color borderColor:"transparent"
property int borderWidth: 1
default property alias contentItem: container.children
Rectangle{
id:container
width: root.width
height: root.height
visible: false
color:root.color
}
Shape {
id: shape
width: root.width
height: root.height
layer.enabled: true
layer.samples: 4
layer.smooth: true
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] }
}
}
OpacityMask {
anchors.fill: container
source: container
maskSource: shape
}
}

View File

@ -0,0 +1,71 @@
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

@ -1,4 +1,5 @@
import QtQuick 2.15
import QtQuick 2.15
import FluentUI 1.0
Item {

View File

@ -1,5 +1,5 @@
import QtQuick 2.15
import FluentUI 1.0
Text {
@ -18,57 +18,55 @@ Text {
property int fontStyle: FluText.Body
property color textColor: FluApp.isDark ? "#FFFFFF" : "#1A1A1A"
property int pixelSize : 14
color: textColor
Component.onCompleted: {
setFontStyle(fontStyle)
}
onStyleChanged: {
setFontStyle(fontStyle)
}
function setFontStyle(fontStyle) {
font.bold: {
switch (fontStyle) {
case FluText.Display:
font.bold = true
font.pixelSize = text.pixelSize * 4
break
case FluText.TitleLarge:
font.bold = true
font.pixelSize = text.pixelSize * 2
break
case FluText.Title:
font.bold = true
font.pixelSize = text.pixelSize * 1.5
break
case FluText.Subtitle:
font.bold = true
font.pixelSize = text.pixelSize * 0.9
break
case FluText.BodyLarge:
font.bold = false
font.pixelSize = text.pixelSize * 1.1
break
case FluText.BodyStrong:
font.bold = true
font.pixelSize = text.pixelSize * 1.0
break
case FluText.Body:
font.bold = false
font.pixelSize = text.pixelSize
break
case FluText.Caption:
font.bold = false
font.pixelSize = text.pixelSize * 0.8
break
default:
font.pixelSize = text.pixelSize * 1.0
break
case FluText.Display:
return true
case FluText.TitleLarge:
return true
case FluText.Title:
return true
case FluText.Subtitle:
return true
case FluText.BodyLarge:
return false
case FluText.BodyStrong:
return true
case FluText.Body:
return false
case FluText.Caption:
return false
default:
return false
}
}
font.pixelSize: {
switch (fontStyle) {
case FluText.Display:
return text.pixelSize * 4
case FluText.TitleLarge:
return text.pixelSize * 2
case FluText.Title:
return text.pixelSize * 1.5
case FluText.Subtitle:
return text.pixelSize * 0.9
case FluText.BodyLarge:
return text.pixelSize * 1.1
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Body:
return text.font.pixelSize = 14
case FluText.Caption:
return text.pixelSize * 0.8
default:
return text.pixelSize * 1.0
}
}
}

View File

@ -1,4 +1,5 @@
import QtQuick 2.15
import QtQuick 2.15
import FluentUI 1.0
Item {

View File

@ -1,6 +1,7 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Shapes 1.15
import FluentUI 1.0
Item {

View File

@ -1,10 +1,11 @@
import QtQuick 2.0
import QtQuick.Controls 2.0
import FluentUI 1.0
Switch {
id: root
property color checkedColor: "#0064B0"
signal clicked2
property var onClickFunc
width: 40
implicitWidth: 40
height: 20
@ -24,10 +25,13 @@ Switch {
}
return "#323232"
}else{
if(root.checked){
return checkedColor
}
if(switch_mouse.containsMouse){
return "#F4F4F4"
}
return root.checked ? checkedColor : "white"
return "#FFFFFF"
}
}
border.width: 1
@ -52,7 +56,11 @@ Switch {
anchors.fill: parent
hoverEnabled: true
onClicked: {
root.clicked2()
if(root.onClickFunc){
root.onClickFunc()
}else{
root.checked = !root.checked
}
}
}
}

View File

@ -0,0 +1,27 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
ToolTip {
id:tool_tip
contentItem: FluText {
text: tool_tip.text
font: tool_tip.font
padding: 4
wrapMode: Text.WrapAnywhere
}
background: Rectangle{
anchors.fill: parent
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"
}
}
}

View File

@ -15,7 +15,7 @@ Rectangle {
Behavior on opacity{
NumberAnimation{
duration: 100
duration: 100
}
}
@ -27,7 +27,7 @@ Rectangle {
onIsMaxChanged: {
if(isMax){
root.anchors.margins = 8
root.anchors.margins = 8*(1/Screen.devicePixelRatio)
root.anchors.fill = parent
}else{
root.anchors.margins = 0
@ -38,7 +38,7 @@ Rectangle {
color : FluApp.isDark ? "#202020" : "#F3F3F3"
Component.onCompleted: {
console.debug("onCompleted")
console.debug("onCompleted")
}
Connections{
@ -55,4 +55,25 @@ Rectangle {
id:helper
}
FluInfoBar{
id:infoBar
root: root
}
function showSuccess(text,duration,moremsg){
infoBar.showSuccess(text,duration,moremsg);
}
function showInfo(text,duration,moremsg){
infoBar.showInfo(text,duration,moremsg);
}
function showWarning(text,duration,moremsg){
infoBar.showWarning(text,duration,moremsg);
}
function showError(text,duration,moremsg){
infoBar.showError(text,duration,moremsg);
}
}