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

update

Browse Source
This commit is contained in:
zhuzichu 2023-07-03 18:08:25 +08:00
parent 0d4dd483da
commit 7dea573069
14 changed files with 90 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/qml/page/T_Home.qml
View File

@ -8,6 +8,7 @@ import FluentUI
FluScrollablePage{ FluScrollablePage{
pageMode: FluNavigationView.SingleTask pageMode: FluNavigationView.SingleTask
animDisabled: true
ListModel{ ListModel{
id:model_header id:model_header

2
example/qml/page/T_Image.qml
View File

@ -11,7 +11,7 @@ FluScrollablePage{
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
height: 300 height: 260
paddings: 10 paddings: 10
Layout.topMargin: 20 Layout.topMargin: 20
Column{ Column{

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

@ -16,7 +16,7 @@ CustomWindow {
height: 640 height: 640
closeDestory:false closeDestory:false
minimumWidth: 520 minimumWidth: 520
minimumHeight: 460 minimumHeight: 200
appBarVisible: false appBarVisible: false
launchMode: FluWindow.SingleTask launchMode: FluWindow.SingleTask
@ -95,7 +95,7 @@ CustomWindow {
when: flipable.flipped when: flipable.flipped
} }
transitions: Transition { 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{ back: Item{
anchors.fill: flipable anchors.fill: flipable

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

@ -9,10 +9,8 @@ Item {
property int contentHeight : 300 property int contentHeight : 300
default property alias content: container.data default property alias content: container.data
id:control id:control
height: layout_header.height + container.height implicitHeight: Math.max((layout_header.height + container.height),layout_header.height)
width: 400 implicitWidth: 400
implicitWidth: width
implicitHeight: height
Rectangle{ Rectangle{
id:layout_header id:layout_header
width: parent.width width: parent.width
@ -58,29 +56,65 @@ Item {
Behavior on rotation { Behavior on rotation {
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.OutCubic
} }
} }
} }
} }
} }
Rectangle{ Item{
id:container
width: parent.width
clip: true
anchors{ anchors{
top: layout_header.bottom top: layout_header.bottom
topMargin: -1 topMargin: -1
left: layout_header.left left: layout_header.left
} }
radius: 4 width: parent.width
color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) clip: true
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) height: contentHeight+container.y
height: expand ? contentHeight : 0 Rectangle{
Behavior on height { id:container
NumberAnimation{ width: parent.width
duration: 167 height: parent.height
easing.type: Easing.InCubic 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
}
}
]
} }
} }
} }

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

