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

update

main
zhuzihcu 2023-03-06 18:08:01 +08:00
parent 1ad1aa058a
commit d9ed37d3af
23 changed files with 588 additions and 729 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
example/MainPage.qml
View File

@ -21,51 +21,51 @@ FluWindow {
showFps: true showFps: true
} }
Item{ ListModel{
id:data id:nav_items
ListElement{
ListModel{ text:"Buttons"
id:nav_items page:"qrc:/T_Buttons.qml"
ListElement{ }
text:"Buttons" ListElement{
page:"qrc:/T_Buttons.qml" text:"TextBox"
} page:"qrc:/T_TextBox.qml"
ListElement{ }
text:"TextBox" ListElement{
page:"qrc:/T_TextBox.qml" text:"ToggleSwitch"
} page:"qrc:/T_ToggleSwitch.qml"
ListElement{ }
text:"ToggleSwitch" ListElement{
page:"qrc:/T_ToggleSwitch.qml" text:"Slider"
} page:"qrc:/T_Slider.qml"
ListElement{ }
text:"Slider" ListElement{
page:"qrc:/T_Slider.qml" text:"InfoBar"
} page:"qrc:/T_InfoBar.qml"
ListElement{ }
text:"InfoBar" ListElement{
page:"qrc:/T_InfoBar.qml" text:"Dialog"
} page:"qrc:/T_Dialog.qml"
ListElement{ }
text:"Progress" ListElement{
page:"qrc:/T_Progress.qml" text:"Progress"
} page:"qrc:/T_Progress.qml"
ListElement{ }
text:"Rectangle" ListElement{
page:"qrc:/T_Rectangle.qml" text:"Rectangle"
} page:"qrc:/T_Rectangle.qml"
ListElement{ }
text:"Theme" ListElement{
page:"qrc:/T_Theme.qml" text:"Theme"
} page:"qrc:/T_Theme.qml"
ListElement{ }
text:"Awesome" ListElement{
page:"qrc:/T_Awesome.qml" text:"Awesome"
} page:"qrc:/T_Awesome.qml"
ListElement{ }
text:"Typography" ListElement{
page:"qrc:/T_Typography.qml" text:"Typography"
} page:"qrc:/T_Typography.qml"
} }
} }
@ -123,25 +123,6 @@ FluWindow {
Rectangle{ 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 radius: 4
anchors{ anchors{
top: parent.top top: parent.top
@ -153,8 +134,6 @@ FluWindow {
leftMargin: 6 leftMargin: 6
rightMargin: 6 rightMargin: 6
} }
MouseArea{ MouseArea{
id:item_mouse id:item_mouse
hoverEnabled: true hoverEnabled: true
@ -163,6 +142,25 @@ FluWindow {
nav_list.currentIndex = index 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{ FluText{
text:model.text text:model.text
@ -171,8 +169,6 @@ FluWindow {
} }
} }
} }
} }

11
example/T_Awesome.qml
View File

@ -5,13 +5,11 @@ import QtQuick.Window 2.15
import FluentUI 1.0 import FluentUI 1.0
Item { Item {
FluText{ FluText{
id:title id:title
text:"Awesome" text:"Awesome"
fontStyle: FluText.TitleLarge fontStyle: FluText.TitleLarge
} }
FluTextBox{ FluTextBox{
id:text_box id:text_box
placeholderText: "请输入关键字" placeholderText: "请输入关键字"
@ -20,7 +18,6 @@ Item {
top:title.bottom top:title.bottom
} }
} }
FluFilledButton{ FluFilledButton{
text:"搜索" text:"搜索"
anchors{ anchors{
@ -32,7 +29,6 @@ Item {
grid_view.model = FluApp.awesomelist(text_box.text) grid_view.model = FluApp.awesomelist(text_box.text)
} }
} }
GridView{ GridView{
id:grid_view id:grid_view
cellWidth: 120 cellWidth: 120
@ -48,10 +44,8 @@ Item {
bottom: parent.bottom bottom: parent.bottom
} }
delegate: Item { delegate: Item {
width: 120 width: 120
height: 60 height: 60
FluIconButton{ FluIconButton{
id:item_icon id:item_icon
icon:modelData.icon icon:modelData.icon
@ -62,7 +56,6 @@ Item {
showSuccess("您复制了 "+text) showSuccess("您复制了 "+text)
} }
} }
FluText { FluText {
id:item_name id:item_name
font.pixelSize: 10; font.pixelSize: 10;
@ -70,10 +63,6 @@ Item {
anchors.top: item_icon.bottom anchors.top: item_icon.bottom
text: modelData.name text: modelData.name
} }
} }
} }
} }

