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

28
example/AboutPage.qml Normal file
View File

@ -0,0 +1,28 @@
import QtQuick 2.15
import FluentUI 1.0
FluWindow {
width: 500
height: 500
title:"关于"
FluAppBar{
id:appbar
}
FluText{
text:"关于"
fontStyle: FluText.Display
anchors.centerIn: parent
MouseArea{
anchors.fill: parent
onClicked: {
}
}
}
}

View File

@ -12,7 +12,8 @@ Window {
FluApp.setAppWindow(app)
FluApp.routes = {
"/":"qrc:/MainPage.qml",
"/Setting":"qrc:/SettingPage.qml"
"/Setting":"qrc:/SettingPage.qml",
"/About":"qrc:/AboutPage.qml"
}
FluApp.initialRoute = "/"
FluApp.run()

View File

@ -19,8 +19,20 @@ FluWindow {
ListModel{
id:nav_items
ListElement{
text:"Controls"
page:"qrc:/T_Controls.qml"
text:"Buttons"
page:"qrc:/T_Buttons.qml"
}
ListElement{
text:"ToggleSwitch"
page:"qrc:/T_ToggleSwitch.qml"
}
ListElement{
text:"InfoBar"
page:"qrc:/T_InfoBar.qml"
}
ListElement{
text:"Rectangle"
page:"qrc:/T-Rectangle.qml"
}
ListElement{
text:"Typography"
@ -108,7 +120,7 @@ FluWindow {
bottomMargin: 20
}
border.width: 1
border.color: FluApp.isDark ? "#666666" : "#EEEEEE"
border.color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
Loader{
anchors.fill: parent

View File

@ -12,10 +12,17 @@ FluWindow {
}
FluText{
text:"Display"
text:"设置"
fontStyle: FluText.Display
anchors.centerIn: parent
MouseArea{
anchors.fill: parent
onClicked: {
FluApp.navigate("/About")
}
}
}
}

59
example/T-Rectangle.qml Normal file
View File

@ -0,0 +1,59 @@
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
}
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]
}
}
}

141
example/T_Buttons.qml Normal file
View File

@ -0,0 +1,141 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
width: parent.width
ColumnLayout{
spacing: 5
width: parent.width
FluText{
text:"Buttons"
fontStyle: FluText.TitleLarge
}
RowLayout{
Layout.topMargin: 20
width: parent.width
FluButton{
disabled:button_switch.checked
onClicked: {
showInfo("点击StandardButton")
}
}
Item{
height: 1
Layout.fillWidth: true
}
FluToggleSwitch{
id:button_switch
Layout.alignment: Qt.AlignRight
}
FluText{
text:"Disabled"
}
}
FluDivider{
Layout.fillWidth: true ; height:1;
}
RowLayout{
Layout.topMargin: 20
width: parent.width
FluFilledButton{
disabled:filled_button_switch.checked
onClicked:{
showWarning("点击FilledButton")
}
}
Item{
height: 1
Layout.fillWidth: true
}
FluToggleSwitch{
id:filled_button_switch
Layout.alignment: Qt.AlignRight
}
FluText{
text:"Disabled"
}
}
FluDivider{
Layout.fillWidth: true ; height:1
}
RowLayout{
Layout.topMargin: 20
width: parent.width
FluIconButton{
icon:FluentIcons.FA_close
disabled:icon_button_switch.checked
onClicked:{
showSuccess("点击IconButton")
}
}
Item{
height: 1
Layout.fillWidth: true
}
FluToggleSwitch{
id:icon_button_switch
Layout.alignment: Qt.AlignRight
}
FluText{
text:"Disabled"
}
}
FluDivider{
Layout.fillWidth: true ; height:1
}
RowLayout{
Layout.topMargin: 20
width: parent.width
ColumnLayout{
spacing: 8
Repeater{
id:repeater
property int selecIndex : 0
model: 3
delegate: FluRadioButton{
checked : repeater.selecIndex===index
disabled:radio_button_switch.checked
text:"RodioButton_"+index
onClicked:{
repeater.selecIndex = index
}
}
}
}
Item{
height: 1
Layout.fillWidth: true
}
FluToggleSwitch{
id:radio_button_switch
Layout.alignment: Qt.AlignRight
}
FluText{
text:"Disabled"
}
}
}
}

View File

@ -1,50 +0,0 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
Item {
ColumnLayout{
spacing: 5
FluText{
text:"Controls"
fontStyle: FluText.TitleLarge
}
FluButton{
Layout.topMargin: 20
onClicked: {
}
}
FluFilledButton{
onClicked:{
FluApp.navigate("/Setting")
}
}
FluFilledButton{
disabled: true
onClicked:{
}
}
FluIconButton{
Component.onCompleted: {
}
icon:FluentIcons.FA_close
}
FluToggleSwitch{
}
}
}

54
example/T_InfoBar.qml Normal file
View File