@ -118,11 +118,6 @@ Item {
} }
return 1 return 1
} }
Behavior on height {
NumberAnimation{
duration: 83
}
}
} }
} }
Component{ Component{
@ -242,7 +237,8 @@ Item {
} }
Behavior on rotation { Behavior on rotation {
NumberAnimation{ NumberAnimation{
duration: 83 duration: 167
easing.type: Easing.OutCubic
} }
} }
} }
@ -564,7 +560,7 @@ Item {
Behavior on Layout.preferredWidth { Behavior on Layout.preferredWidth {
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.InCubic easing.type: Easing.OutCubic
} }
} }
} }
@ -630,7 +626,7 @@ Item {
Behavior on anchors.leftMargin { Behavior on anchors.leftMargin {
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.InCubic easing.type: Easing.OutCubic
} }
} }
StackView{ StackView{
@ -685,13 +681,13 @@ Item {
Behavior on width { Behavior on width {
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.InCubic easing.type: Easing.OutCubic
} }
} }
Behavior on x { Behavior on x {
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.InCubic easing.type: Easing.OutCubic
} }
} }
visible: { visible: {
@ -756,6 +752,7 @@ Item {
clip: true clip: true
ScrollBar.vertical: FluScrollBar {} ScrollBar.vertical: FluScrollBar {}
model:d.handleItems() model:d.handleItems()
boundsBehavior: ListView.StopAtBounds
highlightMoveDuration: 167 highlightMoveDuration: 167
highlight: Item{ highlight: Item{
clip: true clip: true
@ -809,6 +806,7 @@ Item {
height: childrenRect.height height: childrenRect.height
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
interactive: false interactive: false
boundsBehavior: ListView.StopAtBounds
currentIndex: -1 currentIndex: -1
model: { model: {
if(footerItems){ if(footerItems){

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

@ -6,13 +6,25 @@ import FluentUI
Item { Item {
property int pageMode: FluNavigationView.SingleTop property int pageMode: FluNavigationView.SingleTop
property bool animDisabled: false
property string url : "" property string url : ""
id: control id: control
opacity: visible opacity: visible
visible: false visible: false
Behavior on opacity{ Behavior on opacity{
enabled: !animDisabled
NumberAnimation{ 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: { Component.onCompleted: {

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

@ -40,7 +40,7 @@ Item {
Behavior on width { Behavior on width {
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.InCubic easing.type: Easing.OutCubic
} }
} }
} }

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

@ -21,6 +21,7 @@ Popup {
from:1.2 from:1.2
to:1 to:1
duration: 83 duration: 83
easing.type: Easing.OutCubic
} }
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
@ -35,6 +36,7 @@ Popup {
from:1 from:1
to:1.2 to:1.2
duration: 83 duration: 83
easing.type: Easing.OutCubic
} }
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"

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

@ -64,8 +64,7 @@ Button {
Behavior on border.width { Behavior on border.width {
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.BezierSpline easing.type: Easing.OutCubic
easing.bezierCurve: [ 0, 0, 0, 1 ]
} }
} }
border.color: { border.color: {

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

@ -51,7 +51,7 @@ T.ScrollBar {
} }
,State{ ,State{
name:"show" name:"show"
when: !contentItem.expand when: !contentItem.collapsed
PropertyChanges { PropertyChanges {
target: rect_bar target: rect_bar
width: vertical ? 2 : parent.width width: vertical ? 2 : parent.width
@ -68,7 +68,7 @@ T.ScrollBar {
target: rect_bar target: rect_bar
properties: vertical ? "width" : "height" properties: vertical ? "width" : "height"
duration: 167 duration: 167
easing.type: Easing.InCubic easing.type: Easing.OutCubic
to:2 to:2
} }
} }
@ -79,7 +79,7 @@ T.ScrollBar {
target: rect_bar target: rect_bar
properties: vertical ? "width" : "height" properties: vertical ? "width" : "height"
duration: 167 duration: 167
easing.type: Easing.InCubic easing.type: Easing.OutCubic
to:6 to:6
} }
} }

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

@ -44,6 +44,7 @@ FluPage {
anchors.right: flickview.right anchors.right: flickview.right
anchors.rightMargin: 2 anchors.rightMargin: 2
} }
boundsBehavior: Flickable.StopAtBounds
anchors{ anchors{
top: text_title.bottom top: text_title.bottom
bottom: parent.bottom bottom: parent.bottom

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

@ -38,6 +38,7 @@ T.Slider {
Behavior on scale { Behavior on scale {
NumberAnimation{ NumberAnimation{
duration: 167 duration: 167
easing.type: Easing.OutCubic
} }
} }
} }

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

@ -49,8 +49,7 @@ Rectangle{
Behavior on height{ Behavior on height{
NumberAnimation{ NumberAnimation{
duration: 83 duration: 83
easing.type: Easing.BezierSpline easing.type: Easing.OutCubic
easing.bezierCurve: [ 1, 0, 0, 0 ]
} }
} }
} }

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

@ -92,25 +92,25 @@ Button {
Behavior on anchors.leftMargin { Behavior on anchors.leftMargin {
NumberAnimation { NumberAnimation {
duration: 167 duration: 167
easing.type: Easing.BezierSpline easing.type: Easing.OutCubic
easing.bezierCurve: [ 1, 0, 0, 0 ]
} }
} }
Behavior on anchors.rightMargin { Behavior on anchors.rightMargin {
NumberAnimation { NumberAnimation {
duration: 167 duration: 167
easing.type: Easing.BezierSpline easing.type: Easing.OutCubic
easing.bezierCurve: [ 0, 0, 0, 1 ]
} }
} }
Behavior on width { Behavior on width {
NumberAnimation { NumberAnimation {
duration: 167 duration: 167
easing.type: Easing.OutCubic
} }
} }
Behavior on scale { Behavior on scale {
NumberAnimation { NumberAnimation {
duration: 167 duration: 167
easing.type: Easing.OutCubic
} }
} }
} }