From 7dea57306984472cc35bb7310f999d3b9caf2f3e Mon Sep 17 00:00:00 2001 From: zhuzichu Date: Mon, 3 Jul 2023 18:08:25 +0800 Subject: [PATCH] update --- example/qml/page/T_Home.qml | 1 + example/qml/page/T_Image.qml | 2 +- example/qml/window/MainWindow.qml | 4 +- src/imports/FluentUI/Controls/FluExpander.qml | 68 ++++++++++++++----- .../FluentUI/Controls/FluNavigationView.qml | 18 +++-- src/imports/FluentUI/Controls/FluPage.qml | 14 +++- src/imports/FluentUI/Controls/FluPivot.qml | 2 +- src/imports/FluentUI/Controls/FluPopup.qml | 2 + .../FluentUI/Controls/FluRadioButton.qml | 3 +- .../FluentUI/Controls/FluScrollBar.qml | 6 +- .../FluentUI/Controls/FluScrollablePage.qml | 1 + src/imports/FluentUI/Controls/FluSlider.qml | 1 + .../Controls/FluTextBoxBackground.qml | 3 +- .../FluentUI/Controls/FluToggleSwitch.qml | 8 +-- 14 files changed, 90 insertions(+), 43 deletions(-) diff --git a/example/qml/page/T_Home.qml b/example/qml/page/T_Home.qml index 6ae4df10..fc0e6e61 100644 --- a/example/qml/page/T_Home.qml +++ b/example/qml/page/T_Home.qml @@ -8,6 +8,7 @@ import FluentUI FluScrollablePage{ pageMode: FluNavigationView.SingleTask + animDisabled: true ListModel{ id:model_header diff --git a/example/qml/page/T_Image.qml b/example/qml/page/T_Image.qml index 1016fcfb..bbeb6dcf 100644 --- a/example/qml/page/T_Image.qml +++ b/example/qml/page/T_Image.qml @@ -11,7 +11,7 @@ FluScrollablePage{ FluArea{ Layout.fillWidth: true - height: 300 + height: 260 paddings: 10 Layout.topMargin: 20 Column{ diff --git a/example/qml/window/MainWindow.qml b/example/qml/window/MainWindow.qml index 7f6b7be6..8d79f192 100644 --- a/example/qml/window/MainWindow.qml +++ b/example/qml/window/MainWindow.qml @@ -16,7 +16,7 @@ CustomWindow { height: 640 closeDestory:false minimumWidth: 520 - minimumHeight: 460 + minimumHeight: 200 appBarVisible: false launchMode: FluWindow.SingleTask @@ -95,7 +95,7 @@ CustomWindow { when: flipable.flipped } transitions: Transition { - NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutQuad} + NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutCubic} } back: Item{ anchors.fill: flipable diff --git a/src/imports/FluentUI/Controls/FluExpander.qml b/src/imports/FluentUI/Controls/FluExpander.qml index eeee7fa2..8c0e79e0 100644 --- a/src/imports/FluentUI/Controls/FluExpander.qml +++ b/src/imports/FluentUI/Controls/FluExpander.qml @@ -9,10 +9,8 @@ Item { property int contentHeight : 300 default property alias content: container.data id:control - height: layout_header.height + container.height - width: 400 - implicitWidth: width - implicitHeight: height + implicitHeight: Math.max((layout_header.height + container.height),layout_header.height) + implicitWidth: 400 Rectangle{ id:layout_header width: parent.width @@ -58,29 +56,65 @@ Item { Behavior on rotation { NumberAnimation{ duration: 167 + easing.type: Easing.OutCubic } } } } } - Rectangle{ - id:container - width: parent.width - clip: true + Item{ anchors{ top: layout_header.bottom topMargin: -1 left: layout_header.left } - radius: 4 - 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) - height: expand ? contentHeight : 0 - Behavior on height { - NumberAnimation{ - duration: 167 - easing.type: Easing.InCubic - } + width: parent.width + clip: true + height: contentHeight+container.y + Rectangle{ + id:container + width: parent.width + height: parent.height + radius: 4 + 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) + y: -contentHeight + states: [ + State{ + name:"expand" + when: control.expand + PropertyChanges { + target: container + y:0 + } + }, + State{ + name:"collapsed" + when: !control.expand + PropertyChanges { + target: container + y:-contentHeight + } + } + ] + transitions: [ + Transition { + to:"expand" + NumberAnimation { + properties: "y" + duration: 167 + easing.type: Easing.OutCubic + } + }, + Transition { + to:"collapsed" + NumberAnimation { + properties: "y" + duration: 167 + easing.type: Easing.OutCubic + } + } + ] } } } diff --git a/src/imports/FluentUI/Controls/FluNavigationView.qml b/src/imports/FluentUI/Controls/FluNavigationView.qml index 412afaeb..30a87a71 100644 --- a/src/imports/FluentUI/Controls/FluNavigationView.qml +++ b/src/imports/FluentUI/Controls/FluNavigationView.qml @@ -118,11 +118,6 @@ Item { } return 1 } - Behavior on height { - NumberAnimation{ - duration: 83 - } - } } } Component{ @@ -242,7 +237,8 @@ Item { } Behavior on rotation { NumberAnimation{ - duration: 83 + duration: 167 + easing.type: Easing.OutCubic } } } @@ -564,7 +560,7 @@ Item { Behavior on Layout.preferredWidth { NumberAnimation{ duration: 167 - easing.type: Easing.InCubic + easing.type: Easing.OutCubic } } } @@ -630,7 +626,7 @@ Item { Behavior on anchors.leftMargin { NumberAnimation{ duration: 167 - easing.type: Easing.InCubic + easing.type: Easing.OutCubic } } StackView{ @@ -685,13 +681,13 @@ Item { Behavior on width { NumberAnimation{ duration: 167 - easing.type: Easing.InCubic + easing.type: Easing.OutCubic } } Behavior on x { NumberAnimation{ duration: 167 - easing.type: Easing.InCubic + easing.type: Easing.OutCubic } } visible: { @@ -756,6 +752,7 @@ Item { clip: true ScrollBar.vertical: FluScrollBar {} model:d.handleItems() + boundsBehavior: ListView.StopAtBounds highlightMoveDuration: 167 highlight: Item{ clip: true @@ -809,6 +806,7 @@ Item { height: childrenRect.height anchors.bottom: parent.bottom interactive: false + boundsBehavior: ListView.StopAtBounds currentIndex: -1 model: { if(footerItems){ diff --git a/src/imports/FluentUI/Controls/FluPage.qml b/src/imports/FluentUI/Controls/FluPage.qml index 262341c4..85dfe3cc 100644 --- a/src/imports/FluentUI/Controls/FluPage.qml +++ b/src/imports/FluentUI/Controls/FluPage.qml @@ -6,13 +6,25 @@ import FluentUI Item { property int pageMode: FluNavigationView.SingleTop + property bool animDisabled: false property string url : "" id: control opacity: visible visible: false Behavior on opacity{ + enabled: !animDisabled NumberAnimation{ - duration: 83 + duration: 167 + } + } + transform: Translate { + y: control.visible ? 0 : 80 + Behavior on y{ + enabled: !animDisabled + NumberAnimation{ + duration: 167 + easing.type: Easing.OutCubic + } } } Component.onCompleted: { diff --git a/src/imports/FluentUI/Controls/FluPivot.qml b/src/imports/FluentUI/Controls/FluPivot.qml index da424303..b72ae9bc 100644 --- a/src/imports/FluentUI/Controls/FluPivot.qml +++ b/src/imports/FluentUI/Controls/FluPivot.qml @@ -40,7 +40,7 @@ Item { Behavior on width { NumberAnimation{ duration: 167 - easing.type: Easing.InCubic + easing.type: Easing.OutCubic } } } diff --git a/src/imports/FluentUI/Controls/FluPopup.qml b/src/imports/FluentUI/Controls/FluPopup.qml index 538138e8..e0984c0e 100644 --- a/src/imports/FluentUI/Controls/FluPopup.qml +++ b/src/imports/FluentUI/Controls/FluPopup.qml @@ -21,6 +21,7 @@ Popup { from:1.2 to:1 duration: 83 + easing.type: Easing.OutCubic } NumberAnimation { property: "opacity" @@ -35,6 +36,7 @@ Popup { from:1 to:1.2 duration: 83 + easing.type: Easing.OutCubic } NumberAnimation { property: "opacity" diff --git a/src/imports/FluentUI/Controls/FluRadioButton.qml b/src/imports/FluentUI/Controls/FluRadioButton.qml index 4abf3423..d8776b9b 100644 --- a/src/imports/FluentUI/Controls/FluRadioButton.qml +++ b/src/imports/FluentUI/Controls/FluRadioButton.qml @@ -64,8 +64,7 @@ Button { Behavior on border.width { NumberAnimation{ duration: 167 - easing.type: Easing.BezierSpline - easing.bezierCurve: [ 0, 0, 0, 1 ] + easing.type: Easing.OutCubic } } border.color: { diff --git a/src/imports/FluentUI/Controls/FluScrollBar.qml b/src/imports/FluentUI/Controls/FluScrollBar.qml index 00d34c47..5d9bafdf 100644 --- a/src/imports/FluentUI/Controls/FluScrollBar.qml +++ b/src/imports/FluentUI/Controls/FluScrollBar.qml @@ -51,7 +51,7 @@ T.ScrollBar { } ,State{ name:"show" - when: !contentItem.expand + when: !contentItem.collapsed PropertyChanges { target: rect_bar width: vertical ? 2 : parent.width @@ -68,7 +68,7 @@ T.ScrollBar { target: rect_bar properties: vertical ? "width" : "height" duration: 167 - easing.type: Easing.InCubic + easing.type: Easing.OutCubic to:2 } } @@ -79,7 +79,7 @@ T.ScrollBar { target: rect_bar properties: vertical ? "width" : "height" duration: 167 - easing.type: Easing.InCubic + easing.type: Easing.OutCubic to:6 } } diff --git a/src/imports/FluentUI/Controls/FluScrollablePage.qml b/src/imports/FluentUI/Controls/FluScrollablePage.qml index 547cd373..34fa0c00 100644 --- a/src/imports/FluentUI/Controls/FluScrollablePage.qml +++ b/src/imports/FluentUI/Controls/FluScrollablePage.qml @@ -44,6 +44,7 @@ FluPage { anchors.right: flickview.right anchors.rightMargin: 2 } + boundsBehavior: Flickable.StopAtBounds anchors{ top: text_title.bottom bottom: parent.bottom diff --git a/src/imports/FluentUI/Controls/FluSlider.qml b/src/imports/FluentUI/Controls/FluSlider.qml index f7c468ae..92b8b79f 100644 --- a/src/imports/FluentUI/Controls/FluSlider.qml +++ b/src/imports/FluentUI/Controls/FluSlider.qml @@ -38,6 +38,7 @@ T.Slider { Behavior on scale { NumberAnimation{ duration: 167 + easing.type: Easing.OutCubic } } } diff --git a/src/imports/FluentUI/Controls/FluTextBoxBackground.qml b/src/imports/FluentUI/Controls/FluTextBoxBackground.qml index 032f9117..5c1fbe9a 100644 --- a/src/imports/FluentUI/Controls/FluTextBoxBackground.qml +++ b/src/imports/FluentUI/Controls/FluTextBoxBackground.qml @@ -49,8 +49,7 @@ Rectangle{ Behavior on height{ NumberAnimation{ duration: 83 - easing.type: Easing.BezierSpline - easing.bezierCurve: [ 1, 0, 0, 0 ] + easing.type: Easing.OutCubic } } } diff --git a/src/imports/FluentUI/Controls/FluToggleSwitch.qml b/src/imports/FluentUI/Controls/FluToggleSwitch.qml index 2eb87836..62a3a94a 100644 --- a/src/imports/FluentUI/Controls/FluToggleSwitch.qml +++ b/src/imports/FluentUI/Controls/FluToggleSwitch.qml @@ -92,25 +92,25 @@ Button { Behavior on anchors.leftMargin { NumberAnimation { duration: 167 - easing.type: Easing.BezierSpline - easing.bezierCurve: [ 1, 0, 0, 0 ] + easing.type: Easing.OutCubic } } Behavior on anchors.rightMargin { NumberAnimation { duration: 167 - easing.type: Easing.BezierSpline - easing.bezierCurve: [ 0, 0, 0, 1 ] + easing.type: Easing.OutCubic } } Behavior on width { NumberAnimation { duration: 167 + easing.type: Easing.OutCubic } } Behavior on scale { NumberAnimation { duration: 167 + easing.type: Easing.OutCubic } } }