diff --git a/example/MainPage.qml b/example/MainPage.qml index 6217828..82e3ce5 100644 --- a/example/MainPage.qml +++ b/example/MainPage.qml @@ -21,51 +21,51 @@ FluWindow { showFps: true } - Item{ - id:data - - ListModel{ - id:nav_items - ListElement{ - text:"Buttons" - page:"qrc:/T_Buttons.qml" - } - ListElement{ - text:"TextBox" - page:"qrc:/T_TextBox.qml" - } - ListElement{ - text:"ToggleSwitch" - page:"qrc:/T_ToggleSwitch.qml" - } - ListElement{ - text:"Slider" - page:"qrc:/T_Slider.qml" - } - ListElement{ - text:"InfoBar" - page:"qrc:/T_InfoBar.qml" - } - ListElement{ - text:"Progress" - page:"qrc:/T_Progress.qml" - } - ListElement{ - text:"Rectangle" - page:"qrc:/T_Rectangle.qml" - } - ListElement{ - text:"Theme" - page:"qrc:/T_Theme.qml" - } - ListElement{ - text:"Awesome" - page:"qrc:/T_Awesome.qml" - } - ListElement{ - text:"Typography" - page:"qrc:/T_Typography.qml" - } + ListModel{ + id:nav_items + ListElement{ + text:"Buttons" + page:"qrc:/T_Buttons.qml" + } + ListElement{ + text:"TextBox" + page:"qrc:/T_TextBox.qml" + } + ListElement{ + text:"ToggleSwitch" + page:"qrc:/T_ToggleSwitch.qml" + } + ListElement{ + text:"Slider" + page:"qrc:/T_Slider.qml" + } + ListElement{ + text:"InfoBar" + page:"qrc:/T_InfoBar.qml" + } + ListElement{ + text:"Dialog" + page:"qrc:/T_Dialog.qml" + } + ListElement{ + text:"Progress" + page:"qrc:/T_Progress.qml" + } + ListElement{ + text:"Rectangle" + page:"qrc:/T_Rectangle.qml" + } + ListElement{ + text:"Theme" + page:"qrc:/T_Theme.qml" + } + ListElement{ + text:"Awesome" + page:"qrc:/T_Awesome.qml" + } + ListElement{ + text:"Typography" + page:"qrc:/T_Typography.qml" } } @@ -123,25 +123,6 @@ FluWindow { Rectangle{ - color: { - if(FluTheme.isDark){ - if(item_mouse.containsMouse){ - return "#292929" - } - if(nav_list.currentIndex === index){ - return "#2D2D2D" - } - return "#00000000" - }else{ - if(item_mouse.containsMouse){ - return "#EDEDED" - } - if(nav_list.currentIndex === index){ - return "#EAEAEA" - } - return "#00000000" - } - } radius: 4 anchors{ top: parent.top @@ -153,8 +134,6 @@ FluWindow { leftMargin: 6 rightMargin: 6 } - - MouseArea{ id:item_mouse hoverEnabled: true @@ -163,6 +142,25 @@ FluWindow { nav_list.currentIndex = index } } + color: { + if(FluTheme.isDark){ + if(nav_list.currentIndex === index){ + return "#2D2D2D" + } + if(item_mouse.containsMouse){ + return "#292929" + } + return "#202020" + }else{ + if(nav_list.currentIndex === index){ + return "#EAEAEA" + } + if(item_mouse.containsMouse){ + return "#EDEDED" + } + return "#F3f3f3" + } + } FluText{ text:model.text @@ -171,8 +169,6 @@ FluWindow { } } - - } } diff --git a/example/T_Awesome.qml b/example/T_Awesome.qml index cf6335c..2490cc6 100644 --- a/example/T_Awesome.qml +++ b/example/T_Awesome.qml @@ -5,13 +5,11 @@ import QtQuick.Window 2.15 import FluentUI 1.0 Item { - FluText{ id:title text:"Awesome" fontStyle: FluText.TitleLarge } - FluTextBox{ id:text_box placeholderText: "请输入关键字" @@ -20,7 +18,6 @@ Item { top:title.bottom } } - FluFilledButton{ text:"搜索" anchors{ @@ -32,7 +29,6 @@ Item { grid_view.model = FluApp.awesomelist(text_box.text) } } - GridView{ id:grid_view cellWidth: 120 @@ -48,10 +44,8 @@ Item { bottom: parent.bottom } delegate: Item { - width: 120 height: 60 - FluIconButton{ id:item_icon icon:modelData.icon @@ -62,7 +56,6 @@ Item { showSuccess("您复制了 "+text) } } - FluText { id:item_name font.pixelSize: 10; @@ -70,10 +63,6 @@ Item { anchors.top: item_icon.bottom text: modelData.name } - } - - - } } diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml index e600290..bdc0f7e 100644 --- a/example/T_Buttons.qml +++ b/example/T_Buttons.qml @@ -1,141 +1,132 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Window 2.15 +import QtQuick.Controls 2.15 import QtGraphicalEffects 1.15 import FluentUI 1.0 Item { - width: parent.width - - - ColumnLayout{ - spacing: 5 - + FluText{ + id:title + text:"Buttons" + fontStyle: FluText.TitleLarge + } + ScrollView{ + clip: true width: parent.width - - FluText{ - text:"Buttons" - fontStyle: FluText.TitleLarge + contentWidth: parent.width + anchors{ + top: title.bottom + bottom: parent.bottom } - - - RowLayout{ - Layout.topMargin: 20 + ColumnLayout{ + spacing: 5 width: parent.width - FluButton{ - disabled:button_switch.checked - onClicked: { - showInfo("点击StandardButton") + RowLayout{ + Layout.topMargin: 20 + width: parent.width + FluButton{ + disabled:button_switch.checked + onClicked: { + showInfo("点击StandardButton") + } + } + Item{ + height: 1 + Layout.fillWidth: true + } + FluToggleSwitch{ + id:button_switch + Layout.alignment: Qt.AlignRight + } + FluText{ + text:"Disabled" } } - Item{ - height: 1 - Layout.fillWidth: true + FluDivider{ + Layout.fillWidth: true ; height:1; } - FluToggleSwitch{ - id:button_switch - Layout.alignment: Qt.AlignRight - } - FluText{ - text:"Disabled" - } - } - - FluDivider{ - Layout.fillWidth: true ; height:1; - } - - - RowLayout{ - Layout.topMargin: 20 - width: parent.width - FluFilledButton{ - disabled:filled_button_switch.checked - onClicked:{ - showWarning("点击FilledButton") + RowLayout{ + Layout.topMargin: 20 + width: parent.width + FluFilledButton{ + disabled:filled_button_switch.checked + onClicked:{ + showWarning("点击FilledButton") + } + } + Item{ + height: 1 + Layout.fillWidth: true + } + FluToggleSwitch{ + id:filled_button_switch + Layout.alignment: Qt.AlignRight + } + FluText{ + text:"Disabled" } } - Item{ - height: 1 - Layout.fillWidth: true + FluDivider{ + Layout.fillWidth: true ; height:1 } - FluToggleSwitch{ - id:filled_button_switch - Layout.alignment: Qt.AlignRight - } - FluText{ - text:"Disabled" - } - } - - - - FluDivider{ - Layout.fillWidth: true ; height:1 - } - - - RowLayout{ - Layout.topMargin: 20 - width: parent.width - FluIconButton{ - icon:FluentIcons.FA_close - disabled:icon_button_switch.checked - onClicked:{ - showSuccess("点击IconButton") + RowLayout{ + Layout.topMargin: 20 + width: parent.width + FluIconButton{ + icon:FluentIcons.FA_close + disabled:icon_button_switch.checked + onClicked:{ + showSuccess("点击IconButton") + } + } + Item{ + height: 1 + Layout.fillWidth: true + } + FluToggleSwitch{ + id:icon_button_switch + Layout.alignment: Qt.AlignRight + } + FluText{ + text:"Disabled" } } - Item{ - height: 1 - Layout.fillWidth: true + FluDivider{ + Layout.fillWidth: true ; height:1 } - FluToggleSwitch{ - id:icon_button_switch - Layout.alignment: Qt.AlignRight - } - FluText{ - text:"Disabled" - } - } - - - FluDivider{ - Layout.fillWidth: true ; height:1 - } - - RowLayout{ - Layout.topMargin: 20 - width: parent.width - ColumnLayout{ - spacing: 8 - - Repeater{ - id:repeater - property int selecIndex : 0 - model: 3 - delegate: FluRadioButton{ - checked : repeater.selecIndex===index - disabled:radio_button_switch.checked - text:"RodioButton_"+index - onClicked:{ - repeater.selecIndex = index + RowLayout{ + Layout.topMargin: 20 + width: parent.width + ColumnLayout{ + spacing: 8 + Repeater{ + id:repeater + property int selecIndex : 0 + model: 3 + delegate: FluRadioButton{ + checked : repeater.selecIndex===index + disabled:radio_button_switch.checked + text:"RodioButton_"+index + onClicked:{ + repeater.selecIndex = index + } } } } - } - Item{ - height: 1 - Layout.fillWidth: true - } - FluToggleSwitch{ - id:radio_button_switch - Layout.alignment: Qt.AlignRight - } - FluText{ - text:"Disabled" + Item{ + height: 1 + Layout.fillWidth: true + } + FluToggleSwitch{ + id:radio_button_switch + Layout.alignment: Qt.AlignRight + } + FluText{ + text:"Disabled" + } } } } - } diff --git a/example/T_Dialog.qml b/example/T_Dialog.qml new file mode 100644 index 0000000..9881e07 --- /dev/null +++ b/example/T_Dialog.qml @@ -0,0 +1,33 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Window 2.15 +import QtQuick.Controls 2.15 +import QtGraphicalEffects 1.15 +import FluentUI 1.0 + +Item { + FluText{ + id:title + text:"Dialog" + fontStyle: FluText.TitleLarge + } + ScrollView{ + clip: true + width: parent.width + contentWidth: parent.width + anchors{ + top: title.bottom + bottom: parent.bottom + } + ColumnLayout{ + spacing: 5 + FluButton{ + Layout.topMargin: 20 + text:"Show Dialog" + onClicked: { + + } + } + } + } +} diff --git a/example/T_InfoBar.qml b/example/T_InfoBar.qml index ec599d3..5190494 100644 --- a/example/T_InfoBar.qml +++ b/example/T_InfoBar.qml @@ -1,54 +1,55 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Window 2.15 +import QtQuick.Controls 2.15 import QtGraphicalEffects 1.15 import FluentUI 1.0 Item { - - ColumnLayout{ - spacing: 5 - - - FluText{ - text:"InfoBar" - fontStyle: FluText.TitleLarge - } - - FluButton{ - text:"Info" - Layout.topMargin: 20 - onClicked: { - showInfo("这是一个Info样式的InfoBar") - } - } - - FluButton{ - text:"Warning" - Layout.topMargin: 20 - onClicked: { - showWarning("这是一个Warning样式的InfoBar") - } - } - - FluButton{ - text:"Error" - Layout.topMargin: 20 - onClicked: { - showError("这是一个Error样式的InfoBar") - } - } - - FluButton{ - text:"Success" - Layout.topMargin: 20 - onClicked: { - showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar") - } - } - - - + FluText{ + id:title + text:"InfoBar" + fontStyle: FluText.TitleLarge } + ScrollView{ + clip: true + width: parent.width + contentWidth: parent.width + anchors{ + top: title.bottom + bottom: parent.bottom + } + ColumnLayout{ + spacing: 5 + FluButton{ + text:"Info" + Layout.topMargin: 20 + onClicked: { + showInfo("这是一个Info样式的InfoBar") + } + } + FluButton{ + text:"Warning" + Layout.topMargin: 20 + onClicked: { + showWarning("这是一个Warning样式的InfoBar") + } + } + FluButton{ + text:"Error" + Layout.topMargin: 20 + onClicked: { + showError("这是一个Error样式的InfoBar") + } + } + FluButton{ + text:"Success" + Layout.topMargin: 20 + onClicked: { + showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar") + } + } + } + } } diff --git a/example/T_Progress.qml b/example/T_Progress.qml index fe6e42e..2718d96 100644 --- a/example/T_Progress.qml +++ b/example/T_Progress.qml @@ -1,41 +1,49 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Window 2.15 +import QtQuick.Controls 2.15 import QtGraphicalEffects 1.15 import FluentUI 1.0 Item { - - ColumnLayout{ - spacing: 5 - - FluText{ - text:"Progress" - fontStyle: FluText.TitleLarge + FluText{ + id:title + text:"Progress" + fontStyle: FluText.TitleLarge + } + ScrollView{ + clip: true + width: parent.width + contentWidth: parent.width + anchors{ + top: title.bottom + bottom: parent.bottom } - FluProgressBar{ - Layout.topMargin: 20 - } - FluProgressRing{ - Layout.topMargin: 10 - } - FluProgressBar{ - id:progress_bar - Layout.topMargin: 20 - indeterminate: false - } - FluProgressRing{ - id:progress_ring - Layout.topMargin: 10 - indeterminate: false - } - - FluSlider{ - Layout.topMargin: 30 - value:50 - onValueChanged:{ - progress_bar.progress = value/100 - progress_ring.progress = value/100 + ColumnLayout{ + spacing: 5 + FluProgressBar{ + Layout.topMargin: 20 + } + FluProgressRing{ + Layout.topMargin: 10 + } + FluProgressBar{ + id:progress_bar + Layout.topMargin: 20 + indeterminate: false + } + FluProgressRing{ + id:progress_ring + Layout.topMargin: 10 + indeterminate: false + } + FluSlider{ + Layout.topMargin: 30 + value:50 + onValueChanged:{ + progress_bar.progress = value/100 + progress_ring.progress = value/100 + } } } } diff --git a/example/T_Rectangle.qml b/example/T_Rectangle.qml index 716a41d..35a258d 100644 --- a/example/T_Rectangle.qml +++ b/example/T_Rectangle.qml @@ -1,131 +1,131 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 +import QtQuick.Controls 2.15 import QtQuick.Window 2.15 import QtGraphicalEffects 1.15 import FluentUI 1.0 Item { - - ColumnLayout{ - spacing: 5 - - FluText{ - text:"Rectangle" - fontStyle: FluText.TitleLarge + FluText{ + id:title + text:"Rectangle" + fontStyle: FluText.TitleLarge + } + ScrollView{ + clip: true + width: parent.width + contentWidth: parent.width + anchors{ + top: title.bottom + bottom: parent.bottom } - - RowLayout{ - Layout.topMargin: 20 - - FluRectangle{ - width: 50 - height: 50 - color:"#0078d4" - radius:[0,0,0,0] + ColumnLayout{ + spacing: 5 + width: parent.width + height: parent.height + RowLayout{ + Layout.topMargin: 20 + FluRectangle{ + width: 50 + height: 50 + color:"#0078d4" + radius:[0,0,0,0] + } + FluRectangle{ + width: 50 + height: 50 + color:"#744da9" + radius:[15,15,15,15] + } + FluRectangle{ + width: 50 + height: 50 + color:"#ffeb3b" + radius:[15,0,0,0] + } + FluRectangle{ + width: 50 + height: 50 + color:"#f7630c" + radius:[0,15,0,0] + } + FluRectangle{ + width: 50 + height: 50 + color:"#e71123" + radius:[0,0,15,0] + } + FluRectangle{ + width: 50 + height: 50 + color:"#b4009e" + radius:[0,0,0,15] + } } - - FluRectangle{ - width: 50 - height: 50 - color:"#744da9" - radius:[15,15,15,15] + FluText{ + text:"配合图片使用" + fontStyle: FluText.Subtitle + Layout.topMargin: 20 } - - FluRectangle{ - width: 50 - height: 50 - color:"#ffeb3b" - radius:[15,0,0,0] - } - - FluRectangle{ - width: 50 - height: 50 - color:"#f7630c" - radius:[0,15,0,0] - } - - FluRectangle{ - width: 50 - height: 50 - color:"#e71123" - radius:[0,0,15,0] - } - - FluRectangle{ - width: 50 - height: 50 - color:"#b4009e" - radius:[0,0,0,15] - } - - } - - FluText{ - text:"配合图片使用" - fontStyle: FluText.Subtitle - Layout.topMargin: 20 - } - - RowLayout{ - spacing: 14 - FluRectangle{ - width: 50 - height: 50 - radius:[25,0,25,25] - Image { - asynchronous: true - anchors.fill: parent - source: "qrc:/res/svg/avatar_1.svg" - sourceSize: Qt.size(width,height) + RowLayout{ + spacing: 14 + FluRectangle{ + width: 50 + height: 50 + radius:[25,0,25,25] + Image { + asynchronous: true + anchors.fill: parent + source: "qrc:/res/svg/avatar_1.svg" + sourceSize: Qt.size(width,height) + } + } + FluRectangle{ + width: 50 + height: 50 + radius:[10,10,10,10] + Image { + asynchronous: true + anchors.fill: parent + sourceSize: Qt.size(width,height) + source: "qrc:/res/svg/avatar_2.svg" + } + } + FluRectangle{ + width: 50 + height: 50 + radius:[25,25,25,25] + Image { + asynchronous: true + anchors.fill: parent + sourceSize: Qt.size(width,height) + source: "qrc:/res/svg/avatar_3.svg" + } + } + FluRectangle{ + width: 50 + height: 50 + radius:[0,25,25,25] + Image { + asynchronous: true + anchors.fill: parent + sourceSize: Qt.size(width,height) + source: "qrc:/res/svg/avatar_4.svg" + } } } FluRectangle{ - width: 50 - height: 50 - radius:[10,10,10,10] - Image { - asynchronous: true - anchors.fill: parent - sourceSize: Qt.size(width,height) - source: "qrc:/res/svg/avatar_2.svg" - } - } - FluRectangle{ - width: 50 - height: 50 + width: 1080/5 + height: 1439/5 radius:[25,25,25,25] Image { asynchronous: true + source: "qrc:/res/image/image_huoyin.webp" anchors.fill: parent sourceSize: Qt.size(width,height) - source: "qrc:/res/svg/avatar_3.svg" } + Layout.topMargin: 10 } - FluRectangle{ - width: 50 - height: 50 - radius:[0,25,25,25] - Image { - asynchronous: true - anchors.fill: parent - sourceSize: Qt.size(width,height) - source: "qrc:/res/svg/avatar_4.svg" - } - } - } - - FluRectangle{ - width: 1080/5 - height: 1439/5 - radius:[25,25,25,25] - Image { - asynchronous: true - source: "qrc:/res/image/image_huoyin.webp" - anchors.fill: parent - sourceSize: Qt.size(width,height) - } - Layout.topMargin: 10 } } } diff --git a/example/T_Slider.qml b/example/T_Slider.qml index 51519b0..14c9bb8 100644 --- a/example/T_Slider.qml +++ b/example/T_Slider.qml @@ -1,27 +1,30 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Window 2.15 +import QtQuick.Controls 2.15 import QtGraphicalEffects 1.15 import FluentUI 1.0 Item { - - ColumnLayout{ - spacing: 5 - - - FluText{ - text:"Slider" - fontStyle: FluText.TitleLarge - } - - FluSlider{ - Layout.topMargin: 20 - value: 50 - } - - + FluText{ + id:title + text:"Slider" + fontStyle: FluText.TitleLarge + } + ScrollView{ + clip: true + width: parent.width + contentWidth: parent.width + anchors{ + top: title.bottom + bottom: parent.bottom + } + ColumnLayout{ + spacing: 5 + FluSlider{ + Layout.topMargin: 20 + value: 50 + } + } } - - } diff --git a/example/T_TextBox.qml b/example/T_TextBox.qml index a7b8449..dcb2dee 100644 --- a/example/T_TextBox.qml +++ b/example/T_TextBox.qml @@ -6,23 +6,31 @@ import QtGraphicalEffects 1.15 import FluentUI 1.0 Item { - - ColumnLayout{ - spacing: 5 - - FluText{ - text:"TextBox" - fontStyle: FluText.TitleLarge + FluText{ + id:title + text:"TextBox" + fontStyle: FluText.TitleLarge + } + ScrollView{ + clip: true + width: parent.width + contentWidth: parent.width + anchors{ + top: title.bottom + bottom: parent.bottom } - FluTextBox{ - Layout.topMargin: 20 - placeholderText: "单行输入框" - Layout.preferredWidth: 300 - } - FluMultiLineTextBox{ - Layout.topMargin: 20 - Layout.preferredWidth: 300 - placeholderText: "多行输入框" + ColumnLayout{ + spacing: 5 + FluTextBox{ + Layout.topMargin: 20 + placeholderText: "单行输入框" + Layout.preferredWidth: 300 + } + FluMultiLineTextBox{ + Layout.topMargin: 20 + Layout.preferredWidth: 300 + placeholderText: "多行输入框" + } } } } diff --git a/example/T_Theme.qml b/example/T_Theme.qml index a033eb5..0facbb1 100644 --- a/example/T_Theme.qml +++ b/example/T_Theme.qml @@ -1,42 +1,49 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Window 2.15 +import QtQuick.Controls 2.15 import QtGraphicalEffects 1.15 import FluentUI 1.0 Item { - - ColumnLayout{ - spacing: 5 - - FluText{ - text:"Theme" - fontStyle: FluText.TitleLarge + FluText{ + id:title + text:"Theme" + fontStyle: FluText.TitleLarge + } + ScrollView{ + clip: true + width: parent.width + contentWidth: parent.width + anchors{ + top: title.bottom + bottom: parent.bottom } - RowLayout{ - Layout.topMargin: 20 - - - Repeater{ - model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] - delegate: Rectangle{ - width: 42 - height: 42 - radius: 4 - color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal - FluIcon { - anchors.centerIn: parent - icon: FluentIcons.FA_check - iconSize: 15 - visible: modelData === FluTheme.primaryColor - color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) - } - MouseArea{ - id:mouse_item - anchors.fill: parent - hoverEnabled: true - onClicked: { - FluTheme.primaryColor = modelData + ColumnLayout{ + spacing: 5 + RowLayout{ + Layout.topMargin: 20 + Repeater{ + model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] + delegate: Rectangle{ + width: 42 + height: 42 + radius: 4 + color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal + FluIcon { + anchors.centerIn: parent + icon: FluentIcons.FA_check + iconSize: 15 + visible: modelData === FluTheme.primaryColor + color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) + } + MouseArea{ + id:mouse_item + anchors.fill: parent + hoverEnabled: true + onClicked: { + FluTheme.primaryColor = modelData + } } } } diff --git a/example/T_ToggleSwitch.qml b/example/T_ToggleSwitch.qml index 8786a56..d2bcab8 100644 --- a/example/T_ToggleSwitch.qml +++ b/example/T_ToggleSwitch.qml @@ -1,26 +1,30 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Window 2.15 +import QtQuick.Controls 2.15 import QtGraphicalEffects 1.15 import FluentUI 1.0 Item { - - ColumnLayout{ - spacing: 5 - - - FluText{ - text:"ToggleSwitch" - fontStyle: FluText.TitleLarge + FluText{ + id:title + text:"ToggleSwitch" + fontStyle: FluText.TitleLarge + } + ScrollView{ + clip: true + width: parent.width + contentWidth: parent.width + anchors{ + top: title.bottom + bottom: parent.bottom } - - FluToggleSwitch{ - Layout.topMargin: 20 + ColumnLayout{ + spacing: 5 + FluToggleSwitch{ + Layout.topMargin: 20 + } } - } - - } diff --git a/example/T_Typography.qml b/example/T_Typography.qml index 4374c48..7229036 100644 --- a/example/T_Typography.qml +++ b/example/T_Typography.qml @@ -1,54 +1,56 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 +import QtQuick.Controls 2.15 import FluentUI 1.0 Item { - - ColumnLayout{ - - spacing: 5 - - FluText{ - text:"Display" - fontStyle: FluText.Display - } - - FluText{ - text:"Title Large" - fontStyle: FluText.TitleLarge - } - - FluText{ - text:"Title" - fontStyle: FluText.Title - } - - FluText{ - text:"Subtitle" - fontStyle: FluText.Subtitle - } - - FluText{ - text:"Body Large" - fontStyle: FluText.BodyLarge - } - - FluText{ - text:"Body Strong" - fontStyle: FluText.BodyStrong - } - - FluText{ - text:"Body" - fontStyle: FluText.Body - } - - FluText{ - text:"Caption" - fontStyle: FluText.Caption - } - - + FluText{ + id:title + text:"Theme" + fontStyle: FluText.TitleLarge + } + ScrollView{ + clip: true + width: parent.width + contentWidth: parent.width + anchors{ + top: title.bottom + bottom: parent.bottom + } + ColumnLayout{ + spacing: 5 + FluText{ + text:"Display" + fontStyle: FluText.Display + } + FluText{ + text:"Title Large" + fontStyle: FluText.TitleLarge + } + FluText{ + text:"Title" + fontStyle: FluText.Title + } + FluText{ + text:"Subtitle" + fontStyle: FluText.Subtitle + } + FluText{ + text:"Body Large" + fontStyle: FluText.BodyLarge + } + FluText{ + text:"Body Strong" + fontStyle: FluText.BodyStrong + } + FluText{ + text:"Body" + fontStyle: FluText.Body + } + FluText{ + text:"Caption" + fontStyle: FluText.Caption + } + } } - } diff --git a/example/example.pro b/example/example.pro index f14783c..5eb613f 100644 --- a/example/example.pro +++ b/example/example.pro @@ -1,5 +1,5 @@ QT += quick concurrent -CONFIG += c++11 qtquickcompiler utf8_source +CONFIG += c++11 DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT diff --git a/example/qml.qrc b/example/qml.qrc index 50169e8..27f69c0 100644 --- a/example/qml.qrc +++ b/example/qml.qrc @@ -27,5 +27,6 @@ T_Awesome.qml T_TextBox.qml T_Theme.qml + T_Dialog.qml diff --git a/src/Fluent.cpp b/src/Fluent.cpp index 4813c42..ee0646c 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -32,10 +32,6 @@ void Fluent::registerTypes(const char *uri){ qmlRegisterType(uri,major,minor,"WindowHelper"); qmlRegisterType(uri,major,minor,"FluColorSet"); - // qmlRegisterSingletonType(QUrl("qrc:/com.zhuzichu/controls/FluColors.qml"),uri,major,minor,"FluColors"); - // qmlRegisterSingletonType(QUrl("qrc:/com.zhuzichu/controls/FluTheme.qml"),uri,major,minor,"FluTheme"); - - qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluColorSetOld.qml"),uri,major,minor,"FluColorSetOld"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMenu.qml"),uri,major,minor,"FluMenu"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMenuItem.qml"),uri,major,minor,"FluMenuItem"); diff --git a/src/FramelessView_win.cpp b/src/FramelessView_win.cpp index 48b7a16..a129a10 100644 --- a/src/FramelessView_win.cpp +++ b/src/FramelessView_win.cpp @@ -12,15 +12,6 @@ public: bool m_deleteLater = false; QQuickItem *m_titleItem = nullptr; }; - -static bool isMaxWin(QWindow* win) -{ - return win->windowState() == Qt::WindowMaximized; -} -static bool isFullWin(QQuickView* win) -{ - return win->windowState() == Qt::WindowFullScreen; -} FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessViewPrivate) { setFlags(Qt::CustomizeWindowHint | Qt::Window | Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint | Qt::WindowTitleHint | Qt::WindowSystemMenuHint); @@ -109,53 +100,6 @@ bool FramelessView::nativeEvent(const QByteArray &eventType, void *message, qint bool FramelessView::nativeEvent(const QByteArray &eventType, void *message, long *result) #endif { - if (!result) - { - return false; - } - -#if (QT_VERSION == QT_VERSION_CHECK(5, 11, 1)) - const auto msg = *reinterpret_cast(message); -#else - const auto msg = static_cast(message); -#endif - if (!msg || !msg->hwnd) - { - return false; - } - switch (msg->message) - { - case WM_NCCALCSIZE: { -#if 1 - const auto mode = static_cast(msg->wParam); - const auto clientRect = mode ? &(reinterpret_cast(msg->lParam)->rgrc[0]) : reinterpret_cast(msg->lParam); - if (mode == TRUE) - { - *result = WVR_REDRAW; - //规避 拖动border进行resize时界面闪烁 - if (!isMaxWin(this) && !isFullWin(this)) - { - if (clientRect->top != 0) - { - clientRect->top -= 0.1; - } - } - else - { - if (clientRect->top != 0) - { - clientRect->top += 0.1; - } - } - return true; - } -#else - *result = 0; - return true; -#endif - break; - } - } return Super::nativeEvent(eventType, message, result); } diff --git a/src/controls/FluAppBar.qml b/src/controls/FluAppBar.qml index 83145ef..eef8b88 100644 --- a/src/controls/FluAppBar.qml +++ b/src/controls/FluAppBar.qml @@ -6,7 +6,13 @@ import FluentUI 1.0 Rectangle{ id:root - color: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark + + property color borerlessColor : FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark + color: { + if(Window.window == null) + return borerlessColor + return Window.window.active ? borerlessColor : Qt.lighter(FluTheme.primaryColor.lightest,1.1) + } height: 50 width: { if(parent==null) @@ -19,30 +25,31 @@ Rectangle{ property bool showDark: false property bool showFps: false + property var window: Window.window + property bool resizable: { - if(Window.window == null){ + if(window == null){ return false } - return !(Window.window.minimumHeight === Window.window.maximumHeight && Window.window.maximumWidth === Window.window.minimumWidth) + return !(window.minimumHeight === window.maximumHeight && window.maximumWidth === window.minimumWidth) } - MouseArea{ - anchors.fill: parent - anchors.topMargin: 5 - acceptedButtons: Qt.LeftButton - hoverEnabled: true - onPressed: Window.window.startSystemMove() - onDoubleClicked: { - if(resizable) - toggleMaximized(); - } + TapHandler { + onTapped: if (tapCount === 2) toggleMaximized() + gesturePolicy: TapHandler.DragThreshold + } + + DragHandler { + target: null + grabPermissions: TapHandler.CanTakeOverFromAnything + onActiveChanged: if (active) { window.startSystemMove(); } } function toggleMaximized() { - if (Window.window.visibility === Window.Maximized) { - Window.window.showNormal(); + if (window.visibility === Window.Maximized) { + window.showNormal(); } else { - Window.window.showMaximized(); + window.showMaximized(); } } @@ -98,14 +105,14 @@ Rectangle{ textColor: root.textColor color:hovered ? "#20000000" : "#00000000" onClicked: { - Window.window.showMinimized() + window.showMinimized() } } FluIconButton{ property bool isRestore:{ - if(Window.window == null) + if(window == null) return false - return Window.Maximized === Window.window.visibility + return Window.Maximized === window.visibility } icon : isRestore ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize color:hovered ? "#20000000" : "#00000000" diff --git a/src/controls/FluColorSetOld.qml b/src/controls/FluColorSetOld.qml deleted file mode 100644 index ee2234a..0000000 --- a/src/controls/FluColorSetOld.qml +++ /dev/null @@ -1,13 +0,0 @@ -import QtQuick 2.15 - -QtObject { - - property color darkest: Qt.rgba(0/255,74/255,131/255,1) - property color darker:Qt.rgba(0/255,84/255,148/255,1) - property color dark:Qt.rgba(0/255,102/255,180/255,1) - property color normal:Qt.rgba(0/255,120/255,212/255,1) - property color light:Qt.rgba(38/255,140/255,218/255,1) - property color lighter:Qt.rgba(76/255,160/255,224/255,1) - property color lightest:Qt.rgba(96/255,171/255,228/255,1) - -} diff --git a/src/controls/FluColorsOld.qml b/src/controls/FluColorsOld.qml deleted file mode 100644 index 28b2425..0000000 --- a/src/controls/FluColorsOld.qml +++ /dev/null @@ -1,112 +0,0 @@ -pragma Singleton - -import QtQuick 2.15 - -QtObject { - - property color _Black: Qt.rgba(0/255,0/255,0/255,1) - property color _White: Qt.rgba(255/255,255/255,255/255,1) - - property color _Grey10: Qt.rgba(250/255,249/255,248/255,1) - property color _Grey20: Qt.rgba(243/255,242/255,241/255,1) - property color _Grey30: Qt.rgba(237/255,235/255,233/255,1) - property color _Grey40: Qt.rgba(225/255,223/255,221/255,1) - property color _Grey50: Qt.rgba(210/255,208/255,206/255,1) - property color _Grey60: Qt.rgba(200/255,198/255,196/255,1) - property color _Grey70: Qt.rgba(190/255,187/255,184/255,1) - property color _Grey80: Qt.rgba(179/255,176/255,173/255,1) - property color _Grey90: Qt.rgba(161/255,159/255,157/255,1) - property color _Grey100: Qt.rgba(151/255,149/255,147/255,1) - property color _Grey110: Qt.rgba(138/255,136/255,134/255,1) - property color _Grey120: Qt.rgba(121/255,119/255,117/255,1) - property color _Grey130: Qt.rgba(96/255,94/255,92/255,1) - property color _Grey140: Qt.rgba(72/255,70/255,68/255,1) - property color _Grey150: Qt.rgba(59/255,58/255,57/255,1) - property color _Grey160: Qt.rgba(50/255,49/255,48/255,1) - property color _Grey170: Qt.rgba(41/255,40/255,39/255,1) - property color _Grey180: Qt.rgba(37/255,36/255,35/255,1) - property color _Grey190: Qt.rgba(32/255,31/255,30/255,1) - property color _Grey200: Qt.rgba(27/255,26/255,25/255,1) - property color _Grey210: Qt.rgba(22/255,21/255,20/255,1) - property color _Grey220: Qt.rgba(17/255,16/255,15/255,1) - - property FluColorSetOld _Yellow:FluColorSetOld{ - darkest: Qt.rgba(249/255,168/255,37/255,1) - darker:Qt.rgba(251/255,192/255,45/255,1) - dark:Qt.rgba(253/255,216/255,53/255,1) - normal:Qt.rgba(255/255,235/255,59/255,1) - light:Qt.rgba(255/255,238/255,88/255,1) - lighter:Qt.rgba(255/255,241/255,118/255,1) - lightest:Qt.rgba(255/255,245/255,157/255,1) - } - - property FluColorSetOld _Orange:FluColorSetOld{ - darkest: Qt.rgba(153/255,61/255,7/255,1) - darker:Qt.rgba(172/255,68/255,8/255,1) - dark:Qt.rgba(209/255,84/255,10/255,1) - normal:Qt.rgba(247/255,99/255,12/255,1) - light:Qt.rgba(248/255,122/255,48/255,1) - lighter:Qt.rgba(249/255,145/255,84/255,1) - lightest:Qt.rgba(250/255,158/255,104/255,1) - } - - property FluColorSetOld _Red:FluColorSetOld{ - darkest: Qt.rgba(143/255,10/255,21/255,1) - darker:Qt.rgba(162/255,11/255,24/255,1) - dark:Qt.rgba(185/255,13/255,28/255,1) - normal:Qt.rgba(232/255,17/255,35/255,1) - light:Qt.rgba(236/255,64/255,79/255,1) - lighter:Qt.rgba(238/255,88/255,101/255,1) - lightest:Qt.rgba(240/255,107/255,118/255,1) - } - - property FluColorSetOld _Magenta:FluColorSetOld{ - darkest: Qt.rgba(111/255,0/255,79/255,1) - darker:Qt.rgba(126/255,0/255,110/255,1) - dark:Qt.rgba(144/255,0/255,126/255,1) - normal:Qt.rgba(180/255,0/255,158/255,1) - light:Qt.rgba(195/255,51/255,177/255,1) - lighter:Qt.rgba(202/255,76/255,187/255,1) - lightest:Qt.rgba(208/255,96/255,194/255,1) - } - - property FluColorSetOld _Purple:FluColorSetOld{ - darkest: Qt.rgba(71/255,47/255,104/255,1) - darker:Qt.rgba(81/255,53/255,118/255,1) - dark:Qt.rgba(100/255,66/255,147/255,1) - normal:Qt.rgba(116/255,77/255,169/255,1) - light:Qt.rgba(134/255,100/255,180/255,1) - lighter:Qt.rgba(157/255,130/255,194/255,1) - lightest:Qt.rgba(168/255,144/255,201/255,1) - } - - property FluColorSetOld _Blue:FluColorSetOld{ - darkest: Qt.rgba(0/255,74/255,131/255,1) - darker:Qt.rgba(0/255,84/255,148/255,1) - dark:Qt.rgba(0/255,102/255,180/255,1) - normal:Qt.rgba(0/255,120/255,212/255,1) - light:Qt.rgba(38/255,140/255,218/255,1) - lighter:Qt.rgba(76/255,160/255,224/255,1) - lightest:Qt.rgba(96/255,171/255,228/255,1) - } - - property FluColorSetOld _Teal:FluColorSetOld{ - darkest: Qt.rgba(0/255,110/255,91/255,1) - darker:Qt.rgba(0/255,124/255,103/255,1) - dark:Qt.rgba(0/255,151/255,125/255,1) - normal:Qt.rgba(0/255,178/255,148/255,1) - light:Qt.rgba(38/255,189/255,164/255,1) - lighter:Qt.rgba(76/255,201/255,180/255,1) - lightest:Qt.rgba(96/255,207/255,188/255,1) - } - - property FluColorSetOld _Green:FluColorSetOld{ - darkest: Qt.rgba(9/255,76/255,9/255,1) - darker:Qt.rgba(12/255,93/255,12/255,1) - dark:Qt.rgba(14/255,111/255,14/255,1) - normal:Qt.rgba(16/255,124/255,16/255,1) - light:Qt.rgba(39/255,137/255,39/255,1) - lighter:Qt.rgba(75/255,156/255,75/255,1) - lightest:Qt.rgba(106/255,173/255,106/255,1) - } -} diff --git a/src/controls/FluThemeOld.qml b/src/controls/FluThemeOld.qml deleted file mode 100644 index 31040fd..0000000 --- a/src/controls/FluThemeOld.qml +++ /dev/null @@ -1,10 +0,0 @@ -pragma Singleton - -import QtQuick 2.15 - -QtObject { - - property FluColorSetOld primaryColor: FluColorsOld._Teal - - -} diff --git a/src/controls/FluWindow.qml b/src/controls/FluWindow.qml index 5863e7c..53e1607 100644 --- a/src/controls/FluWindow.qml +++ b/src/controls/FluWindow.qml @@ -20,18 +20,20 @@ Item { property int maximumWidth property int minimumHeight property int maximumHeight + property int borderless:{ - if(Window.window == null) + if(window === null) return 4 if(Window.window.visibility === Window.Maximized){ return 0 } return 4 } - default property alias content: container.children - - FluWindowResize{} + default property alias content: container.data + FluWindowResize{ + border:borderless + } Behavior on opacity{ NumberAnimation{ @@ -39,13 +41,17 @@ Item { } } - Rectangle{ - color: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark + property color borerlessColor : FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark + color: { + if(window === null) + return borerlessColor + return window.active ? borerlessColor : Qt.lighter(FluTheme.primaryColor.lightest,1.1) + } border.width: 1 anchors.fill: parent radius: 4 - border.color:FluTheme.isDark ? Qt.darker(FluTheme.primaryColor.lighter,1.3) : Qt.lighter(FluTheme.primaryColor.dark,1.3) + border.color:FluTheme.isDark ? Qt.darker(FluTheme.primaryColor.lighter,1.3) : Qt.lighter(FluTheme.primaryColor.dark,1.2) } Rectangle{ diff --git a/src/controls/FluWindowResize.qml b/src/controls/FluWindowResize.qml index aa6067e..37b3319 100644 --- a/src/controls/FluWindowResize.qml +++ b/src/controls/FluWindowResize.qml @@ -4,13 +4,14 @@ import QtQuick.Window 2.15 MouseArea { property int border: 4 + property var window: Window.window property bool fixedSize: { - if(Window.window == null) + if(window == null) return true - if(Window.window.visibility === Window.Maximized || Window.window.visibility === Window.FullScreen){ + if(window.visibility === Window.Maximized || window.visibility === Window.FullScreen){ return true } - return (Window.window.minimumWidth === Window.window.maximumWidth && Window.window.minimumHeight === Window.window.maximumHeight) + return (window.minimumWidth === window.maximumWidth && window.minimumHeight === window.maximumHeight) } anchors.fill: parent diff --git a/src/res.qrc b/src/res.qrc index dd0eb1b..fd39bb5 100644 --- a/src/res.qrc +++ b/src/res.qrc @@ -32,8 +32,5 @@ controls/FluMenuItem.qml controls/FluShadow.qml controls/FluTextButton.qml - controls/FluColorSetOld.qml - controls/FluColorsOld.qml - controls/FluThemeOld.qml