mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-26 13:27:05 +08:00
update
This commit is contained in:
zhuzihcu
parent
f1b52fc5ee
commit
02e4579021
28
example/AboutPage.qml
Normal file
28
example/AboutPage.qml
Normal 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: {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -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()
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
59
example/T-Rectangle.qml
Normal 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
141
example/T_Buttons.qml
Normal 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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -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
54
example/T_InfoBar.qml
Normal 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")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
26
example/T_ToggleSwitch.qml
Normal file
26
example/T_ToggleSwitch.qml
Normal 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
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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());
|
||||
}
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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" }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
||||
8
src/controls/FluDivider.qml
Normal file
8
src/controls/FluDivider.qml
Normal 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)
|
||||
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
||||
@ -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(FluApp.isDark){
|
||||
if(disabled){
|
||||
return "#C7C7C7"
|
||||
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
16
src/controls/FluIcon.qml
Normal 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));
|
||||
}
|
||||
@ -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
233
src/controls/FluInfoBar.qml
Normal 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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
7
src/controls/FluObject.qml
Normal file
7
src/controls/FluObject.qml
Normal file
@ -0,0 +1,7 @@
|
||||
import QtQuick 2.15
|
||||
|
||||
QtObject {
|
||||
id:flu_object;
|
||||
|
||||
default property list<QtObject> children;
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
||||
@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
71
src/controls/FluShadow.qml
Normal file
71
src/controls/FluShadow.qml
Normal 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)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
||||
@ -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
|
||||
return true
|
||||
case FluText.TitleLarge:
|
||||
font.bold = true
|
||||
font.pixelSize = text.pixelSize * 2
|
||||
break
|
||||
return true
|
||||
case FluText.Title:
|
||||
font.bold = true
|
||||
font.pixelSize = text.pixelSize * 1.5
|
||||
break
|
||||
return true
|
||||
case FluText.Subtitle:
|
||||
font.bold = true
|
||||
font.pixelSize = text.pixelSize * 0.9
|
||||
break
|
||||
return true
|
||||
case FluText.BodyLarge:
|
||||
font.bold = false
|
||||
font.pixelSize = text.pixelSize * 1.1
|
||||
break
|
||||
return false
|
||||
case FluText.BodyStrong:
|
||||
font.bold = true
|
||||
font.pixelSize = text.pixelSize * 1.0
|
||||
break
|
||||
return true
|
||||
case FluText.Body:
|
||||
font.bold = false
|
||||
font.pixelSize = text.pixelSize
|
||||
break
|
||||
return false
|
||||
case FluText.Caption:
|
||||
font.bold = false
|
||||
font.pixelSize = text.pixelSize * 0.8
|
||||
break
|
||||
return false
|
||||
default:
|
||||
font.pixelSize = text.pixelSize * 1.0
|
||||
break
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Shapes 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
27
src/controls/FluTooltip.qml
Normal file
27
src/controls/FluTooltip.qml
Normal 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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user