From 98f4d970c66b0a2dd277735e85c5064c8f8ce3a2 Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Wed, 29 Mar 2023 15:43:23 +0800 Subject: [PATCH] update --- example/page/MainPage.qml | 17 ++++++++++++----- example/qml.qrc | 3 +++ src/controls/FluAppBar.qml | 4 ++-- src/controls/FluAutoSuggestBox.qml | 6 ++++++ src/controls/FluCalendarPicker.qml | 6 ++++++ src/controls/FluColorPicker.qml | 6 ++++++ src/controls/FluDatePicker.qml | 6 ++++++ src/controls/FluDropDownButton.qml | 1 + src/controls/FluMenu.qml | 10 ++++++++-- src/controls/FluNavigationView.qml | 25 ++++++++++++++++++++++--- src/controls/FluPaneItem.qml | 1 + src/controls/FluScrollablePage.qml | 2 ++ src/controls/FluTimePicker.qml | 6 ++++++ 13 files changed, 81 insertions(+), 12 deletions(-) diff --git a/example/page/MainPage.qml b/example/page/MainPage.qml index 6b9dc505..308423b9 100644 --- a/example/page/MainPage.qml +++ b/example/page/MainPage.qml @@ -8,7 +8,7 @@ import FluentUI 1.0 FluWindow { id:rootwindow - width: 860 + width: 1000 height: 640 title: "FluentUI" minimumWidth: 520 @@ -17,11 +17,20 @@ FluWindow { FluAppBar{ id:appbar z:10 + showDark: true } FluObject{ id:original_items + FluPaneItem{ + title:"Home" + icon:FluentIcons.Home + onTap:{ + nav_view.push("qrc:/T_Home.qml") + } + } + FluPaneItemHeader{ title:"Inputs" } @@ -245,11 +254,9 @@ FluWindow { logo: "qrc:/res/image/favicon.ico" z: 11 Component.onCompleted: { - nav_view.setCurrentIndex(1) - nav_view.push("qrc:/T_Buttons.qml") + nav_view.setCurrentIndex(0) + nav_view.push("qrc:/T_Home.qml") } - - } diff --git a/example/qml.qrc b/example/qml.qrc index 8af13ffc..0b4baa3e 100644 --- a/example/qml.qrc +++ b/example/qml.qrc @@ -47,5 +47,8 @@ T_MediaPlayer.qml T_TabView.qml res/image/favicon.ico + T_Home.qml + res/image/bg_home_header.png + res/image/ic_home_github.png diff --git a/src/controls/FluAppBar.qml b/src/controls/FluAppBar.qml index 35afd8f1..ee310a67 100644 --- a/src/controls/FluAppBar.qml +++ b/src/controls/FluAppBar.qml @@ -69,13 +69,13 @@ Rectangle{ RowLayout{ Layout.alignment: Qt.AlignVCenter - Layout.rightMargin: 14 + Layout.rightMargin: 5 visible: showDark spacing: 5 FluText{ text:"夜间模式" color:root.textColor - fontStyle: FluText.Body + fontStyle: FluText.Caption } FluToggleSwitch{ selected: FluTheme.isDark diff --git a/src/controls/FluAutoSuggestBox.qml b/src/controls/FluAutoSuggestBox.qml index 54cc67e4..52fe7b40 100644 --- a/src/controls/FluAutoSuggestBox.qml +++ b/src/controls/FluAutoSuggestBox.qml @@ -148,6 +148,12 @@ TextField{ to:input_popup.y duration: 150 } + NumberAnimation { + property: "opacity" + from:0 + to:1 + duration: 150 + } } onClosed: { input.focus = false diff --git a/src/controls/FluCalendarPicker.qml b/src/controls/FluCalendarPicker.qml index 631eb8fd..8ff9cbef 100644 --- a/src/controls/FluCalendarPicker.qml +++ b/src/controls/FluCalendarPicker.qml @@ -72,6 +72,12 @@ Rectangle { to:popup.y duration: 150 } + NumberAnimation { + property: "opacity" + from:0 + to:1 + duration: 150 + } } background: FluCalendarView{ id:container diff --git a/src/controls/FluColorPicker.qml b/src/controls/FluColorPicker.qml index 5e3a646c..11dceffc 100644 --- a/src/controls/FluColorPicker.qml +++ b/src/controls/FluColorPicker.qml @@ -43,6 +43,12 @@ Button{ to:popup.y duration: 150 } + NumberAnimation { + property: "opacity" + from:0 + to:1 + duration: 150 + } } contentItem: Item{} function showPopup() { diff --git a/src/controls/FluDatePicker.qml b/src/controls/FluDatePicker.qml index fee4cdb0..039f63ba 100644 --- a/src/controls/FluDatePicker.qml +++ b/src/controls/FluDatePicker.qml @@ -111,6 +111,12 @@ Rectangle { to:popup.y duration: 150 } + NumberAnimation { + property: "opacity" + from:0 + to:1 + duration: 150 + } } background: Rectangle{ id:container diff --git a/src/controls/FluDropDownButton.qml b/src/controls/FluDropDownButton.qml index ad636f3a..4dc18d50 100644 --- a/src/controls/FluDropDownButton.qml +++ b/src/controls/FluDropDownButton.qml @@ -83,6 +83,7 @@ Button { FluMenu{ id:menu width: control.width + animEnabled: true } } diff --git a/src/controls/FluMenu.qml b/src/controls/FluMenu.qml index 2565ce9c..d2e04823 100644 --- a/src/controls/FluMenu.qml +++ b/src/controls/FluMenu.qml @@ -5,7 +5,7 @@ import QtQuick.Controls 2.15 Menu { default property alias content: container.data - + property bool animEnabled: false id: popup width: 140 height: container.height @@ -18,7 +18,13 @@ Menu { property: "y" from:0 to:popup.y - duration: 150 + duration: animEnabled ? 150 : 0 + } + NumberAnimation { + property: "opacity" + from:0 + to:1 + duration: animEnabled ? 150 : 0 } } diff --git a/src/controls/FluNavigationView.qml b/src/controls/FluNavigationView.qml index a4d09b73..e401c58c 100644 --- a/src/controls/FluNavigationView.qml +++ b/src/controls/FluNavigationView.qml @@ -132,12 +132,30 @@ Item { } } - FluText{ - text:model.title + FluIcon{ + id:item_icon + iconSource: { + if(model.icon){ + return model.icon + } + return 0 + } + width: 30 + height: 30 + iconSize: 15 anchors{ verticalCenter: parent.verticalCenter left:parent.left - leftMargin: 14 + leftMargin: 3 + } + } + + FluText{ + id:item_title + text:model.title + anchors{ + verticalCenter: parent.verticalCenter + left:item_icon.right } } } @@ -326,6 +344,7 @@ Item { clip: true anchors{ top: layout_header.bottom + topMargin: 6 left: parent.left right: parent.right bottom: layout_footer.top diff --git a/src/controls/FluPaneItem.qml b/src/controls/FluPaneItem.qml index 374bc072..0b780941 100644 --- a/src/controls/FluPaneItem.qml +++ b/src/controls/FluPaneItem.qml @@ -2,6 +2,7 @@ QtObject { property string title + property var icon signal tap signal repTap } diff --git a/src/controls/FluScrollablePage.qml b/src/controls/FluScrollablePage.qml index 8c3b0514..0c8a2bb9 100644 --- a/src/controls/FluScrollablePage.qml +++ b/src/controls/FluScrollablePage.qml @@ -19,6 +19,8 @@ Item { FluText{ id:text_title fontStyle: FluText.TitleLarge + visible: text !== "" + height: visible?implicitHeight:0 anchors{ top: parent.top topMargin: control.topPadding diff --git a/src/controls/FluTimePicker.qml b/src/controls/FluTimePicker.qml index 37517dae..373ba032 100644 --- a/src/controls/FluTimePicker.qml +++ b/src/controls/FluTimePicker.qml @@ -107,6 +107,12 @@ Rectangle { modal: true dim:false enter: Transition { + NumberAnimation { + property: "opacity" + from:0 + to:1 + duration: 150 + } NumberAnimation { property: "y" from:0