amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-02-02 11:17:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzichu 2023-07-07 16:04:17 +08:00
parent 9223d5f937
commit 03771cd7c9
25 changed files with 75 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/qml/App.qml
View File

@ -10,6 +10,7 @@ Window {
Component.onCompleted: { Component.onCompleted: {
FluApp.init(app) FluApp.init(app)
FluTheme.darkMode = FluDarkMode.System FluTheme.darkMode = FluDarkMode.System
FluTheme.enableAnimation = true
FluApp.routes = { FluApp.routes = {
"/":"qrc:/example/qml/window/MainWindow.qml", "/":"qrc:/example/qml/window/MainWindow.qml",
"/about":"qrc:/example/qml/window/AboutWindow.qml", "/about":"qrc:/example/qml/window/AboutWindow.qml",

13
example/qml/page/T_Theme.qml
View File

@ -12,7 +12,7 @@ FluScrollablePage{
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 20 Layout.topMargin: 20
height: 210 height: 270
paddings: 10 paddings: 10
ColumnLayout{ ColumnLayout{
spacing:0 spacing:0
@ -72,6 +72,17 @@ FluScrollablePage{
FluTheme.nativeText = !FluTheme.nativeText FluTheme.nativeText = !FluTheme.nativeText
} }
} }
FluText{
text:"开启动画效果"
Layout.topMargin: 20
}
FluToggleSwitch{
Layout.topMargin: 5
checked: FluTheme.enableAnimation
onClicked: {
FluTheme.enableAnimation = !FluTheme.enableAnimation
}
}
} }
} }
CodeExpander{ CodeExpander{

2
example/qml/window/MainWindow.qml
View File

@ -220,7 +220,7 @@ CustomWindow {
} }
function handleDarkChanged(button){ function handleDarkChanged(button){
if(FluTools.isMacos()){ if(FluTools.isMacos() || !FluTheme.enableAnimation){
changeDark() changeDark()
}else{ }else{
var target = window.contentItem var target = window.contentItem

1
src/FluTheme.cpp
View File

@ -31,6 +31,7 @@ FluTheme::FluTheme(QObject *parent)
}); });
primaryColor(FluColors::getInstance()->Blue()); primaryColor(FluColors::getInstance()->Blue());
nativeText(false); nativeText(false);
enableAnimation(false);
darkMode(Fluent_DarkMode::Fluent_DarkModeType::Light); darkMode(Fluent_DarkMode::Fluent_DarkModeType::Light);
_systemDark = systemDark(); _systemDark = systemDark();
qApp->installEventFilter(this); qApp->installEventFilter(this);

5
src/FluTheme.h
View File

@ -32,6 +32,11 @@ class FluTheme : public QObject
*/ */
Q_PROPERTY_AUTO(bool,nativeText); Q_PROPERTY_AUTO(bool,nativeText);
/**
* @brief 是否开启动画效果
*/
Q_PROPERTY_AUTO(bool,enableAnimation);
QML_NAMED_ELEMENT(FluTheme) QML_NAMED_ELEMENT(FluTheme)
QML_SINGLETON QML_SINGLETON
private: private:

2
src/imports/FluentUI/Controls/FluAutoSuggestBox.qml
View File

@ -27,7 +27,7 @@ FluTextBox{
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
background: FluRectangle{ background: FluRectangle{

4
src/imports/FluentUI/Controls/FluBreadcrumbBar.qml
View File

@ -33,7 +33,7 @@ Item {
properties: "opacity" properties: "opacity"
from: 1 from: 1
to: 0 to: 0
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
add: Transition { add: Transition {
@ -41,7 +41,7 @@ Item {
properties: "opacity" properties: "opacity"
from: 0 from: 0
to: 1 to: 1
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
delegate: Item{ delegate: Item{

4
src/imports/FluentUI/Controls/FluCalendarPicker.qml
View File

@ -65,7 +65,7 @@ Rectangle {
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
exit:Transition { exit:Transition {
@ -73,7 +73,7 @@ Rectangle {
property: "opacity" property: "opacity"
from:1 from:1
to:0 to:0
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
contentItem: Item{ contentItem: Item{

2
src/imports/FluentUI/Controls/FluCheckBox.qml
View File

@ -87,6 +87,7 @@ Button {
return normalColor return normalColor
} }
Behavior on color { Behavior on color {
enabled: FluTheme.enableAnimation
ColorAnimation{ ColorAnimation{
duration: 83 duration: 83
} }
@ -98,6 +99,7 @@ Button {
visible: checked visible: checked
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible { Behavior on visible {
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 83 duration: 83
} }

4
src/imports/FluentUI/Controls/FluColorPicker.qml
View File

@ -50,7 +50,7 @@ Button{
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
@ -59,7 +59,7 @@ Button{
property: "opacity" property: "opacity"
from:1 from:1
to:0 to:0
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
function showPopup() { function showPopup() {

4
src/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -113,7 +113,7 @@ ComboBox {
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
exit:Transition { exit:Transition {
@ -121,7 +121,7 @@ ComboBox {
property: "opacity" property: "opacity"
from:1 from:1
to:0 to:0
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
background:Rectangle{ background:Rectangle{

4
src/imports/FluentUI/Controls/FluDatePicker.qml
View File

@ -101,7 +101,7 @@ Rectangle {
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
exit:Transition { exit:Transition {
@ -109,7 +109,7 @@ Rectangle {
property: "opacity" property: "opacity"
from:1 from:1
to:0 to:0
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
background:Item{ background:Item{

5
src/imports/FluentUI/Controls/FluExpander.qml
View File

@ -54,6 +54,7 @@ Item {
iconSource:FluentIcons.ChevronUp iconSource:FluentIcons.ChevronUp
iconSize: 15 iconSize: 15
Behavior on rotation { Behavior on rotation {
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
@ -103,7 +104,7 @@ Item {
to:"expand" to:"expand"
NumberAnimation { NumberAnimation {
properties: "y" properties: "y"
duration: 167 duration: FluTheme.enableAnimation ? 167 : 0
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
}, },
@ -111,7 +112,7 @@ Item {
to:"collapsed" to:"collapsed"
NumberAnimation { NumberAnimation {
properties: "y" properties: "y"
duration: 167 duration: FluTheme.enableAnimation ? 167 : 0
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
} }

11
src/imports/FluentUI/Controls/FluInfoBar.qml
View File

@ -49,7 +49,11 @@ FluObject {
spacing: 20 spacing: 20
width: parent.width width: parent.width
move: Transition { move: Transition {
NumberAnimation { properties: "y"; easing.type: Easing.OutBack; duration: 300 } NumberAnimation {
properties: "y"
easing.type: Easing.OutCubic
duration: FluTheme.enableAnimation ? 333 : 0
}
} }
onChildrenChanged: if(children.length === 0) destroy(); onChildrenChanged: if(children.length === 0) destroy();
function getLastloader(){ function getLastloader(){
@ -89,9 +93,10 @@ FluObject {
scale: item ? 1 : 0; scale: item ? 1 : 0;
asynchronous: true asynchronous: true
Behavior on scale { Behavior on scale {
enabled: FluTheme.enableAnimation
NumberAnimation { NumberAnimation {
easing.type: Easing.OutBack; easing.type: Easing.OutCubic
duration: 100 duration: 167
} }
} }
sourceComponent:itemcomponent ? itemcomponent : mcontrol.fluent_sytle; sourceComponent:itemcomponent ? itemcomponent : mcontrol.fluent_sytle;

6
src/imports/FluentUI/Controls/FluMenu.qml
View File

@ -5,7 +5,7 @@ import QtQuick.Templates as T
import FluentUI import FluentUI
T.Menu { T.Menu {
property bool animEnabled: true property bool enableAnimation: true
id: control id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding) contentWidth + leftPadding + rightPadding)
@ -20,7 +20,7 @@ T.Menu {
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: animEnabled ? 83 : 0 duration: FluTheme.enableAnimation && control.enableAnimation ? 83 : 0
} }
} }
exit:Transition { exit:Transition {
@ -28,7 +28,7 @@ T.Menu {
property: "opacity" property: "opacity"
from:1 from:1
to:0 to:0
duration: animEnabled ? 83 : 0 duration: FluTheme.enableAnimation && control.enableAnimation ? 83 : 0
} }
} }
contentItem: ListView { contentItem: ListView {

10
src/imports/FluentUI/Controls/FluNavigationView.qml
View File

@ -128,6 +128,7 @@ Item {
return 30 return 30
} }
Behavior on height { Behavior on height {
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 83 duration: 83
} }
@ -232,6 +233,7 @@ Item {
return true return true
} }
Behavior on rotation { Behavior on rotation {
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
@ -318,6 +320,7 @@ Item {
id:com_panel_item id:com_panel_item
Item{ Item{
Behavior on height { Behavior on height {
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 83 duration: 83
} }
@ -557,11 +560,13 @@ Item {
visible: opacity visible: opacity
opacity: d.isMinimal opacity: d.isMinimal
Behavior on opacity{ Behavior on opacity{
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 83 duration: 83
} }
} }
Behavior on Layout.preferredWidth { Behavior on Layout.preferredWidth {
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
@ -660,6 +665,7 @@ Item {
} }
} }
Behavior on anchors.leftMargin { Behavior on anchors.leftMargin {
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
@ -698,12 +704,14 @@ Item {
} }
x: visible ? 0 : -width x: visible ? 0 : -width
Behavior on width { Behavior on width {
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
} }
Behavior on x { Behavior on x {
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
@ -785,7 +793,7 @@ Item {
anchors.fill: parent anchors.fill: parent
model:d.handleItems() model:d.handleItems()
boundsBehavior: ListView.StopAtBounds boundsBehavior: ListView.StopAtBounds
highlightMoveDuration: 167 highlightMoveDuration: FluTheme.enableAnimation ? 167 : 0
highlight: Item{ highlight: Item{
clip: true clip: true
Rectangle{ Rectangle{

4
src/imports/FluentUI/Controls/FluPage.qml
View File

@ -19,7 +19,7 @@ Item {
visible: false visible: false
StackView.onRemoved: destroy() StackView.onRemoved: destroy()
Behavior on opacity{ Behavior on opacity{
enabled: !animDisabled enabled: !animDisabled && FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
} }
@ -27,7 +27,7 @@ Item {
transform: Translate { transform: Translate {
y: control.visible ? 0 : 80 y: control.visible ? 0 : 80
Behavior on y{ Behavior on y{
enabled: !animDisabled enabled: !animDisabled && FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic

3
src/imports/FluentUI/Controls/FluPivot.qml
View File

@ -28,7 +28,7 @@ Item {
spacing: 20 spacing: 20
interactive: false interactive: false
orientation: ListView.Horizontal orientation: ListView.Horizontal
highlightMoveDuration: 167 highlightMoveDuration: FluTheme.enableAnimation ? 167 : 0
highlight: Item{ highlight: Item{
clip: true clip: true
Rectangle{ Rectangle{
@ -38,6 +38,7 @@ Item {
width: nav_list.currentItem ? nav_list.currentItem.width : 0 width: nav_list.currentItem ? nav_list.currentItem.width : 0
y:37 y:37
Behavior on width { Behavior on width {
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic

8
src/imports/FluentUI/Controls/FluPopup.qml
View File

@ -20,12 +20,12 @@ Popup {
properties: "scale" properties: "scale"
from:1.2 from:1.2
to:1 to:1
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
from:0 from:0
to:1 to:1
} }
@ -35,12 +35,12 @@ Popup {
properties: "scale" properties: "scale"
from:1 from:1
to:1.2 to:1.2
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
from:1 from:1
to:0 to:0
} }

1
src/imports/FluentUI/Controls/FluRadioButton.qml
View File

@ -62,6 +62,7 @@ Button {
return checked ? 4 : 1 return checked ? 4 : 1
} }
Behavior on border.width { Behavior on border.width {
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic

1
src/imports/FluentUI/Controls/FluSlider.qml
View File

@ -36,6 +36,7 @@ T.Slider {
return control.hovered ? 6/10 : 5/10 return control.hovered ? 6/10 : 5/10
} }
Behavior on scale { Behavior on scale {
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic

1
src/imports/FluentUI/Controls/FluTextBoxBackground.qml
View File

@ -47,6 +47,7 @@ Rectangle{
} }
} }
Behavior on height{ Behavior on height{
enabled: FluTheme.enableAnimation
NumberAnimation{ NumberAnimation{
duration: 83 duration: 83
easing.type: Easing.OutCubic easing.type: Easing.OutCubic

2
src/imports/FluentUI/Controls/FluTextBoxMenu.qml
View File

@ -9,7 +9,7 @@ FluMenu{
property string selectAllText : "全选" property string selectAllText : "全选"
property var inputItem property var inputItem
id:menu id:menu
animEnabled: false enableAnimation: false
width: 120 width: 120
onVisibleChanged: { onVisibleChanged: {
inputItem.forceActiveFocus() inputItem.forceActiveFocus()

4
src/imports/FluentUI/Controls/FluTimePicker.qml
View File

@ -106,7 +106,7 @@ Rectangle {
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
exit:Transition { exit:Transition {
@ -114,7 +114,7 @@ Rectangle {
property: "opacity" property: "opacity"
from:1 from:1
to:0 to:0
duration: 83 duration: FluTheme.enableAnimation ? 83 : 0
} }
} }
background:Item{ background:Item{

28
src/imports/FluentUI/Controls/FluToggleSwitch.qml
View File

@ -69,17 +69,11 @@ Button {
return borderNormalColor return borderNormalColor
} }
Rectangle { Rectangle {
width: pressed ? 28 : 20 width: 20
anchors{ x:checked ? control_backgound.width-width : 0
left: checked ? undefined : parent.left
leftMargin: checked ? 20 : 0
right: checked ? parent.right : undefined
rightMargin: checked ? 0: 20
}
height: 20 height: 20
radius: 10 radius: 10
scale: hovered&enabled ? 7/10 : 6/10 scale: hovered&enabled ? 7/10 : 6/10
anchors.verticalCenter: parent.verticalCenter
color: { color: {
if(!enabled){ if(!enabled){
return dotDisableColor return dotDisableColor
@ -89,27 +83,15 @@ Button {
} }
return dotNormalColor return dotNormalColor
} }
Behavior on anchors.leftMargin { Behavior on x {
enabled: FluTheme.enableAnimation
NumberAnimation { NumberAnimation {
duration: 167
easing.type: Easing.OutCubic
}
}
Behavior on anchors.rightMargin {
NumberAnimation {
duration: 167
easing.type: Easing.OutCubic
}
}
Behavior on width {
NumberAnimation {
duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
} }
Behavior on scale { Behavior on scale {
enabled: FluTheme.enableAnimation
NumberAnimation { NumberAnimation {
duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
} }