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

update

Browse Source
This commit is contained in:
朱子楚\zhuzi
2024-03-29 16:23:16 +08:00
parent 5fd934b5f5
commit cb33af8836
119 changed files with 880 additions and 1130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/FluTheme.cpp
View File

@ -14,7 +14,7 @@ FluTheme::FluTheme(QObject *parent):QObject{parent}{
accentColor(FluColors::getInstance()->Blue());
darkMode(FluThemeType::DarkMode::Light);
nativeText(false);
enableAnimation(true);
animationEnabled(true);
_systemDark = systemDark();
qApp->installEventFilter(this);
}

2
src/FluTheme.h
View File

@ -32,7 +32,7 @@ class FluTheme : public QObject
Q_PROPERTY_AUTO(QColor,itemCheckColor);
Q_PROPERTY_AUTO(int,darkMode);
Q_PROPERTY_AUTO(bool,nativeText);
Q_PROPERTY_AUTO(bool,enableAnimation);
Q_PROPERTY_AUTO(bool,animationEnabled);
QML_NAMED_ELEMENT(FluTheme)
QML_SINGLETON
private:

39
src/Qt5/imports/FluentUI/Controls/FluArea.qml
View File

@ -1,28 +1,23 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import QtQuick.Controls.impl 2.15
import QtQuick.Templates 2.15 as T
import FluentUI 1.0
Rectangle {
default property alias contentData : layout_content.data
property int paddings : 0
property int leftPadding : 0
property int rightPadding : 0
property int topPadding : 0
property int bottomPadding : 0
id:control
radius: 4
color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
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.width: 1
implicitHeight: height
implicitWidth: width
Item {
id: layout_content
anchors.fill: parent
anchors.leftMargin: Math.max(paddings,leftPadding)
anchors.rightMargin: Math.max(paddings,rightPadding)
anchors.topMargin: Math.max(paddings,topPadding)
anchors.bottomMargin: Math.max(paddings,bottomPadding)
T.Frame {
property alias border: d.border
property alias color: d.color
property alias radius: d.radius
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding)
padding: 0
background: Rectangle {
id:d
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)
color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
}
}

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

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

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

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

8
src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml
View File