219
example/T_Buttons.qml
View File

@ -1,141 +1,132 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import QtQuick.Window 2.15 import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15 import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
Item { Item {
width: parent.width width: parent.width
FluText{
id:title
ColumnLayout{ text:"Buttons"
spacing: 5 fontStyle: FluText.TitleLarge
}
ScrollView{
clip: true
width: parent.width width: parent.width
contentWidth: parent.width
FluText{ anchors{
text:"Buttons" top: title.bottom
fontStyle: FluText.TitleLarge bottom: parent.bottom
} }
ColumnLayout{
spacing: 5
RowLayout{
Layout.topMargin: 20
width: parent.width width: parent.width
FluButton{ RowLayout{
disabled:button_switch.checked Layout.topMargin: 20
onClicked: { width: parent.width
showInfo("点击StandardButton") 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{ FluDivider{
height: 1 Layout.fillWidth: true ; height:1;
Layout.fillWidth: true
} }
FluToggleSwitch{ RowLayout{
id:button_switch Layout.topMargin: 20
Layout.alignment: Qt.AlignRight width: parent.width
} FluFilledButton{
FluText{ disabled:filled_button_switch.checked
text:"Disabled" onClicked:{
} showWarning("点击FilledButton")
} }
}
FluDivider{ Item{
Layout.fillWidth: true ; height:1; height: 1
} Layout.fillWidth: true
}
FluToggleSwitch{
RowLayout{ id:filled_button_switch
Layout.topMargin: 20 Layout.alignment: Qt.AlignRight
width: parent.width }
FluFilledButton{ FluText{
disabled:filled_button_switch.checked text:"Disabled"
onClicked:{
showWarning("点击FilledButton")
} }
} }
Item{ FluDivider{
height: 1 Layout.fillWidth: true ; height:1
Layout.fillWidth: true
} }
FluToggleSwitch{ RowLayout{
id:filled_button_switch Layout.topMargin: 20
Layout.alignment: Qt.AlignRight width: parent.width
} FluIconButton{
FluText{ icon:FluentIcons.FA_close
text:"Disabled" disabled:icon_button_switch.checked
} onClicked:{
} showSuccess("点击IconButton")
}
}
Item{
FluDivider{ height: 1
Layout.fillWidth: true ; height:1 Layout.fillWidth: true
} }
FluToggleSwitch{
id:icon_button_switch
RowLayout{ Layout.alignment: Qt.AlignRight
Layout.topMargin: 20 }
width: parent.width FluText{
FluIconButton{ text:"Disabled"
icon:FluentIcons.FA_close
disabled:icon_button_switch.checked
onClicked:{
showSuccess("点击IconButton")
} }
} }
Item{ FluDivider{
height: 1 Layout.fillWidth: true ; height:1
Layout.fillWidth: true
} }
FluToggleSwitch{ RowLayout{
id:icon_button_switch Layout.topMargin: 20
Layout.alignment: Qt.AlignRight width: parent.width
} ColumnLayout{
FluText{ spacing: 8
text:"Disabled" Repeater{
} id:repeater
} property int selecIndex : 0
model: 3
delegate: FluRadioButton{
FluDivider{ checked : repeater.selecIndex===index
Layout.fillWidth: true ; height:1 disabled:radio_button_switch.checked
} text:"RodioButton_"+index
onClicked:{
RowLayout{ repeater.selecIndex = index
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{
Item{ height: 1
height: 1 Layout.fillWidth: true
Layout.fillWidth: true }
} FluToggleSwitch{
FluToggleSwitch{ id:radio_button_switch
id:radio_button_switch Layout.alignment: Qt.AlignRight
Layout.alignment: Qt.AlignRight }
} FluText{
FluText{ text:"Disabled"
text:"Disabled" }
} }
} }
} }
} }

33
example/T_Dialog.qml Normal file
View File

@ -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: {
}
}
}
}
}

89
example/T_InfoBar.qml
View File

@ -1,54 +1,55 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import QtQuick.Window 2.15 import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15 import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
Item { Item {
FluText{
ColumnLayout{ id:title
spacing: 5 text:"InfoBar"
fontStyle: FluText.TitleLarge
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")
}
}
} }
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")
}
}
}
}
} }

