This commit is contained in:
zhuzihcu
2023-03-06 18:08:01 +08:00
parent 1ad1aa058a
commit d9ed37d3af
23 changed files with 588 additions and 729 deletions

View File

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

View File

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

View File

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

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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: "多行输入框"
}
}
}
}

View File

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

View File

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

View File

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

View File

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

View File

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