@ -0,0 +1,54 @@
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:"InfoBar"
fontStyle: FluText.TitleLarge
}
FluButton{
text:"Info"
Layout.topMargin: 20
onClicked: {
showInfo("这是一个Info样式的InfoBar")
}
}
FluButton{
text:"Warning"
Layout.topMargin: 20
onClicked: {
showWarning("这是一个Warning样式的InfoBar")
}
}
FluButton{
text:"Error"
Layout.topMargin: 20
onClicked: {
showError("这是一个Error样式的InfoBar")
}
}
FluButton{
text:"Success"
Layout.topMargin: 20
onClicked: {
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
}
}
}
}

View File

@ -0,0 +1,26 @@
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:"ToggleSwitch"
fontStyle: FluText.TitleLarge
}
FluToggleSwitch{
Layout.topMargin: 20
}
}
}

View File

@ -1,9 +1,13 @@
<RCC>
<qresource prefix="/">
<file>T_Controls.qml</file>
<file>T_ToggleSwitch.qml</file>
<file>T_Typography.qml</file>
<file>App.qml</file>
<file>MainPage.qml</file>
<file>SettingPage.qml</file>
<file>AboutPage.qml</file>
<file>T_Buttons.qml</file>
<file>T-Rectangle.qml</file>
<file>T_InfoBar.qml</file>
</qresource>
</RCC>

View File

@ -39,10 +39,8 @@ void FluApp::navigate(const QString& route){
qErrnoWarning("没有找到当前路由");
return;
}
bool isAppWindow = route==initialRoute();
FramelessView *view = new FramelessView();
view->engine()->rootContext()->setContextProperty("FluApp",FluApp::getInstance());
view->setColor(isDark() ? QColor(0,0,0,1) : QColor(255, 255, 255, 1));
QObject::connect(view, &QQuickView::statusChanged, view, [&](QQuickView::Status status) {
if (status == QQuickView::Status::Ready) {

View File

@ -30,6 +30,12 @@ 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/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");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluObject.qml"),uri,major,minor,"FluObject");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluInfoBar.qml"),uri,major,minor,"FluInfoBar");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluWindow.qml"),uri,major,minor,"FluWindow");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluRectangle.qml"),uri,major,minor,"FluRectangle");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluAppBar.qml"),uri,major,minor,"FluAppBar");
@ -57,10 +63,10 @@ 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);
// QQuickWindow::setTextRenderType(QQuickWindow::NativeTextRendering);
QFontDatabase::addApplicationFont(":/com.zhuzichu/res/font/fontawesome-webfont.ttf");
engine->rootContext()->setContextProperty("FluApp",FluApp::getInstance());
}

View File

@ -4,9 +4,9 @@
void FluentUI::create(QQmlEngine *engine)
{
Fluent::getInstance()->registerTypes(URI_STR);
Fluent::getInstance()->initializeEngine(engine,URI_STR);
engine->addImportPath("/");
Fluent::getInstance()->initializeEngine(engine,URI_STR);
Fluent::getInstance()->registerTypes(URI_STR);
}
QString FluentUI::version()

View File

