amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-24 19:50:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
朱子楚\zhuzi 2024-04-03 21:52:26 +08:00
parent be34220652
commit ef96618151
22 changed files with 71 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
example/qml/chart/T_BarChart.qml
View File

@ -70,8 +70,8 @@ FluScrollablePage{
} }
FluFrame{ FluFrame{
width: 500 Layout.preferredWidth: 500
height: 370 Layout.preferredHeight: 370
padding: 10 padding: 10
Layout.topMargin: 20 Layout.topMargin: 20
FluChart{ FluChart{

2
example/src/main.cpp
View File

@ -33,7 +33,7 @@ Q_IMPORT_QML_PLUGIN(FluentUIPlugin)
int main(int argc, char *argv[]) int main(int argc, char *argv[])
{ {
#ifdef WIN32 #ifdef WIN32
::SetUnhandledExceptionFilter(MyUnhandledExceptionFilter); // ::SetUnhandledExceptionFilter(MyUnhandledExceptionFilter);
qputenv("QT_QPA_PLATFORM","windows:darkmode=2"); qputenv("QT_QPA_PLATFORM","windows:darkmode=2");
#endif #endif
#if (QT_VERSION >= QT_VERSION_CHECK(6, 0, 0)) #if (QT_VERSION >= QT_VERSION_CHECK(6, 0, 0))

1
src/FluentUI.cpp
View File

@ -126,6 +126,7 @@ void FluentUI::registerTypes(const char *uri){
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluEvent.qml"),uri,major,minor,"FluEvent"); qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluEvent.qml"),uri,major,minor,"FluEvent");
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluSheet.qml"),uri,major,minor,"FluSheet"); qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluSheet.qml"),uri,major,minor,"FluSheet");
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluGroupBox.qml"),uri,major,minor,"FluGroupBox"); qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluGroupBox.qml"),uri,major,minor,"FluGroupBox");
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluControlBackground.qml"),uri,major,minor,"FluControlBackground");
qmlRegisterSingletonType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluRouter.qml"),uri,major,minor,"FluRouter"); qmlRegisterSingletonType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluRouter.qml"),uri,major,minor,"FluRouter");
qmlRegisterSingletonType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluEventBus.qml"),uri,major,minor,"FluEventBus"); qmlRegisterSingletonType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluEventBus.qml"),uri,major,minor,"FluEventBus");

3
src/Qt5/imports/FluentUI/Controls/FluButton.qml
View File

