wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

main
zhuzihcu 2023-04-19 09:41:08 +08:00
parent cb94db8a97
commit 88fed82260
17 changed files with 641 additions and 530 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/AppInfo.cpp
View File

@ -6,7 +6,7 @@
AppInfo::AppInfo(QObject *parent) AppInfo::AppInfo(QObject *parent)
: QObject{parent} : QObject{parent}
{ {
version("1.2.4"); version("1.2.5");
lang(new En()); lang(new En());
} }

1
example/T_Pivot.qml
View File

@ -21,6 +21,7 @@ FluScrollablePage{
FluPivot{ FluPivot{
anchors.fill: parent anchors.fill: parent
currentIndex: 2
FluPivotItem{ FluPivotItem{
title:"All" title:"All"
contentItem:FluText{ contentItem:FluText{

22
example/page/MainPage.qml
View File

@ -26,12 +26,24 @@ FluWindow {
SystemTrayIcon { SystemTrayIcon {
visible: true visible: true
icon.source: "qrc:/res/image/favicon.ico" icon.source: "qrc:/res/image/favicon.ico"
tooltip: "FluentUI"
onActivated: { menu: Menu {
window.show() MenuItem {
window.raise() text: "退出"
window.requestActivate() onTriggered: {
window.destoryWindow()
FluApp.closeApp()
}
}
} }
onActivated:
(reason)=>{
if(reason === SystemTrayIcon.Trigger){
window.show()
window.raise()
window.requestActivate()
}
}
} }

4
src/FluApp.cpp
View File

@ -127,3 +127,7 @@ void FluApp::clipText(const QString& text){
QString FluApp::uuid(){ QString FluApp::uuid(){
return QUuid::createUuid().toString(); return QUuid::createUuid().toString();
} }
void FluApp::closeApp(){
qApp->exit(0);
}

2
src/FluApp.h
View File

@ -34,6 +34,8 @@ public:
Q_INVOKABLE QString uuid(); Q_INVOKABLE QString uuid();
Q_INVOKABLE void closeApp();
public: public:
QMap<quint64, QQuickWindow*> wnds; QMap<quint64, QQuickWindow*> wnds;
private: private:

115
src/NativeEventFilter.cpp
View File

@ -10,72 +10,67 @@ bool NativeEventFilter::nativeEventFilter(const QByteArray &eventType, void *mes
{ {
#ifdef Q_OS_WIN #ifdef Q_OS_WIN
if (eventType == "windows_generic_MSG" && FluTheme::getInstance()->frameless()) { if (eventType == "windows_generic_MSG" && FluTheme::getInstance()->frameless()) {
MSG* msg = static_cast<MSG *>(message); MSG* msg = static_cast<MSG *>(message);
if (msg == Q_NULLPTR) if (msg == Q_NULLPTR)
return false; return false;
switch(msg->message) { switch(msg->message) {
case WM_COMMAND: { case WM_NCCALCSIZE:{
SendMessage(msg->hwnd, WM_SYSCOMMAND, msg->wParam, msg->lParam); NCCALCSIZE_PARAMS& params = *reinterpret_cast<NCCALCSIZE_PARAMS*>(msg->lParam);
*result = DefWindowProc(msg->hwnd, msg->message, msg->wParam, msg->lParam); if (params.rgrc[0].top != 0)
return true; params.rgrc[0].top -= 1;
} *result = WVR_REDRAW;
case WM_NCCALCSIZE:{ return true;
NCCALCSIZE_PARAMS& params = *reinterpret_cast<NCCALCSIZE_PARAMS*>(msg->lParam); }
if (params.rgrc[0].top != 0) case WM_NCHITTEST: {
params.rgrc[0].top -= 1; auto view = FluApp::getInstance()->wnds[(WId)msg->hwnd];
*result = WVR_REDRAW; bool isResize = !(view->maximumWidth()==view->minimumWidth()&&view->maximumHeight()==view->minimumHeight());
const LONG borderWidth = 8;
RECT winrect;
GetWindowRect(msg->hwnd, &winrect);
long x = GET_X_LPARAM(msg->lParam);
long y = GET_Y_LPARAM(msg->lParam);
if (x >= winrect.left && x < winrect.left + borderWidth &&
y < winrect.bottom && y >= winrect.bottom - borderWidth && isResize) {
*result = HTBOTTOMLEFT;
return true; return true;
} }
case WM_NCHITTEST: { if (x < winrect.right && x >= winrect.right - borderWidth &&
auto view = FluApp::getInstance()->wnds[(WId)msg->hwnd];
bool isResize = !(view->maximumWidth()==view->minimumWidth()&&view->maximumHeight()==view->minimumHeight());
const LONG borderWidth = 8;
RECT winrect;
GetWindowRect(msg->hwnd, &winrect);
long x = GET_X_LPARAM(msg->lParam);
long y = GET_Y_LPARAM(msg->lParam);
if (x >= winrect.left && x < winrect.left + borderWidth &&
y < winrect.bottom && y >= winrect.bottom - borderWidth && isResize) { y < winrect.bottom && y >= winrect.bottom - borderWidth && isResize) {
*result = HTBOTTOMLEFT; *result = HTBOTTOMRIGHT;
return true; return true;
}
if (x < winrect.right && x >= winrect.right - borderWidth &&
y < winrect.bottom && y >= winrect.bottom - borderWidth && isResize) {
*result = HTBOTTOMRIGHT;
return true;
}
if (x >= winrect.left && x < winrect.left + borderWidth &&
y >= winrect.top && y < winrect.top + borderWidth && isResize) {
*result = HTTOPLEFT;
return true;
}
if (x < winrect.right && x >= winrect.right - borderWidth &&
y >= winrect.top && y < winrect.top + borderWidth && isResize) {
*result = HTTOPRIGHT;
return true;
}
if (x >= winrect.left && x < winrect.left + borderWidth && isResize) {
*result = HTLEFT;
return true;
}
if (x < winrect.right && x >= winrect.right - borderWidth && isResize) {
*result = HTRIGHT;
return true;
}
if (y < winrect.bottom && y >= winrect.bottom - borderWidth && isResize) {
*result = HTBOTTOM;
return true;
}
if (y >= winrect.top && y < winrect.top + borderWidth && isResize) {
*result = HTTOP;
return true;
}
return false;
} }
default: if (x >= winrect.left && x < winrect.left + borderWidth &&
break; y >= winrect.top && y < winrect.top + borderWidth && isResize) {
*result = HTTOPLEFT;
return true;
} }
if (x < winrect.right && x >= winrect.right - borderWidth &&
y >= winrect.top && y < winrect.top + borderWidth && isResize) {
*result = HTTOPRIGHT;
return true;
}
if (x >= winrect.left && x < winrect.left + borderWidth && isResize) {
*result = HTLEFT;
return true;
}
if (x < winrect.right && x >= winrect.right - borderWidth && isResize) {
*result = HTRIGHT;
return true;
}
if (y < winrect.bottom && y >= winrect.bottom - borderWidth && isResize) {
*result = HTBOTTOM;
return true;
}
if (y >= winrect.top && y < winrect.top + borderWidth && isResize) {
*result = HTTOP;
return true;
}
return false;
} }
default:
break;
}
}
#endif #endif
return false; return false;
} }

35
src/controls/FluCalendarPicker.qml
View File

@ -67,21 +67,26 @@ Rectangle {
modal: true modal: true
dim:false dim:false
enter: Transition { enter: Transition {
NumberAnimation { reversible: true
property: "y"
from:0
to:popup.y
duration: 150
}
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: 150 duration: 83
} }
} }
exit:Transition {
NumberAnimation {
property: "opacity"
from:1
to:0
duration: 83
}
}
contentItem: Item{ contentItem: Item{
anchors.fill: parent clip: true
FluCalendarView{ FluCalendarView{
id:container id:container
onDateClicked: onDateClicked:
@ -94,15 +99,19 @@ Rectangle {
} }
} }
} }
background: Item{} background: Item{
FluShadow{
radius: 5
}
}
function showPopup() { function showPopup() {
var pos = control.mapToItem(null, 0, 0) var pos = control.mapToItem(null, 0, 0)
if(window.height>pos.y+control.height+popup.height){ if(window.height>pos.y+control.height+container.height){
popup.y = control.height popup.y = control.height
} else if(pos.y>popup.height){ } else if(pos.y>container.height){
popup.y = -popup.height popup.y = -container.height
} else { } else {
popup.y = window.height-(pos.y+popup.height) popup.y = window.height-(pos.y+container.height)
} }
popup.x = -(popup.width-control.width)/2 popup.x = -(popup.width-control.width)/2
popup.open() popup.open()

34
src/controls/FluColorPicker.qml
View File

@ -33,34 +33,42 @@ FluControl{
height: container.height height: container.height
width: container.width width: container.width
contentItem: Item{ contentItem: Item{
anchors.fill: parent clip: true
FluColorView{ FluColorView{
id:container id:container
} }
} }
background:Item{} background:Item{
enter: Transition { FluShadow{
NumberAnimation { radius: 5
property: "y"
from:0
to:popup.y
duration: 150
} }
}
enter: Transition {
reversible: true
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: 150 duration: 83
}
}
exit:Transition {
NumberAnimation {
property: "opacity"
from:1
to:0
duration: 83
} }
} }
function showPopup() { function showPopup() {
var pos = control.mapToItem(null, 0, 0) var pos = control.mapToItem(null, 0, 0)
if(window.height>pos.y+control.height+popup.height){ if(window.height>pos.y+control.height+container.height){
popup.y = control.height popup.y = control.height
} else if(pos.y>popup.height){ } else if(pos.y>container.height){
popup.y = -popup.height popup.y = -container.height
} else { } else {
popup.y = window.height-(pos.y+popup.height) popup.y = window.height-(pos.y+container.height)
} }
popup.x = -(popup.width-control.width)/2 popup.x = -(popup.width-control.width)/2
popup.open() popup.open()

414
src/controls/FluDatePicker.qml
View File

@ -100,240 +100,252 @@ Rectangle {
Menu{ Menu{
id:popup id:popup
modal: true modal: true
width: 300 width: container.width
height: 340 height: container.height
dim:false dim:false
enter: Transition { enter: Transition {
NumberAnimation { reversible: true
property: "y"
from:0
to:popup.y
duration: 150
}
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: 150 duration: 83
} }
} }
background:Item{}
contentItem: Rectangle{ exit:Transition {
id:container NumberAnimation {
radius: 4 property: "opacity"
anchors.fill: parent from:1
color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) to:0
MouseArea{ duration: 83
anchors.fill: parent
} }
}
background:Item{
FluShadow{ FluShadow{
radius: 4 radius: 4
} }
}
contentItem: Item{
clip: true
Rectangle{
id:container
radius: 4
width: 300
height: 340
color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
MouseArea{
anchors.fill: parent
}
FluShadow{
radius: 4
}
RowLayout{ RowLayout{
id:layout_content id:layout_content
spacing: 0 spacing: 0
width: parent.width width: parent.width
height: 300 height: 300
Component{ Component{
id:list_delegate id:list_delegate
Item{ Item{
height:38 height:38
width:getListView().width width:getListView().width
function getListView(){ function getListView(){
if(type === 0) if(type === 0)
return list_view_1 return list_view_1
if(type === 1) if(type === 1)
return list_view_2 return list_view_2
if(type === 2) if(type === 2)
return list_view_3 return list_view_3
}
Rectangle{
anchors.fill: parent
anchors.topMargin: 2
anchors.bottomMargin: 2
anchors.leftMargin: 5
anchors.rightMargin: 5
color: {
if(getListView().currentIndex === position){
if(FluTheme.dark){
return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter
}else{
return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark
}
}
if(item_mouse.containsMouse){
return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
}
return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
} }
radius: 3
MouseArea{
id:item_mouse Rectangle{
anchors.fill: parent anchors.fill: parent
hoverEnabled: true anchors.topMargin: 2
onClicked: { anchors.bottomMargin: 2
getListView().currentIndex = position anchors.leftMargin: 5
if(type === 0){ anchors.rightMargin: 5
text_year.text = model color: {
list_view_2.model = generateMonthArray(1,12)
text_month.text = list_view_2.model[list_view_2.currentIndex]
list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex])
text_day.text = list_view_3.model[list_view_3.currentIndex]
}
if(type === 1){
text_month.text = model
list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex])
text_day.text = list_view_3.model[list_view_3.currentIndex]
}
if(type === 2){
text_day.text = model
}
}
}
FluText{
text:model
color: {
if(getListView().currentIndex === position){ if(getListView().currentIndex === position){
if(FluTheme.dark){ if(FluTheme.dark){
return Qt.rgba(0,0,0,1) return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter
}else{ }else{
return Qt.rgba(1,1,1,1) return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark
}
}
if(item_mouse.containsMouse){
return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
}
return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
}
radius: 3
MouseArea{
id:item_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
getListView().currentIndex = position
if(type === 0){
text_year.text = model
list_view_2.model = generateMonthArray(1,12)
text_month.text = list_view_2.model[list_view_2.currentIndex]
list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex])
text_day.text = list_view_3.model[list_view_3.currentIndex]
}
if(type === 1){
text_month.text = model
list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex])
text_day.text = list_view_3.model[list_view_3.currentIndex]
}
if(type === 2){
text_day.text = model
} }
}else{
return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
} }
} }
anchors.centerIn: parent FluText{
text:model
color: {
if(getListView().currentIndex === position){
if(FluTheme.dark){
return Qt.rgba(0,0,0,1)
}else{
return Qt.rgba(1,1,1,1)
}
}else{
return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
}
}
anchors.centerIn: parent
}
} }
} }
} }
ListView{
id:list_view_1
width: 100
height: parent.height
boundsBehavior:Flickable.StopAtBounds
ScrollBar.vertical: FluScrollBar {}
model: generateYearArray(1924,2048)
clip: true
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
visible: showYear
delegate: Loader{
property var model: modelData
property int type:0
property int position:index
sourceComponent: list_delegate
}
}
Rectangle{
width: 1
height: parent.height
color: dividerColor
}
ListView{
id:list_view_2
width: showYear ? 100 : 150
height: parent.height
clip: true
ScrollBar.vertical: FluScrollBar {}
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
boundsBehavior:Flickable.StopAtBounds
delegate: Loader{
property var model: modelData
property int type:1
property int position:index
sourceComponent: list_delegate
}
}
Rectangle{
width: 1
height: parent.height
color: dividerColor
}
ListView{
id:list_view_3
width: showYear ? 100 : 150
height: parent.height
clip: true
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
ScrollBar.vertical: FluScrollBar {}
Layout.alignment: Qt.AlignVCenter
boundsBehavior:Flickable.StopAtBounds
delegate: Loader{
property var model: modelData
property int type:2
property int position:index
sourceComponent: list_delegate
}
}
} }
ListView{
id:list_view_1
width: 100
height: parent.height
boundsBehavior:Flickable.StopAtBounds
ScrollBar.vertical: FluScrollBar {}
model: generateYearArray(1924,2048)
clip: true
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
visible: showYear
delegate: Loader{
property var model: modelData
property int type:0
property int position:index
sourceComponent: list_delegate
}
}
Rectangle{ Rectangle{
width: 1 width: parent.width
height: parent.height height: 1
anchors.top: layout_content.bottom
color: dividerColor color: dividerColor
} }
ListView{
id:list_view_2
width: showYear ? 100 : 150
height: parent.height
clip: true
ScrollBar.vertical: FluScrollBar {}
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
boundsBehavior:Flickable.StopAtBounds
delegate: Loader{
property var model: modelData
property int type:1
property int position:index
sourceComponent: list_delegate
}
}
Rectangle{ Rectangle{
width: 1 id:layout_actions
height: parent.height height: 40
color: dividerColor radius: 5
} color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
ListView{
id:list_view_3
width: showYear ? 100 : 150
height: parent.height
clip: true
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
ScrollBar.vertical: FluScrollBar {}
Layout.alignment: Qt.AlignVCenter
boundsBehavior:Flickable.StopAtBounds
delegate: Loader{
property var model: modelData
property int type:2
property int position:index
sourceComponent: list_delegate
}
}
}
Rectangle{
width: parent.width
height: 1
anchors.top: layout_content.bottom
color: dividerColor
}
Rectangle{
id:layout_actions
height: 40
radius: 5
color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
anchors{
bottom:parent.bottom
left: parent.left
right: parent.right
}
Item {
id:divider
width: 1
height: parent.height
anchors.centerIn: parent
}
FluButton{
anchors{ anchors{
bottom:parent.bottom
left: parent.left left: parent.left
leftMargin: 20
rightMargin: 10
right: divider.left
verticalCenter: parent.verticalCenter
}
text: "取消"
onClicked: {
popup.close()
}
}
FluFilledButton{
anchors{
right: parent.right right: parent.right
left: divider.right
rightMargin: 20
leftMargin: 10
verticalCenter: parent.verticalCenter
} }
text: "确定"
onClicked: { Item {
changeFlag = false id:divider
popup.close() width: 1
height: parent.height
anchors.centerIn: parent
}
FluButton{
anchors{
left: parent.left
leftMargin: 20
rightMargin: 10
right: divider.left
verticalCenter: parent.verticalCenter
}
text: "取消"
onClicked: {
popup.close()
}
}
FluFilledButton{
anchors{
right: parent.right
left: divider.right
rightMargin: 20
leftMargin: 10
verticalCenter: parent.verticalCenter
}
text: "确定"
onClicked: {
changeFlag = false
popup.close()
}
} }
} }
} }
@ -362,12 +374,12 @@ Rectangle {
text_day.text = day text_day.text = day
var pos = root.mapToItem(null, 0, 0) var pos = root.mapToItem(null, 0, 0)
if(window.height>pos.y+root.height+popup.height){ if(window.height>pos.y+root.height+container.height){
popup.y = root.height popup.y = root.height
} else if(pos.y>popup.height){ } else if(pos.y>container.height){
popup.y = -popup.height popup.y = -container.height
} else { } else {
popup.y = window.height-(pos.y+popup.height) popup.y = window.height-(pos.y+container.height)
} }
popup.open() popup.open()
} }

9
src/controls/FluDropDownButton.qml
View File

@ -76,12 +76,13 @@ FluControl {
onClicked: { onClicked: {
var pos = control.mapToItem(null, 0, 0) var pos = control.mapToItem(null, 0, 0)
if(window.height>pos.y+control.height+menu.height){ var containerHeight = menu.getContainerHeight()
if(window.height>pos.y+control.height+containerHeight){
menu.y = control.height menu.y = control.height
}else if(pos.y>menu.height){ }else if(pos.y>containerHeight){
menu.y = -menu.height menu.y = -containerHeight
}else{ }else{
menu.y = window.height-(pos.y+menu.height) menu.y = window.height-(pos.y+containerHeight)
} }
menu.open() menu.open()
} }

4
src/controls/FluExpander.qml
View File

@ -84,7 +84,9 @@ Item {
height: expand ? contentHeight : 0 height: expand ? contentHeight : 0
Behavior on height { Behavior on height {
NumberAnimation{ NumberAnimation{
duration: 150 duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: expand ? [ 0, 0, 0, 1 ] : [ 1, 0, 0, 0 ]
} }
} }
} }

36
src/controls/FluMenu.qml
View File

@ -12,38 +12,50 @@ Menu {
modal:true modal:true
dim:false dim:false
enter: Transition { enter: Transition {
NumberAnimation { reversible: true
property: "y"
from:0
to:popup.y
duration: animEnabled ? 150 : 0
}
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: animEnabled ? 150 : 0 duration: 83
}
}
exit:Transition {
NumberAnimation {
property: "opacity"
from:1
to:0
duration: 83
}
}
background:Item{
FluShadow{
radius: 5
} }
} }
background:Item{}
contentItem: Item { contentItem: Item {
clip: true
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97) color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
radius: 5 radius: 5
} }
FluShadow{
radius: 5
}
Column{ Column{
id:container
spacing: 5 spacing: 5
topPadding: 5 topPadding: 5
bottomPadding: 5 bottomPadding: 5
width: popup.width width: popup.width
id:container
function closePopup(){ function closePopup(){
popup.close() popup.close()
} }
} }
} }
function getContainerHeight(){
return container.height
}
} }