@ -855,6 +855,7 @@ Module {
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "data"
Property { name: "text"; type: "string" }
Property { name: "startPadding"; type: "int" }
Property { name: "endPadding"; type: "int" }
Property { name: "topPadding"; type: "int" }
@ -879,6 +880,14 @@ Module {
isComposite: true
defaultProperty: "data"
}
Component {
prototype: "QQuickRectangle"
name: "FluentUI/FluDivider 1.0"
exports: ["FluentUI/FluDivider 1.0"]
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "data"
}
Component {
prototype: "QQuickItem"
name: "FluentUI/FluDropDownButton 1.0"
@ -894,12 +903,12 @@ Module {
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "data"
Property { name: "text"; type: "string" }
Property { name: "startPadding"; type: "int" }
Property { name: "endPadding"; type: "int" }
Property { name: "topPadding"; type: "int" }
Property { name: "bottomPadding"; type: "int" }
Property { name: "disabled"; type: "bool" }
Property { name: "primaryColor"; type: "QColor" }
Signal { name: "clicked" }
}
Component {
@ -909,12 +918,12 @@ Module {
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "data"
Property { name: "text"; type: "string" }
Property { name: "startPadding"; type: "int" }
Property { name: "endPadding"; type: "int" }
Property { name: "topPadding"; type: "int" }
Property { name: "bottomPadding"; type: "int" }
Property { name: "disabled"; type: "bool" }
Property { name: "primaryColor"; type: "QColor" }
Signal { name: "clicked" }
}
Component {
@ -924,14 +933,25 @@ Module {
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "data"
Property { name: "text"; type: "string" }
Property { name: "startPadding"; type: "int" }
Property { name: "endPadding"; type: "int" }
Property { name: "topPadding"; type: "int" }
Property { name: "bottomPadding"; type: "int" }
Property { name: "disabled"; type: "bool" }
Property { name: "primaryColor"; type: "QColor" }
Signal { name: "clicked" }
}
Component {
prototype: "QQuickText"
name: "FluentUI/FluIcon 1.0"
exports: ["FluentUI/FluIcon 1.0"]
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "data"
Property { name: "icon"; type: "int" }
Property { name: "iconSize"; type: "int" }
Property { name: "iconColor"; type: "QColor" }
}
Component {
prototype: "QQuickRectangle"
name: "FluentUI/FluIconButton 1.0"
@ -941,9 +961,64 @@ Module {
defaultProperty: "data"
Property { name: "iconSize"; type: "int" }
Property { name: "icon"; type: "int" }
Property { name: "iconColor"; type: "QColor" }
Property { name: "disabled"; type: "bool" }
Property { name: "text"; type: "string" }
Signal { name: "clicked" }
}
Component {
prototype: "QObject"
name: "FluentUI/FluInfoBar 1.0"
exports: ["FluentUI/FluInfoBar 1.0"]
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "children"
Property { name: "root"; type: "QVariant" }
Property { name: "layoutY"; type: "int" }
Method {
name: "showSuccess"
type: "QVariant"
Parameter { name: "text"; type: "QVariant" }
Parameter { name: "duration"; type: "QVariant" }
Parameter { name: "moremsg"; type: "QVariant" }
}
Method {
name: "showInfo"
type: "QVariant"
Parameter { name: "text"; type: "QVariant" }
Parameter { name: "duration"; type: "QVariant" }
Parameter { name: "moremsg"; type: "QVariant" }
}
Method {
name: "showWarning"
type: "QVariant"
Parameter { name: "text"; type: "QVariant" }
Parameter { name: "duration"; type: "QVariant" }
Parameter { name: "moremsg"; type: "QVariant" }
}
Method {
name: "showError"
type: "QVariant"
Parameter { name: "text"; type: "QVariant" }
Parameter { name: "duration"; type: "QVariant" }
Parameter { name: "moremsg"; type: "QVariant" }
}
Method {
name: "showCustom"
type: "QVariant"
Parameter { name: "itemcomponent"; type: "QVariant" }
Parameter { name: "duration"; type: "QVariant" }
}
Property { name: "children"; type: "QObject"; isList: true; isReadonly: true }
}
Component {
prototype: "QObject"
name: "FluentUI/FluObject 1.0"
exports: ["FluentUI/FluObject 1.0"]
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "children"
Property { name: "children"; type: "QObject"; isList: true; isReadonly: true }
}
Component {
prototype: "QQuickItem"
name: "FluentUI/FluProgressBar 1.0"
@ -967,6 +1042,10 @@ Module {
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "data"
Property { name: "checked"; type: "bool" }
Property { name: "text"; type: "string" }
Property { name: "disabled"; type: "bool" }
Signal { name: "clicked" }
}
Component {
prototype: "QQuickItem"
@ -974,7 +1053,23 @@ Module {
exports: ["FluentUI/FluRectangle 1.0"]
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "contentItem"
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"
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"
@ -1007,11 +1102,6 @@ Module {
Property { name: "fontStyle"; type: "int" }
Property { name: "textColor"; type: "QColor" }
Property { name: "pixelSize"; type: "int" }
Method {
name: "setFontStyle"
type: "QVariant"
Parameter { name: "fontStyle"; type: "QVariant" }
}
}
Component {
prototype: "QQuickItem"
@ -1037,7 +1127,15 @@ Module {
isComposite: true
defaultProperty: "data"
Property { name: "checkedColor"; type: "QColor" }
Signal { name: "clicked2" }
Property { name: "onClickFunc"; type: "QVariant" }
}
Component {
prototype: "QQuickToolTip"
name: "FluentUI/FluTooltip 1.0"
exports: ["FluentUI/FluTooltip 1.0"]
exportMetaObjectRevisions: [0]
isComposite: true
defaultProperty: "contentData"
}
Component {
prototype: "QQuickRectangle"
@ -1049,5 +1147,33 @@ Module {
Property { name: "isMax"; type: "bool" }
Property { name: "title"; type: "string" }
Property { name: "window"; type: "QVariant" }
Method {
name: "showSuccess"
type: "QVariant"
Parameter { name: "text"; type: "QVariant" }
Parameter { name: "duration"; type: "QVariant" }
Parameter { name: "moremsg"; type: "QVariant" }
}
Method {
name: "showInfo"
type: "QVariant"
Parameter { name: "text"; type: "QVariant" }
Parameter { name: "duration"; type: "QVariant" }
Parameter { name: "moremsg"; type: "QVariant" }
}
Method {
name: "showWarning"
type: "QVariant"
Parameter { name: "text"; type: "QVariant" }
Parameter { name: "duration"; type: "QVariant" }
Parameter { name: "moremsg"; type: "QVariant" }
}
Method {
name: "showError"
type: "QVariant"
Parameter { name: "text"; type: "QVariant" }
Parameter { name: "duration"; type: "QVariant" }
Parameter { name: "moremsg"; type: "QVariant" }
}
}
}

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

View File

@ -18,5 +18,11 @@
<file>controls/FluAppBar.qml</file>
<file>controls/FluRectangle.qml</file>
<file>controls/FluWindow.qml</file>
<file>controls/FluInfoBar.qml</file>
<file>controls/FluObject.qml</file>
<file>controls/FluIcon.qml</file>
<file>controls/FluDivider.qml</file>
<file>controls/FluTooltip.qml</file>
<file>controls/FluShadow.qml</file>
</qresource>
</RCC>