@ -63,7 +63,7 @@ FluButton {
property: "opacity"
from:0
to:1
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
}
}
exit:Transition {
@ -71,7 +71,7 @@ FluButton {
property: "opacity"
from:1
to:0
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
}
}
contentItem: Item{
@ -163,7 +163,7 @@ FluButton {
OpacityAnimator{
from: 0
to: 1
duration: 88
duration: 83
}
ScaleAnimator{
from: 0.5
@ -176,7 +176,7 @@ FluButton {
OpacityAnimator{
from: 1
to: 0
duration: 88
duration: 83
}
ScaleAnimator{
from: 1.0

8
src/Qt5/imports/FluentUI/Controls/FluCheckBox.qml
View File

@ -22,7 +22,7 @@ Button {
property alias textColor: btn_text.textColor
property bool textRight: true
property real textSpacing: 6
property bool enableAnimation: FluTheme.enableAnimation
property bool animationEnabled: FluTheme.animationEnabled
property var clickListener : function(){
checked = !checked
}
@ -94,7 +94,7 @@ Button {
return normalColor
}
Behavior on color {
enabled: control.enableAnimation
enabled: control.animationEnabled
ColorAnimation{
duration: 83
}
@ -107,7 +107,7 @@ Button {
visible: indeterminate
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {
enabled: control.enableAnimation
enabled: control.animationEnabled
NumberAnimation{
duration: 83
}
@ -121,7 +121,7 @@ Button {
visible: checked && !indeterminate
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {
enabled: control.enableAnimation
enabled: control.animationEnabled
NumberAnimation{
duration: 83
}

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

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

52
src/Qt5/imports/FluentUI/Controls/FluContentPage.qml
View File

@ -5,56 +5,4 @@ import QtQuick.Controls 2.15
import FluentUI 1.0
FluPage {
property alias title: text_title.text
default property alias content: container.data
property int leftPadding: 10
property int topPadding: 0
property int rightPadding: 10
property int bottomPadding: 10
property alias color: status_view.color
property alias statusMode: status_view.statusMode
property alias loadingText: status_view.loadingText
property alias emptyText:status_view.emptyText
property alias errorText:status_view.errorText
property alias errorButtonText:status_view.errorButtonText
property alias loadingItem :status_view.loadingItem
property alias emptyItem : status_view.emptyItem
property alias errorItem :status_view.errorItem
signal errorClicked
id:control
FluText{
id:text_title
visible: text !== ""
height: visible ? contentHeight : 0
font: FluTextStyle.Title
anchors{
top: parent.top
topMargin: control.topPadding
left: parent.left
right: parent.right
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
}
FluStatusLayout{
id:status_view
color: "#00000000"
statusMode: FluStatusLayoutType.Success
onErrorClicked: control.errorClicked()
anchors{
left: parent.left
right: parent.right
top: text_title.bottom
bottom: parent.bottom
leftMargin: control.leftPadding
rightMargin: control.rightPadding
bottomMargin: control.bottomPadding
}
Item{
clip: true
id:container
anchors.fill: parent
}
}
}

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

@ -105,7 +105,7 @@ FluButton {
property: "opacity"
from:0
to:1
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
}
}
exit:Transition {
@ -113,7 +113,7 @@ FluButton {
property: "opacity"
from:1
to:0
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
}
}
background:Item{

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

@ -64,7 +64,7 @@ Item {
iconSource:FluentIcons.ChevronUp
iconSize: 15
Behavior on rotation {
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -115,7 +115,7 @@ Item {
to:"expand"
NumberAnimation {
properties: "anchors.topMargin"
duration: FluTheme.enableAnimation && d.flag ? 167 : 0
duration: FluTheme.animationEnabled && d.flag ? 167 : 0
easing.type: Easing.OutCubic
}
},
@ -123,7 +123,7 @@ Item {
to:"collapsed"
NumberAnimation {
properties: "anchors.topMargin"
duration: FluTheme.enableAnimation && d.flag ? 167 : 0
duration: FluTheme.animationEnabled && d.flag ? 167 : 0
easing.type: Easing.OutCubic
}
}

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

@ -54,7 +54,7 @@ FluObject {
NumberAnimation {
properties: "y"
easing.type: Easing.OutCubic
duration: FluTheme.enableAnimation ? 333 : 0
duration: FluTheme.animationEnabled ? 333 : 0
}
}
onChildrenChanged: if(children.length === 0) destroy();
@ -95,7 +95,7 @@ FluObject {
scale: item ? 1 : 0;
asynchronous: true
Behavior on scale {
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation {
easing.type: Easing.OutCubic
duration: 167

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

@ -23,7 +23,7 @@ FluButton {
visible: Number(width)!==0
clip: true
Behavior on width {
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic

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

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

28
src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml
View File

@ -167,7 +167,7 @@ Item {
return control.cellHeight
}
Behavior on height {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 83
}
@ -310,7 +310,7 @@ Item {
return true
}
Behavior on rotation {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -457,7 +457,7 @@ Item {
id:com_panel_item
Item{
Behavior on height {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -771,13 +771,13 @@ Item {
visible: opacity
opacity: d.isMinimal
Behavior on opacity{
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 83
}
}
Behavior on Layout.preferredWidth {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -880,7 +880,7 @@ Item {
}
}
Behavior on anchors.leftMargin {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -925,14 +925,14 @@ Item {
}
x: visible ? 0 : -width
Behavior on width {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
}
}
Behavior on x {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -1012,7 +1012,7 @@ Item {
interactive: false
model:d.handleItems()
boundsBehavior: ListView.StopAtBounds
highlightMoveDuration: FluTheme.enableAnimation && d.animDisabled ? 167 : 0
highlightMoveDuration: FluTheme.animationEnabled && d.animDisabled ? 167 : 0
highlight: Item{
clip: true
Rectangle{
@ -1231,10 +1231,14 @@ Item {
}
}
function setCurrentIndex(index){
nav_list.currentIndex = index
var item = nav_list.model[index]
if(item instanceof FluPaneItem){
item.tap()
if(item.url){
nav_list.currentIndex = index
if(item instanceof FluPaneItem){
item.tap()
}
}else{
item.onTapListener()
}
}
function getItems(){

38
src/Qt5/imports/FluentUI/Controls/FluPage.qml
View File

@ -4,31 +4,45 @@ import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import FluentUI 1.0
Item {
Page {
property int launchMode: FluPageType.SingleTop
property bool animDisabled: false
property bool animationEnabled: FluTheme.animationEnabled
property string url : ""
id: control
opacity: visible
visible: false
StackView.onRemoved: destroy()
Behavior on opacity{
enabled: !animDisabled && FluTheme.enableAnimation
NumberAnimation{
duration: 167
}
}
padding: 5
visible: false
opacity: visible
transform: Translate {
y: control.visible ? 0 : 80
Behavior on y{
enabled: !animDisabled && FluTheme.enableAnimation
enabled: control.animationEnabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
}
}
}
Behavior on opacity {
enabled: control.animationEnabled
NumberAnimation{
duration: 83
}
}
background: Item{}
header: Item{
implicitHeight: 40
FluText{
id:text_title
text: control.title
font: FluTextStyle.Title
anchors{
left: parent.left
leftMargin: 5
}
}
}
Component.onCompleted: {
visible = true
control.visible = true
}
}

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

@ -30,7 +30,7 @@ Page {
spacing: control.headerSpacing
interactive: false
orientation: ListView.Horizontal
highlightMoveDuration: FluTheme.enableAnimation ? 167 : 0
highlightMoveDuration: FluTheme.animationEnabled ? 167 : 0
highlight: Item{
clip: true
Rectangle{
@ -40,7 +40,7 @@ Page {
width: nav_list.currentItem ? nav_list.currentItem.width : 0
y:d.tabY
Behavior on width {
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic

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

@ -15,7 +15,7 @@ Popup {
enter: Transition {
NumberAnimation {
property: "opacity"
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
from:0
to:1
}
@ -24,7 +24,7 @@ Popup {
exit:Transition {
NumberAnimation {
property: "opacity"
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
from:1
to:0
}

5
src/Qt5/imports/FluentUI/Controls/FluProgressBar.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
import FluentUI 1.0
ProgressBar{
property int duration: 888
property real strokeWidth: 6
property bool progressVisible: false
property color color: FluTheme.primaryColor
@ -17,7 +18,7 @@ ProgressBar{
if(!indeterminate){
animator_x.duration = 0
rect_progress.x = 0
animator_x.duration = 888
animator_x.duration = control.duration
}
}
background: Rectangle {
@ -46,7 +47,7 @@ ProgressBar{
from: -rect_progress.width
to:control.width+rect_progress.width
loops: Animation.Infinite
duration: 888
duration: control.duration
}
}
}

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

@ -73,10 +73,10 @@ Button {
enabled: control.progress !== 0
SequentialAnimation {
PauseAnimation {
duration: FluTheme.enableAnimation ? 167 : 0
duration: FluTheme.animationEnabled ? 167 : 0
}
NumberAnimation{
duration: FluTheme.enableAnimation ? 167 : 0
duration: FluTheme.animationEnabled ? 167 : 0
from: 3
to: background.height
}

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

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

77
src/Qt5/imports/FluentUI/Controls/FluScrollablePage.qml
View File

@ -5,75 +5,16 @@ import QtQuick.Controls 2.15
import FluentUI 1.0
FluPage {
property alias title: text_title.text
default property alias content: container.data
property int spacing : 0
property int leftPadding: 10
property int topPadding: 0
property int rightPadding: 10
property int bottomPadding: 10
property alias color: status_view.color
property alias statusMode: status_view.statusMode
property alias loadingText: status_view.loadingText
property alias emptyText:status_view.emptyText
property alias errorText:status_view.errorText
property alias errorButtonText:status_view.errorButtonText
property alias loadingItem :status_view.loadingItem
property alias emptyItem : status_view.emptyItem
property alias errorItem :status_view.errorItem
signal errorClicked
id:control
FluText{
id:text_title
font: FluTextStyle.Title
visible: text !== ""
height: visible ? contentHeight : 0
padding: 0
anchors{
top: parent.top
topMargin: control.topPadding
left: parent.left
right: parent.right
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
}
FluStatusLayout{
id:status_view
color: "#00000000"
statusMode: FluStatusLayoutType.Success
onErrorClicked: control.errorClicked()
anchors{
left: parent.left
right: parent.right
top: text_title.bottom
bottom: parent.bottom
bottomMargin: control.bottomPadding
}
Flickable{
id:flickview
clip: true
anchors.fill: parent
contentWidth: parent.width
contentHeight: container.height
ScrollBar.vertical: FluScrollBar {
anchors.right: flickview.right
anchors.rightMargin: 2
}
boundsBehavior: Flickable.StopAtBounds
ColumnLayout{
id:container
spacing: control.spacing
clip: true
anchors{
left: parent.left
right: parent.right
top: parent.top
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
width: parent.width
}
Flickable{
clip: true
anchors.fill: parent
ScrollBar.vertical: FluScrollBar {}
boundsBehavior: Flickable.StopAtBounds
contentHeight: container.height
ColumnLayout{
id:container
width: parent.width
}
}
}

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

@ -62,7 +62,7 @@ T.SpinBox {
}
}
Behavior on height{
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation{
duration: 83
easing.type: Easing.OutCubic

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

@ -43,7 +43,7 @@ Item{
Component{
id:com_loading
FluArea{
paddings: 0
padding: 0
border.width: 0
radius: 0
color:control.color
@ -63,7 +63,7 @@ Item{
Component {
id:com_empty
FluArea{
paddings: 0
padding: 0
border.width: 0
radius: 0
color:control.color
@ -80,7 +80,7 @@ Item{
Component{
id:com_error
FluArea{
paddings: 0
padding: 0
border.width: 0
radius: 0
color:control.color

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

@ -46,7 +46,7 @@ FluClip{
}
}
Behavior on height{
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation{
duration: 83
easing.type: Easing.OutCubic

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

@ -9,7 +9,7 @@ FluMenu{
property string selectAllText : qsTr("Select All")
property var inputItem
id:menu
enableAnimation: false
animationEnabled: false
width: 120
focus: false
onVisibleChanged: {

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

@ -121,7 +121,7 @@ FluButton {
property: "opacity"
from:0
to:1
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
}
}
exit:Transition {
@ -129,7 +129,7 @@ FluButton {
property: "opacity"
from:1
to:0
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
}
}
background:Item{

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

@ -102,7 +102,7 @@ Button {
}
}
Behavior on x {
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation {
duration: 167
easing.type: Easing.OutCubic

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

@ -51,7 +51,7 @@ Item {
}
NumberAnimation {
properties: "opacity"
duration: 88
duration: 83
from: 0
to: 1
}
@ -70,7 +70,7 @@ Item {
}
NumberAnimation {
properties: "opacity"
duration: 88
duration: 83
from: 0
to: 1
}
@ -373,7 +373,7 @@ Item {
horizontalPadding:0
verticalPadding: 0
checked: itemModel.checked
enableAnimation:false
animationEnabled:false
visible: control.checkable
padding: 0
clickListener: function(){

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

@ -142,7 +142,7 @@ Window {
Behavior on opacity {
SequentialAnimation {
PauseAnimation {
duration: 88
duration: 83
}
NumberAnimation{
duration: 167

40
src/Qt6/imports/FluentUI/Controls/FluArea.qml
View File

@ -1,28 +1,22 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Window
import QtQuick.Controls.impl
import QtQuick.Templates as T
import FluentUI
Rectangle {
default property alias contentData : layout_content.data
property int paddings : 0
property int leftPadding : 0
property int rightPadding : 0
property int topPadding : 0
property int bottomPadding : 0
id:control
radius: 4
color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
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.width: 1
implicitHeight: height
implicitWidth: width
Item {
id: layout_content
anchors.fill: parent
anchors.leftMargin: Math.max(paddings,leftPadding)
anchors.rightMargin: Math.max(paddings,rightPadding)
anchors.topMargin: Math.max(paddings,topPadding)
anchors.bottomMargin: Math.max(paddings,bottomPadding)
T.Frame {
property alias border: d.border
property alias color: d.color
property alias radius: d.radius
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding)
padding: 0
background: Rectangle {
id:d
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)
color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
}
}

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

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

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

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

8
src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml
View File

@ -62,7 +62,7 @@ FluButton {
property: "opacity"
from:0
to:1
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
}
}
exit:Transition {
@ -70,7 +70,7 @@ FluButton {
property: "opacity"
from:1
to:0
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
}
}
contentItem: Item{
@ -162,7 +162,7 @@ FluButton {
OpacityAnimator{
from: 0
to: 1
duration: 88
duration: 83
}
ScaleAnimator{
from: 0.5
@ -175,7 +175,7 @@ FluButton {
OpacityAnimator{
from: 1
to: 0
duration: 88
duration: 83
}
ScaleAnimator{
from: 1.0

8
src/Qt6/imports/FluentUI/Controls/FluCheckBox.qml
View File

@ -23,7 +23,7 @@ Button {
property alias textColor: btn_text.textColor
property bool textRight: true
property real textSpacing: 6
property bool enableAnimation: FluTheme.enableAnimation
property bool animationEnabled: FluTheme.animationEnabled
property var clickListener : function(){
checked = !checked
}
@ -95,7 +95,7 @@ Button {
return normalColor
}
Behavior on color {
enabled: control.enableAnimation
enabled: control.animationEnabled
ColorAnimation{
duration: 83
}
@ -108,7 +108,7 @@ Button {
visible: indeterminate
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {
enabled: control.enableAnimation
enabled: control.animationEnabled
NumberAnimation{
duration: 83
}
@ -122,7 +122,7 @@ Button {
visible: checked && !indeterminate
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {
enabled: control.enableAnimation
enabled: control.animationEnabled
NumberAnimation{
duration: 83
}

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

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

54
src/Qt6/imports/FluentUI/Controls/FluContentPage.qml
View File

@ -5,56 +5,4 @@ import QtQuick.Controls
import FluentUI
FluPage {
property alias title: text_title.text
default property alias content: container.data
property int leftPadding: 10
property int topPadding: 0
property int rightPadding: 10
property int bottomPadding: 10
property alias color: status_view.color
property alias statusMode: status_view.statusMode
property alias loadingText: status_view.loadingText
property alias emptyText:status_view.emptyText
property alias errorText:status_view.errorText
property alias errorButtonText:status_view.errorButtonText
property alias loadingItem :status_view.loadingItem
property alias emptyItem : status_view.emptyItem
property alias errorItem :status_view.errorItem
signal errorClicked
id:control
FluText{
id:text_title
visible: text !== ""
height: visible ? contentHeight : 0
font: FluTextStyle.Title
anchors{
top: parent.top
topMargin: control.topPadding
left: parent.left
right: parent.right
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
}
FluStatusLayout{
id:status_view
color: "#00000000"
statusMode: FluStatusLayoutType.Success
onErrorClicked: control.errorClicked()
anchors{
left: parent.left
right: parent.right
top: text_title.bottom
bottom: parent.bottom
leftMargin: control.leftPadding
rightMargin: control.rightPadding
bottomMargin: control.bottomPadding
}
Item{
clip: true
id:container
anchors.fill: parent
}
}
}
}

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

@ -104,7 +104,7 @@ FluButton {
property: "opacity"
from:0
to:1
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
}
}
exit:Transition {
@ -112,7 +112,7 @@ FluButton {
property: "opacity"
from:1
to:0
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
}
}
background:Item{

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

@ -64,7 +64,7 @@ Item {
iconSource:FluentIcons.ChevronUp
iconSize: 15
Behavior on rotation {
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -115,7 +115,7 @@ Item {
to:"expand"
NumberAnimation {
properties: "anchors.topMargin"
duration: FluTheme.enableAnimation && d.flag ? 167 : 0
duration: FluTheme.animationEnabled && d.flag ? 167 : 0
easing.type: Easing.OutCubic
}
},
@ -123,7 +123,7 @@ Item {
to:"collapsed"
NumberAnimation {
properties: "anchors.topMargin"
duration: FluTheme.enableAnimation && d.flag ? 167 : 0
duration: FluTheme.animationEnabled && d.flag ? 167 : 0
easing.type: Easing.OutCubic
}
}

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

@ -54,7 +54,7 @@ FluObject {
NumberAnimation {
properties: "y"
easing.type: Easing.OutCubic
duration: FluTheme.enableAnimation ? 333 : 0
duration: FluTheme.animationEnabled ? 333 : 0
}
}
onChildrenChanged: if(children.length === 0) destroy();
@ -95,7 +95,7 @@ FluObject {
scale: item ? 1 : 0;
asynchronous: true
Behavior on scale {
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation {
easing.type: Easing.OutCubic
duration: 167

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

@ -24,7 +24,7 @@ FluButton {
visible: Number(width)!==0
clip: true
Behavior on width {
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic

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

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

28
src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml
View File

@ -168,7 +168,7 @@ Item {
return control.cellHeight
}
Behavior on height {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 83
}
@ -311,7 +311,7 @@ Item {
return true
}
Behavior on rotation {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -458,7 +458,7 @@ Item {
id:com_panel_item
Item{
Behavior on height {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -772,13 +772,13 @@ Item {
visible: opacity
opacity: d.isMinimal
Behavior on opacity{
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 83
}
}
Behavior on Layout.preferredWidth {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -881,7 +881,7 @@ Item {
}
}
Behavior on anchors.leftMargin {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -926,14 +926,14 @@ Item {
}
x: visible ? 0 : -width
Behavior on width {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
}
}
Behavior on x {
enabled: FluTheme.enableAnimation && d.animDisabled
enabled: FluTheme.animationEnabled && d.animDisabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -1013,7 +1013,7 @@ Item {
interactive: false
model:d.handleItems()
boundsBehavior: ListView.StopAtBounds
highlightMoveDuration: FluTheme.enableAnimation && d.animDisabled ? 167 : 0
highlightMoveDuration: FluTheme.animationEnabled && d.animDisabled ? 167 : 0
highlight: Item{
clip: true
Rectangle{
@ -1232,10 +1232,14 @@ Item {
}
}
function setCurrentIndex(index){
nav_list.currentIndex = index
var item = nav_list.model[index]
if(item instanceof FluPaneItem){
item.tap()
if(item.url){
nav_list.currentIndex = index
if(item instanceof FluPaneItem){
item.tap()
}
}else{
item.onTapListener()
}
}
function getItems(){

47
src/Qt6/imports/FluentUI/Controls/FluPage.qml
View File

@ -4,40 +4,45 @@ import QtQuick.Controls
import QtQuick.Window
import FluentUI
Item {
Page {
property int launchMode: FluPageType.SingleTop
property bool animDisabled: false
property bool animationEnabled: FluTheme.animationEnabled
property string url : ""
signal animationEnd()
id: control
opacity: visible
visible: false
StackView.onRemoved: destroy()
Behavior on opacity{
enabled: !animDisabled && FluTheme.enableAnimation
NumberAnimation{
duration: 167
}
}
padding: 5
visible: false
opacity: visible
transform: Translate {
y: control.visible ? 0 : 80
Behavior on y{
enabled: !animDisabled && FluTheme.enableAnimation
enabled: control.animationEnabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
}
}
}
Component.onCompleted: {
visible = true
timer.restart()
}
Timer{
id:timer
interval: !animDisabled && FluTheme.enableAnimation ? 200 : 0
onTriggered: {
control.animationEnd()
Behavior on opacity {
enabled: control.animationEnabled
NumberAnimation{
duration: 83
}
}
background: Item{}
header: Item{
implicitHeight: 40
FluText{
id:text_title
text: control.title
font: FluTextStyle.Title
anchors{
left: parent.left
leftMargin: 5
}
}
}
Component.onCompleted: {
control.visible = true
}
}

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

@ -31,7 +31,7 @@ Page {
spacing: control.headerSpacing
interactive: false
orientation: ListView.Horizontal
highlightMoveDuration: FluTheme.enableAnimation ? 167 : 0
highlightMoveDuration: FluTheme.animationEnabled ? 167 : 0
highlight: Item{
clip: true
Rectangle{
@ -41,7 +41,7 @@ Page {
width: nav_list.currentItem ? nav_list.currentItem.width : 0
y:d.tabY
Behavior on width {
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic

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

@ -15,7 +15,7 @@ Popup {
enter: Transition {
NumberAnimation {
property: "opacity"
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
from:0
to:1
}
@ -24,7 +24,7 @@ Popup {
exit:Transition {
NumberAnimation {
property: "opacity"
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
from:1
to:0
}

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

@ -74,10 +74,10 @@ Button {
enabled: control.progress !== 0
SequentialAnimation {
PauseAnimation {
duration: FluTheme.enableAnimation ? 167 : 0
duration: FluTheme.animationEnabled ? 167 : 0
}
NumberAnimation{
duration: FluTheme.enableAnimation ? 167 : 0
duration: FluTheme.animationEnabled ? 167 : 0
from: 3
to: background.height
}

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

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

77
src/Qt6/imports/FluentUI/Controls/FluScrollablePage.qml
View File

@ -5,75 +5,16 @@ import QtQuick.Controls
import FluentUI
FluPage {
property alias title: text_title.text
default property alias content: container.data
property int spacing : 0
property int leftPadding: 10
property int topPadding: 0
property int rightPadding: 10
property int bottomPadding: 10
property alias color: status_view.color
property alias statusMode: status_view.statusMode
property alias loadingText: status_view.loadingText
property alias emptyText:status_view.emptyText
property alias errorText:status_view.errorText
property alias errorButtonText:status_view.errorButtonText
property alias loadingItem :status_view.loadingItem
property alias emptyItem : status_view.emptyItem
property alias errorItem :status_view.errorItem
signal errorClicked
id:control
FluText{
id:text_title
font: FluTextStyle.Title
visible: text !== ""
height: visible ? contentHeight : 0
padding: 0
anchors{
top: parent.top
topMargin: control.topPadding
left: parent.left
right: parent.right
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
}
FluStatusLayout{
id:status_view
color: "#00000000"
statusMode: FluStatusLayoutType.Success
onErrorClicked: control.errorClicked()
anchors{
left: parent.left
right: parent.right
top: text_title.bottom
bottom: parent.bottom
bottomMargin: control.bottomPadding
}
Flickable{
id:flickview
clip: true
anchors.fill: parent
contentWidth: parent.width
contentHeight: container.height
ScrollBar.vertical: FluScrollBar {
anchors.right: flickview.right
anchors.rightMargin: 2
}
boundsBehavior: Flickable.StopAtBounds
ColumnLayout{
id:container
spacing: control.spacing
clip: true
anchors{
left: parent.left
right: parent.right
top: parent.top
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
width: parent.width
}
Flickable{
clip: true
anchors.fill: parent
ScrollBar.vertical: FluScrollBar {}
boundsBehavior: Flickable.StopAtBounds
contentHeight: container.height
ColumnLayout{
id:container
width: parent.width
}
}
}

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

@ -63,7 +63,7 @@ T.SpinBox {
}
}
Behavior on height{
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation{
duration: 83
easing.type: Easing.OutCubic

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

@ -42,7 +42,7 @@ Item{
Component{
id:com_loading
FluArea{
paddings: 0
padding: 0
border.width: 0
radius: 0
color:control.color
@ -62,7 +62,7 @@ Item{
Component {
id:com_empty
FluArea{
paddings: 0
padding: 0
border.width: 0
radius: 0
color:control.color
@ -79,7 +79,7 @@ Item{
Component{
id:com_error
FluArea{
paddings: 0
padding: 0
border.width: 0
radius: 0
color:control.color

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

@ -46,7 +46,7 @@ FluClip{
}
}
Behavior on height{
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation{
duration: 83
easing.type: Easing.OutCubic

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

@ -9,7 +9,7 @@ FluMenu{
property string selectAllText : qsTr("Select All")
property var inputItem
id:menu
enableAnimation: false
animationEnabled: false
width: 120
focus: false
onVisibleChanged: {

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

@ -121,7 +121,7 @@ FluButton {
property: "opacity"
from:0
to:1
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
}
}
exit:Transition {
@ -129,7 +129,7 @@ FluButton {
property: "opacity"
from:1
to:0
duration: FluTheme.enableAnimation ? 83 : 0
duration: FluTheme.animationEnabled ? 83 : 0
}
}
background:Item{

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

@ -103,7 +103,7 @@ Button {
}
}
Behavior on x {
enabled: FluTheme.enableAnimation
enabled: FluTheme.animationEnabled
NumberAnimation {
duration: 167
easing.type: Easing.OutCubic

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

@ -51,7 +51,7 @@ Item {
}
NumberAnimation {
properties: "opacity"
duration: 88
duration: 83
from: 0
to: 1
}
@ -70,7 +70,7 @@ Item {
}
NumberAnimation {
properties: "opacity"
duration: 88
duration: 83
from: 0
to: 1
}
@ -373,7 +373,7 @@ Item {
horizontalPadding:0
verticalPadding: 0
checked: itemModel.checked
enableAnimation:false
animationEnabled:false
visible: control.checkable
padding: 0
clickListener: function(){

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

@ -141,7 +141,7 @@ Window {
Behavior on opacity {
SequentialAnimation {
PauseAnimation {
duration: 88
duration: 83
}
NumberAnimation{
duration: 167

4
src/fluentui_en_US.ts
View File

@ -265,8 +265,8 @@
<context>
<name>FluWindow</name>
<message>
<location filename="Qt5/imports/FluentUI/Controls/FluWindow.qml" line="259"/>
<location filename="Qt6/imports/FluentUI/Controls/FluWindow.qml" line="258"/>
<location filename="Qt5/imports/FluentUI/Controls/FluWindow.qml" line="285"/>
<location filename="Qt6/imports/FluentUI/Controls/FluWindow.qml" line="284"/>
<source>Loading...</source>
<translation type="unfinished"></translation>
</message>

4
src/fluentui_zh_CN.ts
View File

@ -269,8 +269,8 @@
<context>
<name>FluWindow</name>
<message>
<location filename="Qt5/imports/FluentUI/Controls/FluWindow.qml" line="259"/>
<location filename="Qt6/imports/FluentUI/Controls/FluWindow.qml" line="258"/>
<location filename="Qt5/imports/FluentUI/Controls/FluWindow.qml" line="285"/>
<location filename="Qt6/imports/FluentUI/Controls/FluWindow.qml" line="284"/>
<source>Loading...</source>
<translation type="unfinished">加载中...</translation>
</message>