56
src/controls/FluNavigationView.qml
View File

@ -120,7 +120,9 @@ Item {
} }
Behavior on height { Behavior on height {
NumberAnimation{ NumberAnimation{
duration: 150 duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: [ 0, 0, 0, 1 ]
} }
} }
} }
@ -137,7 +139,9 @@ Item {
} }
Behavior on height { Behavior on height {
NumberAnimation{ NumberAnimation{
duration: 150 duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: [ 0, 0, 0, 1 ]
} }
} }
width: layout_list.width width: layout_list.width
@ -206,12 +210,12 @@ Item {
visible:opacity visible:opacity
Behavior on opacity { Behavior on opacity {
NumberAnimation{ NumberAnimation{
duration: 220 duration: 83
} }
} }
Behavior on rotation { Behavior on rotation {
NumberAnimation{ NumberAnimation{
duration: 150 duration: 83
} }
} }
} }
@ -290,7 +294,7 @@ Item {
visible:opacity visible:opacity
Behavior on opacity { Behavior on opacity {
NumberAnimation{ NumberAnimation{
duration: 220 duration: 83
} }
} }
anchors{ anchors{
@ -313,7 +317,9 @@ Item {
Item{ Item{
Behavior on height { Behavior on height {
NumberAnimation{ NumberAnimation{
duration: 150 duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: [ 0, 0, 0, 1 ]
} }
} }
clip: true clip: true
@ -442,7 +448,7 @@ Item {
visible:opacity visible:opacity
Behavior on opacity { Behavior on opacity {
NumberAnimation{ NumberAnimation{
duration: 220 duration: 83
} }
} }
color:{ color:{
@ -504,7 +510,9 @@ Item {
} }
Behavior on Layout.preferredWidth{ Behavior on Layout.preferredWidth{
NumberAnimation{ NumberAnimation{
duration: 220 duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: [ 0, 0, 0, 1 ]
} }
} }
} }
@ -544,10 +552,24 @@ Item {
clip: true clip: true
popEnter : Transition{} popEnter : Transition{}
popExit : Transition { popExit : Transition {
NumberAnimation { properties: "y"; from: 0; to: nav_swipe.height; duration: 200 } NumberAnimation {
properties: "y"
from: 0
to: nav_swipe.height
duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: [ 1, 0, 0, 0 ]
}
} }
pushEnter: Transition { pushEnter: Transition {
NumberAnimation { properties: "y"; from: nav_swipe.height; to: 0; duration: 200 } NumberAnimation {
properties: "y";
from: nav_swipe.height;
to: 0
duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: [ 0, 0, 0, 1 ]
}
} }
pushExit : Transition{} pushExit : Transition{}
replaceEnter : Transition{} replaceEnter : Transition{}
@ -573,13 +595,17 @@ Item {
} }
Behavior on width{ Behavior on width{
NumberAnimation{ NumberAnimation{
duration: 150 duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: [ 0, 0, 0, 1 ]
} }
} }
Behavior on x{ Behavior on x{
id:anim_layout_list_x id:anim_layout_list_x
NumberAnimation{ NumberAnimation{
duration: 150 duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: [ 0, 0, 0, 1 ]
} }
} }
anchors{ anchors{
@ -626,7 +652,7 @@ Item {
visible: opacity visible: opacity
Behavior on opacity{ Behavior on opacity{
NumberAnimation{ NumberAnimation{
duration: 100 duration: 83
} }
} }
} }
@ -636,7 +662,7 @@ Item {
opacity:d.isCompactAndNotPanel opacity:d.isCompactAndNotPanel
Behavior on opacity{ Behavior on opacity{
NumberAnimation{ NumberAnimation{
duration: 220 duration: 83
} }
} }
hoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03) hoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
@ -774,7 +800,7 @@ Item {
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: 150 duration: 83
} }
} }
background: Rectangle{ background: Rectangle{

1
src/controls/FluPivot.qml
View File

@ -7,6 +7,7 @@ Item {
id:control id:control
default property alias content: d.children default property alias content: d.children
property alias currentIndex: nav_list.currentIndex
property color normalColor: FluTheme.dark ? FluColors.Grey120 : FluColors.Grey120 property color normalColor: FluTheme.dark ? FluColors.Grey120 : FluColors.Grey120
property color hoverColor: FluTheme.dark ? FluColors.Grey10 : FluColors.Black property color hoverColor: FluTheme.dark ? FluColors.Grey10 : FluColors.Black

406
src/controls/FluTimePicker.qml
View File

@ -99,243 +99,249 @@ Rectangle {
text:"AM/PM" text:"AM/PM"
} }
Popup{ Menu{
id:popup id:popup
width: 300 width: container.width
height: 340 height: container.height
modal: true modal: true
dim:false dim:false
enter: Transition { enter: Transition {
reversible: true
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
from:0 from:0
to:1 to:1
duration: 150 duration: 83
}
NumberAnimation {
property: "y"
from:0
to:popup.y
duration: 150
} }
} }
background:Item{}
contentItem: Rectangle{ exit:Transition {
id:container NumberAnimation {
anchors.fill: parent property: "opacity"
radius: 4 from:1
color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) to:0
MouseArea{ duration: 83
anchors.fill: parent
} }
}
background:Item{
FluShadow{ FluShadow{
radius: 4 radius: 4
} }
}
contentItem: Item{
clip: true
Rectangle{
id:container
height: 340
width: 300
radius: 4
color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
MouseArea{
anchors.fill: parent
}
RowLayout{
id:layout_content
spacing: 0
width: parent.width
height: 300
RowLayout{ Component{
id:layout_content id:list_delegate
spacing: 0
width: parent.width
height: 300
Component{ Item{
id:list_delegate height:38
width:getListView().width
Item{ function getListView(){
height:38 if(type === 0)
width:getListView().width return list_view_1
if(type === 1)
function getListView(){ return list_view_2
if(type === 0) if(type === 2)
return list_view_1 return list_view_3
if(type === 1)
return list_view_2
if(type === 2)
return list_view_3
}
Rectangle{
anchors.fill: parent
anchors.topMargin: 2
anchors.bottomMargin: 2
anchors.leftMargin: 5
anchors.rightMargin: 5
color: {
if(getListView().currentIndex === position){
if(FluTheme.dark){
return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter
}else{
return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark
}
}
if(item_mouse.containsMouse){
return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
}
return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
} }
radius: 3
MouseArea{
id:item_mouse Rectangle{
anchors.fill: parent anchors.fill: parent
hoverEnabled: true anchors.topMargin: 2
onClicked: { anchors.bottomMargin: 2
getListView().currentIndex = position anchors.leftMargin: 5
if(type === 0){ anchors.rightMargin: 5
text_hour.text = model color: {
}
if(type === 1){
text_minute.text = model
}
if(type === 2){
text_ampm.text = model
}
}
}
FluText{
text:model
color: {
if(getListView().currentIndex === position){ if(getListView().currentIndex === position){
if(FluTheme.dark){ if(FluTheme.dark){
return Qt.rgba(0,0,0,1) return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter
}else{ }else{
return Qt.rgba(1,1,1,1) return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark
}
}
if(item_mouse.containsMouse){
return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
}
return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
}
radius: 3
MouseArea{
id:item_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
getListView().currentIndex = position
if(type === 0){
text_hour.text = model
}
if(type === 1){
text_minute.text = model
}
if(type === 2){
text_ampm.text = model
} }
}else{
return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
} }
} }
anchors.centerIn: parent FluText{
text:model
color: {
if(getListView().currentIndex === position){
if(FluTheme.dark){
return Qt.rgba(0,0,0,1)
}else{
return Qt.rgba(1,1,1,1)
}
}else{
return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
}
}
anchors.centerIn: parent
}
} }
} }
} }
ListView{
id:list_view_1
width: isH ? 100 : 150
height: parent.height
boundsBehavior:Flickable.StopAtBounds
ScrollBar.vertical: FluScrollBar {}
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
model: isH ? generateArray(1,12) : generateArray(0,23)
clip: true
delegate: Loader{
property var model: modelData
property int type:0
property int position:index
sourceComponent: list_delegate
}
}
Rectangle{
width: 1
height: parent.height
color: dividerColor
}
ListView{
id:list_view_2
width: isH ? 100 : 150
height: parent.height
model: generateArray(0,59)
clip: true
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
ScrollBar.vertical: FluScrollBar {}
boundsBehavior:Flickable.StopAtBounds
delegate: Loader{
property var model: modelData
property int type:1
property int position:index
sourceComponent: list_delegate
}
}
Rectangle{
width: 1
height: parent.height
color: dividerColor
visible: isH
}
ListView{
id:list_view_3
width: 100
height: 76
model: ["上午","下午"]
clip: true
visible: isH
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
ScrollBar.vertical: FluScrollBar {}
Layout.alignment: Qt.AlignVCenter
boundsBehavior:Flickable.StopAtBounds
delegate: Loader{
property var model: modelData
property int type:2
property int position:index
sourceComponent: list_delegate
}
}
} }
ListView{
id:list_view_1
width: isH ? 100 : 150
height: parent.height
boundsBehavior:Flickable.StopAtBounds
ScrollBar.vertical: FluScrollBar {}
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
model: isH ? generateArray(1,12) : generateArray(0,23)
clip: true
delegate: Loader{
property var model: modelData
property int type:0
property int position:index
sourceComponent: list_delegate
}
}
Rectangle{ Rectangle{
width: 1 width: parent.width
height: parent.height height: 1
anchors.top: layout_content.bottom
color: dividerColor color: dividerColor
} }
ListView{
id:list_view_2
width: isH ? 100 : 150
height: parent.height
model: generateArray(0,59)
clip: true
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
ScrollBar.vertical: FluScrollBar {}
boundsBehavior:Flickable.StopAtBounds
delegate: Loader{
property var model: modelData
property int type:1
property int position:index
sourceComponent: list_delegate
}
}
Rectangle{ Rectangle{
width: 1 id:layout_actions
height: parent.height height: 40
color: dividerColor radius: 5
visible: isH color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
}
ListView{
id:list_view_3
width: 100
height: 76
model: ["上午","下午"]
clip: true
visible: isH
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
ScrollBar.vertical: FluScrollBar {}
Layout.alignment: Qt.AlignVCenter
boundsBehavior:Flickable.StopAtBounds
delegate: Loader{
property var model: modelData
property int type:2
property int position:index
sourceComponent: list_delegate
}
}
}
Rectangle{
width: parent.width
height: 1
anchors.top: layout_content.bottom
color: dividerColor
}
Rectangle{
id:layout_actions
height: 40
radius: 5
color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
anchors{
bottom:parent.bottom
left: parent.left
right: parent.right
}
Item {
id:divider
width: 1
height: parent.height
anchors.centerIn: parent
}
FluButton{
anchors{ anchors{
bottom:parent.bottom
left: parent.left left: parent.left
leftMargin: 20
rightMargin: 10
right: divider.left
verticalCenter: parent.verticalCenter
}
text: "取消"
onClicked: {
popup.close()
}
}
FluFilledButton{
anchors{
right: parent.right right: parent.right
left: divider.right
rightMargin: 20
leftMargin: 10
verticalCenter: parent.verticalCenter
} }
text: "确定"
onClicked: { Item {
changeFlag = false id:divider
popup.close() width: 1
height: parent.height
anchors.centerIn: parent
}
FluButton{
anchors{
left: parent.left
leftMargin: 20
rightMargin: 10
right: divider.left
verticalCenter: parent.verticalCenter
}
text: "取消"
onClicked: {
popup.close()
}
}
FluFilledButton{
anchors{
right: parent.right
left: divider.right
rightMargin: 20
leftMargin: 10
verticalCenter: parent.verticalCenter
}
text: "确定"
onClicked: {
changeFlag = false
popup.close()
}
} }
} }
} }
} }
y:35 y:35
function showPopup() { function showPopup() {
@ -373,12 +379,12 @@ Rectangle {
} }
var pos = root.mapToItem(null, 0, 0) var pos = root.mapToItem(null, 0, 0)
if(window.height>pos.y+root.height+popup.height){ if(window.height>pos.y+root.height+container.height){
popup.y = root.height popup.y = root.height
} else if(pos.y>popup.height){ } else if(pos.y>container.height){
popup.y = -popup.height popup.y = -container.height
} else { } else {
popup.y = window.height-(pos.y+popup.height) popup.y = window.height-(pos.y+container.height)
} }
popup.open() popup.open()
} }

24
src/controls/FluToggleSwitch.qml
View File

@ -72,16 +72,32 @@ FluControl {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: selected ? "#FFFFFF" : "#666666" color: selected ? "#FFFFFF" : "#666666"
Behavior on anchors.leftMargin { Behavior on anchors.leftMargin {
NumberAnimation { duration: 150 } NumberAnimation {
duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: [ 1, 0, 0, 0 ]
}
} }
Behavior on anchors.rightMargin { Behavior on anchors.rightMargin {
NumberAnimation { duration: 150 } NumberAnimation {
duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: [ 1, 0, 0, 0 ]
}
} }
Behavior on width { Behavior on width {
NumberAnimation { duration: 150 } NumberAnimation {
duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: [ 1, 0, 0, 0 ]
}
} }
Behavior on scale { Behavior on scale {
NumberAnimation { duration: 150 } NumberAnimation {
duration: 167
easing.type: Easing.Bezier
easing.bezierCurve: [ 1, 0, 0, 0 ]
}
} }
} }
} }

6
src/controls/FluWindow.qml
View File

@ -51,7 +51,7 @@ ApplicationWindow {
onClosing: onClosing:
(event)=>{ (event)=>{
if(closeDestory){ if(closeDestory){
helper.destoryWindow() destoryWindow()
}else{ }else{
visible = false visible = false
event.accepted = false event.accepted = false
@ -94,6 +94,10 @@ ApplicationWindow {
return helper.createRegister(window,path) return helper.createRegister(window,path)
} }
function destoryWindow(){
helper.destoryWindow()
}
function onResult(data){ function onResult(data){
if(pageRegister){ if(pageRegister){
pageRegister.onResult(data) pageRegister.onResult(data)