@ -48,8 +48,7 @@ Button {
} }
return hovered ? hoverColor :normalColor return hovered ? hoverColor :normalColor
} }
shadow: enabled shadow: !pressed && enabled
border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
FluFocusRectangle{ FluFocusRectangle{
visible: control.activeFocus visible: control.activeFocus
radius:4 radius:4

3
src/Qt5/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -67,7 +67,8 @@ T.ComboBox {
bottomInset:1 bottomInset:1
rightInset:1 rightInset:1
background: FluTextBoxBackground{ background: FluTextBoxBackground{
borderWidth: 0 border.width: 0
bottomMargin: 0
inputItem: contentItem inputItem: contentItem
} }
Component.onCompleted: { Component.onCompleted: {

24
src/Qt5/imports/FluentUI/Controls/FluControlBackground.qml
View File

@ -7,18 +7,18 @@ Item{
property int radius: 4 property int radius: 4
property bool shadow: true property bool shadow: true
property alias border: d.border property alias border: d.border
property alias bottomMargin: rect_back.anchors.bottomMargin property var bottomMargin: undefined
property alias topMargin: rect_back.anchors.topMargin property var topMargin: undefined
property alias leftMargin: rect_back.anchors.leftMargin property var leftMargin: undefined
property alias rightMargin: rect_back.anchors.rightMargin property var rightMargin: undefined
property color color: FluTheme.dark ? Qt.rgba(42/255,42/255,42/255,1) : Qt.rgba(254/255,254/255,254/255,1) property color color: FluTheme.dark ? Qt.rgba(42/255,42/255,42/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property alias gradient : rect_border.gradient property alias gradient : rect_border.gradient
Rectangle{ Rectangle{
id:d id:d
property color startColor: Qt.lighter(d.border.color,1.15) property color startColor: Qt.lighter(d.border.color,1.25)
property color endColor: shadow ? control.border.color : startColor property color endColor: shadow ? control.border.color : startColor
visible: false visible: false
border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1) border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
} }
Rectangle{ Rectangle{
id:rect_border id:rect_border
@ -26,14 +26,20 @@ Item{
radius: control.radius radius: control.radius
gradient: Gradient { gradient: Gradient {
GradientStop { position: 0.0; color: d.startColor } GradientStop { position: 0.0; color: d.startColor }
GradientStop { position: 0.8; color: d.startColor } GradientStop { position: 0.88; color: d.startColor }
GradientStop { position: 1.0; color: d.endColor} GradientStop { position: 1.0; color: d.endColor}
} }
} }
Rectangle{ Rectangle{
id:rect_back id:rect_back
anchors.fill: parent anchors{
anchors.margins: control.border.width fill: parent
margins: control.border.width
topMargin: control.topMargin
bottomMargin: control.bottomMargin
leftMargin: control.leftMargin
rightMargin: control.rightMargin
}
radius: control.radius radius: control.radius
color: control.color color: control.color
} }

6
src/Qt5/imports/FluentUI/Controls/FluExpander.qml
View File

@ -26,8 +26,8 @@ Item {
width: parent.width width: parent.width
height: 45 height: 45
radius: 4 radius: 4
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) border.color: FluTheme.dividerColor
color: FluTheme.dark ? Window.active ? Qt.rgba(28/255,28/255,28/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) color: FluTheme.dark ? Window.active ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
MouseArea{ MouseArea{
id:control_mouse id:control_mouse
anchors.fill: parent anchors.fill: parent
@ -90,7 +90,7 @@ Item {
radius: 4 radius: 4
clip: true clip: true
color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) border.color: FluTheme.dividerColor
anchors.topMargin: -contentHeight anchors.topMargin: -contentHeight
states: [ states: [
State{ State{

4
src/Qt5/imports/FluentUI/Controls/FluFrame.qml
View File

@ -18,7 +18,7 @@ T.Frame {
background: Rectangle { background: Rectangle {
id:d id:d
radius: 4 radius: 4
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) border.color: FluTheme.dividerColor
color: FluTheme.dark ? Window.active ? Qt.rgba(28/255,28/255,28/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) color: FluTheme.dark ? Window.active ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(251/255,251/255,253/255,1)
} }
} }

4
src/Qt5/imports/FluentUI/Controls/FluMenu.qml
View File

@ -51,9 +51,9 @@ T.Menu {
FluShadow{} FluShadow{}
} }
T.Overlay.modal: Rectangle { T.Overlay.modal: Rectangle {
color: FluTools.colorAlpha(control.palette.shadow, 0.5) color: FluTools.withOpacity(control.palette.shadow, 0.5)
} }
T.Overlay.modeless: Rectangle { T.Overlay.modeless: Rectangle {
color: FluTools.colorAlpha(control.palette.shadow, 0.12) color: FluTools.withOpacity(control.palette.shadow, 0.12)
} }
} }

4
src/Qt5/imports/FluentUI/Controls/FluProgressButton.qml
View File

@ -6,7 +6,7 @@ FluButton {
property real progress property real progress
QtObject{ QtObject{
id:d id:d
property bool checked: (rect_back.height === background.height) && (progress === 1) property bool checked: (Number(rect_back.height) === Number(background.height)) && (progress === 1)
} }
id: control id: control
property color normalColor: { property color normalColor: {
@ -35,7 +35,7 @@ FluButton {
implicitWidth: 30 implicitWidth: 30
implicitHeight: 30 implicitHeight: 30
radius: 4 radius: 4
border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1) border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
border.width: d.checked ? 0 : 1 border.width: d.checked ? 0 : 1
color:{ color:{
if(!enabled){ if(!enabled){

2
src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml
View File

@ -26,7 +26,7 @@ FluControlBackground{
bottomMargin: inputItem && inputItem.activeFocus ? 2 : 1 bottomMargin: inputItem && inputItem.activeFocus ? 2 : 1
QtObject{ QtObject{
id:d id:d
property color startColor: FluTheme.dark ? Qt.rgba(23/255,23/255,23/255,1) : Qt.rgba(232/255,232/255,232/255,1) property color startColor: FluTheme.dark ? Qt.rgba(66/255,66/255,66/255,1) : Qt.rgba(232/255,232/255,232/255,1)
property color endColor: { property color endColor: {
if(!control.enabled){ if(!control.enabled){
return d.startColor return d.startColor

12
src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml
View File

@ -39,6 +39,11 @@ Button {
enabled: !disabled enabled: !disabled
verticalPadding: 0 verticalPadding: 0
horizontalPadding:12 horizontalPadding:12
onCheckableChanged: {
if(checkable){
checkable = false
}
}
onClicked: clickListener() onClicked: clickListener()
background: FluControlBackground{ background: FluControlBackground{
implicitWidth: 30 implicitWidth: 30
@ -77,19 +82,16 @@ Button {
if(checked){ if(checked){
return true return true
}else{ }else{
return enabled return !pressed && enabled
} }
} }
border.color: { border.color: {
if(checked){ if(checked){
return enabled ? Qt.darker(control.normalColor,1.2) : disableColor return enabled ? Qt.darker(control.normalColor,1.2) : disableColor
}else{ }else{
return FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1) return FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
} }
} }
} }
contentItem: FluText { contentItem: FluText {
text: control.text text: control.text

1
src/Qt5/imports/FluentUI/qmldir
View File

@ -19,6 +19,7 @@ FluComboBox 1.0 Controls/FluComboBox.qml
FluContentDialog 1.0 Controls/FluContentDialog.qml FluContentDialog 1.0 Controls/FluContentDialog.qml
FluContentPage 1.0 Controls/FluContentPage.qml FluContentPage 1.0 Controls/FluContentPage.qml
FluControl 1.0 Controls/FluControl.qml FluControl 1.0 Controls/FluControl.qml
FluControlBackground 1.0 Controls/FluControlBackground.qml
FluCopyableText 1.0 Controls/FluCopyableText.qml FluCopyableText 1.0 Controls/FluCopyableText.qml
FluDatePicker 1.0 Controls/FluDatePicker.qml FluDatePicker 1.0 Controls/FluDatePicker.qml
FluDivider 1.0 Controls/FluDivider.qml FluDivider 1.0 Controls/FluDivider.qml

4
src/Qt6/imports/FluentUI/Controls/FluButton.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Controls.Basic import QtQuick.Controls.Basic
import FluentUI import FluentUI
Button { Button {
property bool disabled: false property bool disabled: false
property string contentDescription: "" property string contentDescription: ""
@ -49,8 +50,7 @@ Button {
} }
return hovered ? hoverColor :normalColor return hovered ? hoverColor :normalColor
} }
shadow: enabled shadow: !pressed && enabled
border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
FluFocusRectangle{ FluFocusRectangle{
visible: control.activeFocus visible: control.activeFocus
radius:4 radius:4

3
src/Qt6/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -67,7 +67,8 @@ T.ComboBox {
bottomInset:1 bottomInset:1
rightInset:1 rightInset:1
background: FluTextBoxBackground{ background: FluTextBoxBackground{
borderWidth: 0 border.width: 0
bottomMargin: 0
inputItem: contentItem inputItem: contentItem
} }
Component.onCompleted: { Component.onCompleted: {

24
src/Qt6/imports/FluentUI/Controls/FluControlBackground.qml
View File

@ -7,18 +7,18 @@ Item{
property int radius: 4 property int radius: 4
property bool shadow: true property bool shadow: true
property alias border: d.border property alias border: d.border
property alias bottomMargin: rect_back.anchors.bottomMargin property var bottomMargin: undefined
property alias topMargin: rect_back.anchors.topMargin property var topMargin: undefined
property alias leftMargin: rect_back.anchors.leftMargin property var leftMargin: undefined
property alias rightMargin: rect_back.anchors.rightMargin property var rightMargin: undefined
property color color: FluTheme.dark ? Qt.rgba(42/255,42/255,42/255,1) : Qt.rgba(254/255,254/255,254/255,1) property color color: FluTheme.dark ? Qt.rgba(42/255,42/255,42/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property alias gradient : rect_border.gradient property alias gradient : rect_border.gradient
Rectangle{ Rectangle{
id:d id:d
property color startColor: Qt.lighter(d.border.color,1.15) property color startColor: Qt.lighter(d.border.color,1.25)
property color endColor: shadow ? control.border.color : startColor property color endColor: shadow ? control.border.color : startColor
visible: false visible: false
border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1) border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
} }
Rectangle{ Rectangle{
id:rect_border id:rect_border
@ -26,14 +26,20 @@ Item{
radius: control.radius radius: control.radius
gradient: Gradient { gradient: Gradient {
GradientStop { position: 0.0; color: d.startColor } GradientStop { position: 0.0; color: d.startColor }
GradientStop { position: 0.8; color: d.startColor } GradientStop { position: 0.88; color: d.startColor }
GradientStop { position: 1.0; color: d.endColor} GradientStop { position: 1.0; color: d.endColor}
} }
} }
Rectangle{ Rectangle{
id:rect_back id:rect_back
anchors.fill: parent anchors{
anchors.margins: control.border.width fill: parent
margins: control.border.width
topMargin: control.topMargin
bottomMargin: control.bottomMargin
leftMargin: control.leftMargin
rightMargin: control.rightMargin
}
radius: control.radius radius: control.radius
color: control.color color: control.color
} }

6
src/Qt6/imports/FluentUI/Controls/FluExpander.qml
View File

@ -26,8 +26,8 @@ Item {
width: parent.width width: parent.width
height: 45 height: 45
radius: 4 radius: 4
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) border.color: FluTheme.dividerColor
color: FluTheme.dark ? Window.active ? Qt.rgba(28/255,28/255,28/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) color: FluTheme.dark ? Window.active ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
MouseArea{ MouseArea{
id:control_mouse id:control_mouse
anchors.fill: parent anchors.fill: parent
@ -90,7 +90,7 @@ Item {
radius: 4 radius: 4
clip: true clip: true
color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) border.color: FluTheme.dividerColor
anchors.topMargin: -contentHeight anchors.topMargin: -contentHeight
states: [ states: [
State{ State{

4
src/Qt6/imports/FluentUI/Controls/FluFrame.qml
View File

@ -16,7 +16,7 @@ T.Frame {
background: Rectangle { background: Rectangle {
id:d id:d
radius: 4 radius: 4
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) border.color: FluTheme.dividerColor
color: FluTheme.dark ? Window.active ? Qt.rgba(28/255,28/255,28/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) color: FluTheme.dark ? Window.active ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(251/255,251/255,253/255,1)
} }
} }

4
src/Qt6/imports/FluentUI/Controls/FluMenu.qml
View File

@ -51,9 +51,9 @@ T.Menu {
FluShadow{} FluShadow{}
} }
T.Overlay.modal: Rectangle { T.Overlay.modal: Rectangle {
color: Color.transparent(control.palette.shadow, 0.5) color: FluTools.withOpacity(control.palette.shadow, 0.5)
} }
T.Overlay.modeless: Rectangle { T.Overlay.modeless: Rectangle {
color: Color.transparent(control.palette.shadow, 0.12) color: FluTools.withOpacity(control.palette.shadow, 0.12)
} }
} }

4
src/Qt6/imports/FluentUI/Controls/FluProgressButton.qml
View File

@ -7,7 +7,7 @@ FluButton {
property real progress property real progress
QtObject{ QtObject{
id:d id:d
property bool checked: (rect_back.height === background.height) && (progress === 1) property bool checked: (Number(rect_back.height) === Number(background.height)) && (progress === 1)
} }
id: control id: control
property color normalColor: { property color normalColor: {
@ -36,7 +36,7 @@ FluButton {
implicitWidth: 30 implicitWidth: 30
implicitHeight: 30 implicitHeight: 30
radius: 4 radius: 4
border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1) border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
border.width: d.checked ? 0 : 1 border.width: d.checked ? 0 : 1
color:{ color:{
if(!enabled){ if(!enabled){

2
src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml
View File

@ -26,7 +26,7 @@ FluControlBackground{
bottomMargin: inputItem && inputItem.activeFocus ? 2 : 1 bottomMargin: inputItem && inputItem.activeFocus ? 2 : 1
QtObject{ QtObject{
id:d id:d
property color startColor: FluTheme.dark ? Qt.rgba(23/255,23/255,23/255,1) : Qt.rgba(232/255,232/255,232/255,1) property color startColor: FluTheme.dark ? Qt.rgba(66/255,66/255,66/255,1) : Qt.rgba(232/255,232/255,232/255,1)
property color endColor: { property color endColor: {
if(!control.enabled){ if(!control.enabled){
return d.startColor return d.startColor

7
src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml
View File

@ -78,19 +78,16 @@ Button {
if(checked){ if(checked){
return true return true
}else{ }else{
return enabled return !pressed && enabled
} }
} }
border.color: { border.color: {
if(checked){ if(checked){
return enabled ? Qt.darker(control.normalColor,1.2) : disableColor return enabled ? Qt.darker(control.normalColor,1.2) : disableColor
}else{ }else{
return FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1) return FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
} }
} }
} }
contentItem: FluText { contentItem: FluText {
text: control.text text: control.text