68
example/T_Progress.qml
View File

@ -1,41 +1,49 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import QtQuick.Window 2.15 import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15 import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
Item { Item {
FluText{
ColumnLayout{ id:title
spacing: 5 text:"Progress"
fontStyle: FluText.TitleLarge
FluText{ }
text:"Progress" ScrollView{
fontStyle: FluText.TitleLarge clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
} }
FluProgressBar{ ColumnLayout{
Layout.topMargin: 20 spacing: 5
} FluProgressBar{
FluProgressRing{ Layout.topMargin: 20
Layout.topMargin: 10 }
} FluProgressRing{
FluProgressBar{ Layout.topMargin: 10
id:progress_bar }
Layout.topMargin: 20 FluProgressBar{
indeterminate: false id:progress_bar
} Layout.topMargin: 20
FluProgressRing{ indeterminate: false
id:progress_ring }
Layout.topMargin: 10 FluProgressRing{
indeterminate: false id:progress_ring
} Layout.topMargin: 10
indeterminate: false
FluSlider{ }
Layout.topMargin: 30 FluSlider{
value:50 Layout.topMargin: 30
onValueChanged:{ value:50
progress_bar.progress = value/100 onValueChanged:{
progress_ring.progress = value/100 progress_bar.progress = value/100
progress_ring.progress = value/100
}
} }
} }
} }

216
example/T_Rectangle.qml
View File

@ -1,131 +1,131 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15 import QtQuick.Window 2.15
import QtGraphicalEffects 1.15 import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
Item { Item {
FluText{
ColumnLayout{ id:title
spacing: 5 text:"Rectangle"
fontStyle: FluText.TitleLarge
FluText{ }
text:"Rectangle" ScrollView{
fontStyle: FluText.TitleLarge clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
} }
ColumnLayout{
RowLayout{ spacing: 5
Layout.topMargin: 20 width: parent.width
height: parent.height
FluRectangle{ RowLayout{
width: 50 Layout.topMargin: 20
height: 50 FluRectangle{
color:"#0078d4" width: 50
radius:[0,0,0,0] 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]
}
} }
FluText{
FluRectangle{ text:"配合图片使用"
width: 50 fontStyle: FluText.Subtitle
height: 50 Layout.topMargin: 20
color:"#744da9"
radius:[15,15,15,15]
} }
RowLayout{
FluRectangle{ spacing: 14
width: 50 FluRectangle{
height: 50 width: 50
color:"#ffeb3b" height: 50
radius:[15,0,0,0] radius:[25,0,25,25]
} Image {
asynchronous: true
FluRectangle{ anchors.fill: parent
width: 50 source: "qrc:/res/svg/avatar_1.svg"
height: 50 sourceSize: Qt.size(width,height)
color:"#f7630c" }
radius:[0,15,0,0] }
} FluRectangle{
width: 50
FluRectangle{ height: 50
width: 50 radius:[10,10,10,10]
height: 50 Image {
color:"#e71123" asynchronous: true
radius:[0,0,15,0] anchors.fill: parent
} sourceSize: Qt.size(width,height)
source: "qrc:/res/svg/avatar_2.svg"
FluRectangle{ }
width: 50 }
height: 50 FluRectangle{
color:"#b4009e" width: 50
radius:[0,0,0,15] height: 50
} radius:[25,25,25,25]
Image {
} asynchronous: true
anchors.fill: parent
FluText{ sourceSize: Qt.size(width,height)
text:"配合图片使用" source: "qrc:/res/svg/avatar_3.svg"
fontStyle: FluText.Subtitle }
Layout.topMargin: 20 }
} FluRectangle{
width: 50
RowLayout{ height: 50
spacing: 14 radius:[0,25,25,25]
FluRectangle{ Image {
width: 50 asynchronous: true
height: 50 anchors.fill: parent
radius:[25,0,25,25] sourceSize: Qt.size(width,height)
Image { source: "qrc:/res/svg/avatar_4.svg"
asynchronous: true }
anchors.fill: parent
source: "qrc:/res/svg/avatar_1.svg"
sourceSize: Qt.size(width,height)
} }
} }
FluRectangle{ FluRectangle{
width: 50 width: 1080/5
height: 50 height: 1439/5
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] radius:[25,25,25,25]
Image { Image {
asynchronous: true asynchronous: true
source: "qrc:/res/image/image_huoyin.webp"
anchors.fill: parent anchors.fill: parent
sourceSize: Qt.size(width,height) 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
} }
} }
} }

39
example/T_Slider.qml
View File

@ -1,27 +1,30 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import QtQuick.Window 2.15 import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15 import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
Item { Item {
FluText{
ColumnLayout{ id:title
spacing: 5 text:"Slider"
fontStyle: FluText.TitleLarge
}
FluText{ ScrollView{
text:"Slider" clip: true
fontStyle: FluText.TitleLarge width: parent.width
} contentWidth: parent.width
anchors{
FluSlider{ top: title.bottom
Layout.topMargin: 20 bottom: parent.bottom
value: 50 }
} ColumnLayout{
spacing: 5
FluSlider{
Layout.topMargin: 20
value: 50
}
}
} }
} }

40
example/T_TextBox.qml
View File

@ -6,23 +6,31 @@ import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
Item { Item {
FluText{
ColumnLayout{ id:title
spacing: 5 text:"TextBox"
fontStyle: FluText.TitleLarge
FluText{ }
text:"TextBox" ScrollView{
fontStyle: FluText.TitleLarge clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
} }
FluTextBox{ ColumnLayout{
Layout.topMargin: 20 spacing: 5
placeholderText: "单行输入框" FluTextBox{
Layout.preferredWidth: 300 Layout.topMargin: 20
} placeholderText: "单行输入框"
FluMultiLineTextBox{ Layout.preferredWidth: 300
Layout.topMargin: 20 }
Layout.preferredWidth: 300 FluMultiLineTextBox{
placeholderText: "多行输入框" Layout.topMargin: 20
Layout.preferredWidth: 300
placeholderText: "多行输入框"
}
} }
} }
} }

69
example/T_Theme.qml
View File

@ -1,42 +1,49 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import QtQuick.Window 2.15 import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15 import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
Item { Item {
FluText{
ColumnLayout{ id:title
spacing: 5 text:"Theme"
fontStyle: FluText.TitleLarge
FluText{ }
text:"Theme" ScrollView{
fontStyle: FluText.TitleLarge clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
} }
RowLayout{ ColumnLayout{
Layout.topMargin: 20 spacing: 5
RowLayout{
Layout.topMargin: 20
Repeater{ Repeater{
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
delegate: Rectangle{ delegate: Rectangle{
width: 42 width: 42
height: 42 height: 42
radius: 4 radius: 4
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
FluIcon { FluIcon {
anchors.centerIn: parent anchors.centerIn: parent
icon: FluentIcons.FA_check icon: FluentIcons.FA_check
iconSize: 15 iconSize: 15
visible: modelData === FluTheme.primaryColor visible: modelData === FluTheme.primaryColor
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
} }
MouseArea{ MouseArea{
id:mouse_item id:mouse_item
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: { onClicked: {
FluTheme.primaryColor = modelData FluTheme.primaryColor = modelData
}
} }
} }
} }

32
example/T_ToggleSwitch.qml
View File

@ -1,26 +1,30 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import QtQuick.Window 2.15 import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15 import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
Item { Item {
FluText{
ColumnLayout{ id:title
spacing: 5 text:"ToggleSwitch"
fontStyle: FluText.TitleLarge
}
FluText{ ScrollView{
text:"ToggleSwitch" clip: true
fontStyle: FluText.TitleLarge width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
} }
ColumnLayout{
FluToggleSwitch{ spacing: 5
Layout.topMargin: 20 FluToggleSwitch{
Layout.topMargin: 20
}
} }
} }
} }

96
example/T_Typography.qml
View File

@ -1,54 +1,56 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import FluentUI 1.0 import FluentUI 1.0
Item { Item {
FluText{
ColumnLayout{ id:title
text:"Theme"
spacing: 5 fontStyle: FluText.TitleLarge
}
FluText{ ScrollView{
text:"Display" clip: true
fontStyle: FluText.Display width: parent.width
} contentWidth: parent.width
anchors{
FluText{ top: title.bottom
text:"Title Large" bottom: parent.bottom
fontStyle: FluText.TitleLarge }
} ColumnLayout{
spacing: 5
FluText{ FluText{
text:"Title" text:"Display"
fontStyle: FluText.Title fontStyle: FluText.Display
} }
FluText{
FluText{ text:"Title Large"
text:"Subtitle" fontStyle: FluText.TitleLarge
fontStyle: FluText.Subtitle }
} FluText{
text:"Title"
FluText{ fontStyle: FluText.Title
text:"Body Large" }
fontStyle: FluText.BodyLarge FluText{
} text:"Subtitle"
fontStyle: FluText.Subtitle
FluText{ }
text:"Body Strong" FluText{
fontStyle: FluText.BodyStrong text:"Body Large"
} fontStyle: FluText.BodyLarge
}
FluText{ FluText{
text:"Body" text:"Body Strong"
fontStyle: FluText.Body fontStyle: FluText.BodyStrong
} }
FluText{
FluText{ text:"Body"
text:"Caption" fontStyle: FluText.Body
fontStyle: FluText.Caption }
} FluText{
text:"Caption"
fontStyle: FluText.Caption
}
}
} }
} }

2
example/example.pro
View File

@ -1,5 +1,5 @@
QT += quick concurrent QT += quick concurrent
CONFIG += c++11 qtquickcompiler utf8_source CONFIG += c++11
DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT

1
example/qml.qrc
View File

@ -27,5 +27,6 @@
<file>T_Awesome.qml</file> <file>T_Awesome.qml</file>
<file>T_TextBox.qml</file> <file>T_TextBox.qml</file>
<file>T_Theme.qml</file> <file>T_Theme.qml</file>
<file>T_Dialog.qml</file>
</qresource> </qresource>
</RCC> </RCC>

4
src/Fluent.cpp
View File

@ -32,10 +32,6 @@ void Fluent::registerTypes(const char *uri){
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper"); qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet"); qmlRegisterType<FluColorSet>(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/FluMenu.qml"),uri,major,minor,"FluMenu");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMenuItem.qml"),uri,major,minor,"FluMenuItem"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMenuItem.qml"),uri,major,minor,"FluMenuItem");

56
src/FramelessView_win.cpp
View File

@ -12,15 +12,6 @@ public:
bool m_deleteLater = false; bool m_deleteLater = false;
QQuickItem *m_titleItem = nullptr; 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) FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessViewPrivate)
{ {
setFlags(Qt::CustomizeWindowHint | Qt::Window | Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint | Qt::WindowTitleHint | Qt::WindowSystemMenuHint); 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) bool FramelessView::nativeEvent(const QByteArray &eventType, void *message, long *result)
#endif #endif
{ {
if (!result)
{
return false;
}
#if (QT_VERSION == QT_VERSION_CHECK(5, 11, 1))
const auto msg = *reinterpret_cast<MSG**>(message);
#else
const auto msg = static_cast<LPMSG>(message);
#endif
if (!msg || !msg->hwnd)
{
return false;
}
switch (msg->message)
{
case WM_NCCALCSIZE: {
#if 1
const auto mode = static_cast<BOOL>(msg->wParam);
const auto clientRect = mode ? &(reinterpret_cast<LPNCCALCSIZE_PARAMS>(msg->lParam)->rgrc[0]) : reinterpret_cast<LPRECT>(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); return Super::nativeEvent(eventType, message, result);
} }

45
src/controls/FluAppBar.qml
View File

@ -6,7 +6,13 @@ import FluentUI 1.0
Rectangle{ Rectangle{
id:root 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 height: 50
width: { width: {
if(parent==null) if(parent==null)
@ -19,30 +25,31 @@ Rectangle{
property bool showDark: false property bool showDark: false
property bool showFps: false property bool showFps: false
property var window: Window.window
property bool resizable: { property bool resizable: {
if(Window.window == null){ if(window == null){
return false 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{ TapHandler {
anchors.fill: parent onTapped: if (tapCount === 2) toggleMaximized()
anchors.topMargin: 5 gesturePolicy: TapHandler.DragThreshold
acceptedButtons: Qt.LeftButton }
hoverEnabled: true
onPressed: Window.window.startSystemMove() DragHandler {
onDoubleClicked: { target: null
if(resizable) grabPermissions: TapHandler.CanTakeOverFromAnything
toggleMaximized(); onActiveChanged: if (active) { window.startSystemMove(); }
}
} }
function toggleMaximized() { function toggleMaximized() {
if (Window.window.visibility === Window.Maximized) { if (window.visibility === Window.Maximized) {
Window.window.showNormal(); window.showNormal();
} else { } else {
Window.window.showMaximized(); window.showMaximized();
} }
} }
@ -98,14 +105,14 @@ Rectangle{
textColor: root.textColor textColor: root.textColor
color:hovered ? "#20000000" : "#00000000" color:hovered ? "#20000000" : "#00000000"
onClicked: { onClicked: {
Window.window.showMinimized() window.showMinimized()
} }
} }
FluIconButton{ FluIconButton{
property bool isRestore:{ property bool isRestore:{
if(Window.window == null) if(window == null)
return false return false
return Window.Maximized === Window.window.visibility return Window.Maximized === window.visibility
} }
icon : isRestore ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize icon : isRestore ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize
color:hovered ? "#20000000" : "#00000000" color:hovered ? "#20000000" : "#00000000"

13
src/controls/FluColorSetOld.qml
View File

@ -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)
}

112
src/controls/FluColorsOld.qml
View File

@ -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)
}
}

10
src/controls/FluThemeOld.qml
View File

@ -1,10 +0,0 @@
pragma Singleton
import QtQuick 2.15
QtObject {
property FluColorSetOld primaryColor: FluColorsOld._Teal
}

20
src/controls/FluWindow.qml
View File

@ -20,18 +20,20 @@ Item {
property int maximumWidth property int maximumWidth
property int minimumHeight property int minimumHeight
property int maximumHeight property int maximumHeight
property int borderless:{ property int borderless:{
if(Window.window == null) if(window === null)
return 4 return 4
if(Window.window.visibility === Window.Maximized){ if(Window.window.visibility === Window.Maximized){
return 0 return 0
} }
return 4 return 4
} }
default property alias content: container.children default property alias content: container.data
FluWindowResize{}
FluWindowResize{
border:borderless
}
Behavior on opacity{ Behavior on opacity{
NumberAnimation{ NumberAnimation{
@ -39,13 +41,17 @@ Item {
} }
} }
Rectangle{ 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 border.width: 1
anchors.fill: parent anchors.fill: parent
radius: 4 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{ Rectangle{

7
src/controls/FluWindowResize.qml
View File

@ -4,13 +4,14 @@ import QtQuick.Window 2.15
MouseArea { MouseArea {
property int border: 4 property int border: 4
property var window: Window.window
property bool fixedSize: { property bool fixedSize: {
if(Window.window == null) if(window == null)
return true 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 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 anchors.fill: parent

3
src/res.qrc
View File

@ -32,8 +32,5 @@
<file>controls/FluMenuItem.qml</file> <file>controls/FluMenuItem.qml</file>
<file>controls/FluShadow.qml</file> <file>controls/FluShadow.qml</file>
<file>controls/FluTextButton.qml</file> <file>controls/FluTextButton.qml</file>
<file>controls/FluColorSetOld.qml</file>
<file>controls/FluColorsOld.qml</file>
<file>controls/FluThemeOld.qml</file>
</qresource> </qresource>
</RCC> </RCC>