This commit is contained in:
zhuzihcu 2023-04-06 17:32:21 +08:00
parent 13abd275b4
commit d89aaec062
28 changed files with 1044 additions and 462 deletions

View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import QtQuick.Controls import QtQuick.Controls
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -11,6 +12,7 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -99,5 +101,19 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
count: 100
isDot: false
color: Qt.rgba(82/255,196/255,26/255,1)
}
}'
}
} }

View File

@ -52,10 +52,10 @@ FluScrollablePage{
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
code:'FluTextButton{ code:'FluTextButton{
text:"Text Button" text:"Text Button"
onClicked: { onClicked: {
} }
}' }'
} }
@ -93,10 +93,10 @@ FluScrollablePage{
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
code:'FluButton{ code:'FluButton{
text:"Standard Button" text:"Standard Button"
onClicked: { onClicked: {
} }
}' }'
} }
@ -134,10 +134,10 @@ FluScrollablePage{
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
code:'FluFilledButton{ code:'FluFilledButton{
text:"Filled Button" text:"Filled Button"
onClicked: { onClicked: {
} }
}' }'
} }
@ -176,10 +176,10 @@ FluScrollablePage{
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
code:'FluIconButton{ code:'FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast iconSource:FluentIcons.ChromeCloseContrast
onClicked: { onClicked: {
} }
}' }'
} }
@ -226,21 +226,21 @@ FluScrollablePage{
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
code:'FluDropDownButton{ code:'FluDropDownButton{
text:"DropDownButton" text:"DropDownButton"
items:[ items:[
FluMenuItem{ FluMenuItem{
text:"Menu_1" text:"Menu_1"
}, },
FluMenuItem{ FluMenuItem{
text:"Menu_2" text:"Menu_2"
}, },
FluMenuItem{ FluMenuItem{
text:"Menu_3" text:"Menu_3"
}, },
FluMenuItem{ FluMenuItem{
text:"Menu_4" text:"Menu_4"
} }
] ]
}' }'
} }
@ -287,11 +287,11 @@ FluScrollablePage{
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
code:'FluRadioButton{ code:'FluRadioButton{
selected:true selected:true
text:"Text Button" text:"Text Button"
onClicked: { onClicked: {
} }
}' }'
} }
@ -325,7 +325,7 @@ FluScrollablePage{
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
code:'FluCheckBox{ code:'FluCheckBox{
text:"Check Box" text:"Check Box"
}' }'
} }
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,6 +11,7 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -19,6 +21,12 @@ FluScrollablePage{
FluCalendarView{ FluCalendarView{
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluCalendarView{
}'
}
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -34,5 +42,11 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluCalendarPicker{
}'
}
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import QtQuick.Controls import QtQuick.Controls
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,6 +11,7 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -35,4 +37,14 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluCarousel{
width: 400
height: 300
Component.onCompleted: {
setData([{url:"qrc:/res/image/banner_1.jpg"},{url:"qrc:/res/image/banner_2.jpg"},{url:"qrc:/res/image/banner_3.jpg"}])
}
}'
}
} }

View File

@ -31,7 +31,7 @@ FluScrollablePage{
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
code:'FluCheckBox{ code:'FluCheckBox{
text:"Text" text:"Text"
}' }'
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,6 +11,7 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -37,6 +39,12 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluColorView{
}'
}
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -54,6 +62,12 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluColorPicker{
}'
}
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,44 +11,42 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 20 Layout.topMargin: 20
height: 80 height: 80
paddings: 10 paddings: 10
ColumnLayout{ ColumnLayout{
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left left: parent.left
} }
FluText{ FluText{
text:"showYear=true" text:"showYear=true"
} }
FluDatePicker{ FluDatePicker{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluDatePicker{
}'
}
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 20 Layout.topMargin: 20
height: 80 height: 80
paddings: 10 paddings: 10
ColumnLayout{ ColumnLayout{
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left left: parent.left
} }
FluText{ FluText{
text:"showYear=false" text:"showYear=false"
} }
@ -56,8 +55,13 @@ FluScrollablePage{
showYear:false showYear:false
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluDatePicker{
showYear:false
}'
}
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import QtQuick.Controls import QtQuick.Controls
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,6 +11,40 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluButton{
anchors.verticalCenter: parent.verticalCenter
Layout.topMargin: 20
text:"Show Dialog"
onClicked: {
dialog.open()
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluContentDialog{
id:dialog
title:"友情提示"
message:"确定要退出程序么?"
negativeText:"取消"
onNegativeClicked:{
showSuccess("点击取消按钮")
}
positiveText:"确定"
onPositiveClicked:{
showSuccess("点击确定按钮")
}
}
dialog.open()
'
}
FluContentDialog{ FluContentDialog{
id:dialog id:dialog
@ -25,11 +60,5 @@ FluScrollablePage{
} }
} }
FluButton{
Layout.topMargin: 20
text:"Show Dialog"
onClicked: {
dialog.open()
}
}
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,56 +11,99 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluExpander{ FluArea{
headerText:"打开一个单选框" Layout.fillWidth: true
height: layout_column.height+40
paddings: 10
Layout.topMargin: 20 Layout.topMargin: 20
Item{ Column{
anchors.fill: parent id:layout_column
ColumnLayout{ spacing: 15
spacing: 8 anchors{
anchors{ verticalCenter: parent.verticalCenter
top: parent.top left:parent.left
left: parent.left }
topMargin: 15
leftMargin: 15 FluExpander{
} headerText:"打开一个单选框"
Repeater{ Layout.topMargin: 20
id:repeater Item{
property int selecIndex : 0 anchors.fill: parent
model: 3 ColumnLayout{
delegate: FluRadioButton{ spacing: 8
selected : repeater.selecIndex===index anchors{
text:"Radio Button_"+index top: parent.top
onClicked:{ left: parent.left
repeater.selecIndex = index topMargin: 15
leftMargin: 15
}
Repeater{
id:repeater
property int selecIndex : 0
model: 3
delegate: FluRadioButton{
selected : repeater.selecIndex===index
text:"Radio Button_"+index
onClicked:{
repeater.selecIndex = index
}
}
} }
} }
} }
} }
FluExpander{
Layout.topMargin: 20
headerText:"打开一个滑动文本框"
Item{
anchors.fill: parent
Flickable{
id:scrollview
width: parent.width
height: parent.height
contentWidth: width
contentHeight: text_info.height
ScrollBar.vertical: FluScrollBar {}
FluText{
id:text_info
width: scrollview.width
wrapMode: Text.WrapAnywhere
padding: 14
text:"先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。宫中府中,俱为一体;陟罚臧否,不宜异同。若有作奸犯科及为忠善者,宜付有司论其刑赏,以昭陛下平明之理,不宜偏私,使内外异法也。侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下。愚以为宫中之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。将军向宠,性行淑均,晓畅军事,试用于昔日,先帝称之曰能,是以众议举宠为督。愚以为营中之事,悉以咨之,必能使行阵和睦,优劣得所。亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之信之,则汉室之隆,可计日而待也。臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。先帝知臣谨慎,故临崩寄臣以大事也。受命以来,夙夜忧叹,恐托付不效,以伤先帝之明;故五月渡泸,深入不毛。今南方已定,兵甲已足,当奖率三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏。臣不胜受恩感激。今当远离,临表涕零,不知所言。"
}
}
}
}
} }
} }
FluExpander{ CodeExpander{
Layout.topMargin: 20 Layout.fillWidth: true
headerText:"打开一个滑动文本框" code:'FluExpander{
Item{ headerText:"打开一个单选框"
anchors.fill: parent Item{
Flickable{ anchors.fill: parent
id:scrollview Flickable{
width: parent.width width: parent.width
height: parent.height height: parent.height
contentWidth: width contentWidth: width
contentHeight: text_info.height contentHeight: text_info.height
ScrollBar.vertical: FluScrollBar {} ScrollBar.vertical: FluScrollBar {}
FluText{ FluText{
id:text_info id:text_info
width: scrollview.width width: scrollview.width
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
padding: 14 padding: 14
text:"先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。宫中府中,俱为一体;陟罚臧否,不宜异同。若有作奸犯科及为忠善者,宜付有司论其刑赏,以昭陛下平明之理,不宜偏私,使内外异法也。侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下。愚以为宫中之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。将军向宠,性行淑均,晓畅军事,试用于昔日,先帝称之曰能,是以众议举宠为督。愚以为营中之事,悉以咨之,必能使行阵和睦,优劣得所。亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之信之,则汉室之隆,可计日而待也。臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。先帝知臣谨慎,故临崩寄臣以大事也。受命以来,夙夜忧叹,恐托付不效,以伤先帝之明;故五月渡泸,深入不毛。今南方已定,兵甲已足,当奖率三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏。臣不胜受恩感激。今当远离,临表涕零,不知所言。" text:"先帝创业未半而中道崩殂,今天下三分......""
}
} }
} }
} }
}'
}
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,7 +11,7 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -26,7 +27,6 @@ FluScrollablePage{
Image{ Image{
source: "qrc:/res/image/banner_1.jpg" source: "qrc:/res/image/banner_1.jpg"
asynchronous: true asynchronous: true
sourceSize: Qt.size(400,300)
fillMode:Image.PreserveAspectCrop fillMode:Image.PreserveAspectCrop
} }
Image{ Image{
@ -42,6 +42,27 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluFlipView{
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
'
}
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -74,5 +95,26 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluFlipView{
vertical:true
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
'
}
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import QtQuick.Controls import QtQuick.Controls
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,33 +11,53 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluButton{ FluArea{
text:"Info" Layout.fillWidth: true
Layout.topMargin: 20 Layout.topMargin: 20
onClicked: { height: 200
showInfo("这是一个Info样式的InfoBar") paddings: 10
ColumnLayout{
spacing: 14
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluButton{
text:"Info"
onClicked: {
showInfo("这是一个Info样式的InfoBar")
}
}
FluButton{
text:"Warning"
onClicked: {
showWarning("这是一个Warning样式的InfoBar")
}
}
FluButton{
text:"Error"
onClicked: {
showError("这是一个Error样式的InfoBar")
}
}
FluButton{
text:"Success"
onClicked: {
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
}
}
} }
} }
FluButton{ CodeExpander{
text:"Warning" Layout.fillWidth: true
Layout.topMargin: 20 code:' showInfo("这是一个Info样式的InfoBar")
onClicked: {
showWarning("这是一个Warning样式的InfoBar") showWarning("这是一个Warning样式的InfoBar")
}
} showError("这是一个Error样式的InfoBar")
FluButton{
text:"Error" showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")'
Layout.topMargin: 20
onClicked: {
showError("这是一个Error样式的InfoBar")
}
}
FluButton{
text:"Success"
Layout.topMargin: 20
onClicked: {
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
}
} }
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,6 +11,7 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
onVisibleChanged: { onVisibleChanged: {
if(visible){ if(visible){
@ -18,7 +20,6 @@ FluScrollablePage{
player.pause() player.pause()
} }
} }
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
height: 320 height: 320
@ -35,13 +36,19 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluMediaPlayer{
id:player
source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
}
'
}
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
height: 68 height: 68
Layout.topMargin: 20 Layout.topMargin: 20
paddings: 10 paddings: 10
FluButton{ FluButton{
text:"跳转到视频播放器窗口" text:"跳转到视频播放器窗口"
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -49,8 +56,10 @@ FluScrollablePage{
FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"}) FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"})
} }
} }
} }
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import QtQuick.Controls import QtQuick.Controls
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,30 +11,66 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluButton{ FluArea{
text:"左击菜单" Layout.fillWidth: true
height: 100
paddings: 10
Layout.topMargin: 20 Layout.topMargin: 20
onClicked:{ Column{
menu.popup() id:layout_column
spacing: 15
anchors{
verticalCenter: parent.verticalCenter
left:parent.left
}
FluButton{
text:"左击菜单"
Layout.topMargin: 20
onClicked:{
menu.popup()
}
}
FluButton{
text:"右击菜单"
Layout.topMargin: 20
onClicked: {
showSuccess("请按鼠标右击")
}
MouseArea{
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: {
menu.popup()
}
}
}
} }
} }
CodeExpander{
FluButton{ Layout.fillWidth: true
text:"右击菜单" code:'FluMenu{
Layout.topMargin: 20 id:menu
FluMenuItem:{
text:"删除"
onClicked: { onClicked: {
showSuccess("请按鼠标右击") showError("删除")
} }
MouseArea{ }
anchors.fill: parent FluMenuItem:{
acceptedButtons: Qt.RightButton text:"修改"
onClicked: { onClicked: {
menu.popup() showInfo"修改")
}
} }
} }
}
menu.popup()
'
}
FluMenu{ FluMenu{
id:menu id:menu
@ -46,7 +83,7 @@ FluScrollablePage{
FluMenuItem{ FluMenuItem{
text:"修改" text:"修改"
onClicked: { onClicked: {
showError("修改") showInfo("修改")
} }
} }
} }

View File

@ -3,17 +3,18 @@ import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import QtQuick.Controls import QtQuick.Controls
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
property string password: ""
property var loginPageRegister: registerForPageResult("/login")
title:"MultiWindow" title:"MultiWindow"
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
property string password: ""
property var loginPageRegister: registerForPageResult("/login")
Connections{ Connections{
target: loginPageRegister target: loginPageRegister
@ -28,7 +29,6 @@ FluScrollablePage{
height: 100 height: 100
paddings: 10 paddings: 10
Layout.topMargin: 20 Layout.topMargin: 20
Column{ Column{
spacing: 15 spacing: 15
anchors{ anchors{
@ -46,6 +46,16 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluButton{
text:"点击跳转"
onClicked: {
FluApp.navigate("/about")
}
}
'
}
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -68,11 +78,30 @@ FluScrollablePage{
loginPageRegister.launch({username:"zhuzichu"}) loginPageRegister.launch({username:"zhuzichu"})
} }
} }
FluText{ FluText{
text:"登录窗口返回过来的密码->"+password text:"登录窗口返回过来的密码->"+password
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'property var loginPageRegister: registerForPageResult("/login")
Connections{
target: loginPageRegister
function onResult(data)
{
password = data.password
}
}
FluButton{
text:"点击跳转"
onClicked: {
loginPageRegister.launch({username:"zhuzichu"})
}
}
'
}
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,7 +11,7 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -46,6 +47,36 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluPivot{
anchors.fill: parent
FluPivotItem:{
text:"All"
contentItem: FluText{
text:"All emails go here."
}
}
FluPivotItem:{
text:"Unread"
contentItem: FluText{
text:"Unread emails go here."
}
}
FluPivotItem:{
text:"Flagged"
contentItem: FluText{
text:"Flagged emails go here."
}
}
FluPivotItem:{
text:"Urgent"
contentItem: FluText{
text:"Urgent emails go here."
}
}
}
'
}
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import QtQuick.Controls import QtQuick.Controls
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,30 +11,59 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluProgressBar{ FluArea{
Layout.fillWidth: true
Layout.topMargin: 20 Layout.topMargin: 20
} height: 260
FluProgressRing{ paddings: 10
Layout.topMargin: 10 ColumnLayout{
} spacing: 20
FluProgressBar{ anchors{
id:progress_bar verticalCenter: parent.verticalCenter
Layout.topMargin: 20 left: parent.left
indeterminate: false }
} FluProgressBar{
FluProgressRing{ }
id:progress_ring FluProgressRing{
Layout.topMargin: 10 }
indeterminate: false FluProgressBar{
} id:progress_bar
FluSlider{ indeterminate: false
Layout.topMargin: 30 }
value:50 FluProgressRing{
onValueChanged:{ id:progress_ring
progress_bar.progress = value/100 indeterminate: false
progress_ring.progress = value/100 }
FluSlider{
value:50
onValueChanged:{
progress_bar.progress = value/100
progress_ring.progress = value/100
}
}
} }
Layout.bottomMargin: 30
} }
CodeExpander{
Layout.fillWidth: true
code:'FluProgressBar{
}
FluProgressRing{
}
FluProgressBar{
indeterminate: false
}
FluProgressRing{
indeterminate: false
}'
}
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Window import QtQuick.Window
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,108 +11,141 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
RowLayout{ FluArea{
Layout.fillWidth: true
Layout.topMargin: 20 Layout.topMargin: 20
FluRectangle{ height: 480
width: 50 paddings: 10
height: 50
color:"#0078d4" Column{
radius:[0,0,0,0] spacing: 15
} anchors{
FluRectangle{ verticalCenter: parent.verticalCenter
width: 50 left: parent.left
height: 50 }
color:"#744da9"
radius:[15,15,15,15] RowLayout{
} Layout.topMargin: 20
FluRectangle{ FluRectangle{
width: 50 width: 50
height: 50 height: 50
color:"#ffeb3b" color:"#0078d4"
radius:[15,0,0,0] radius:[0,0,0,0]
} }
FluRectangle{ FluRectangle{
width: 50 width: 50
height: 50 height: 50
color:"#f7630c" color:"#744da9"
radius:[0,15,0,0] radius:[15,15,15,15]
} }
FluRectangle{ FluRectangle{
width: 50 width: 50
height: 50 height: 50
color:"#e71123" color:"#ffeb3b"
radius:[0,0,15,0] radius:[15,0,0,0]
} }
FluRectangle{ FluRectangle{
width: 50 width: 50
height: 50 height: 50
color:"#b4009e" color:"#f7630c"
radius:[0,0,0,15] 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)
}
}
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: 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
}
} }
} }
FluText{ CodeExpander{
text:"配合图片使用" Layout.fillWidth: true
fontStyle: FluText.SubTitle code:'FluRectangle{
Layout.topMargin: 20 radius: [25,25,25,25]
width: 50
height: 50
Image{
asynchronous: true
anchors.fill: parent
source: "qrc:/res/svg/avatar_4.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: 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

@ -26,7 +26,7 @@ FluScrollablePage{
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
code:'FluSlider{ code:'FluSlider{
value:50 value:50
}' }'
} }
@ -47,8 +47,8 @@ FluScrollablePage{
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
code:'FluSlider{ code:'FluSlider{
vertical:true vertical:true
value:50 value:50
}' }'
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,6 +11,7 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
@ -99,7 +101,7 @@ FluScrollablePage{
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 5 Layout.topMargin: 15
height: 400 height: 400
paddings: 10 paddings: 10
FluTabView{ FluTabView{
@ -109,5 +111,27 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluTabView{
anchors.fill: parent
Component.onCompleted: {
newTab()
newTab()
newTab()
}
Component{
id:com_page
Rectangle{
anchors.fill: parent
color: argument
}
}
function newTab(){
tab_view.appendTab("qrc:/res/image/favicon.ico","Document 1",com_page,argument)
}
}
'
}
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,32 +11,122 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluTextBox{ FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20 Layout.topMargin: 20
placeholderText: "单行输入框"
Layout.preferredWidth: 300 FluTextBox{
disabled:toggle_switch.selected Layout.topMargin: 20
placeholderText: "单行输入框"
Layout.preferredWidth: 300
disabled:text_box_switch.selected
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:text_box_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
} }
FluMultilineTextBox{ CodeExpander{
Layout.topMargin: 20 Layout.fillWidth: true
Layout.preferredWidth: 300 code:'FluTextBox{
placeholderText: "多行输入框" placeholderText:"单行输入框"
disabled:toggle_switch.selected }'
}
FluAutoSuggestBox{
Layout.topMargin: 20
items:generateRandomNames(100)
placeholderText: "AutoSuggestBox"
Layout.preferredWidth: 300
disabled:toggle_switch.selected
} }
FluToggleSwitch{
id:toggle_switch FluArea{
text:"Disabled" Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20 Layout.topMargin: 20
FluMultilineTextBox{
Layout.topMargin: 20
placeholderText: "多行输入框"
Layout.preferredWidth: 300
disabled:text_box_multi_switch.selected
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:text_box_multi_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
} }
CodeExpander{
Layout.fillWidth: true
code:'FluMultilineTextBox{
placeholderText:"多行输入框"
}'
}
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluAutoSuggestBox{
Layout.topMargin: 20
placeholderText: "AutoSuggestBox"
Layout.preferredWidth: 300
items:generateRandomNames(100)
disabled:text_box_suggest_switch.selected
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:text_box_suggest_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluAutoSuggestBox{
placeholderText:"AutoSuggestBox"
}'
}
function generateRandomNames(numNames) { function generateRandomNames(numNames) {
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import QtQuick.Controls import QtQuick.Controls
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,52 +11,78 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
RowLayout{ FluArea{
Layout.fillWidth: true
Layout.topMargin: 20 Layout.topMargin: 20
Repeater{ height: 210
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] paddings: 10
delegate: FluRectangle{ ColumnLayout{
width: 42 spacing:0
height: 42 anchors{
radius: [4,4,4,4] left: parent.left
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal }
FluIcon { RowLayout{
anchors.centerIn: parent Layout.topMargin: 10
iconSource: FluentIcons.AcceptMedium Repeater{
iconSize: 15 model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
visible: modelData === FluTheme.primaryColor delegate: FluRectangle{
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) width: 42
} height: 42
MouseArea{ radius: [4,4,4,4]
id:mouse_item color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
anchors.fill: parent FluIcon {
hoverEnabled: true anchors.centerIn: parent
onClicked: { iconSource: FluentIcons.AcceptMedium
FluTheme.primaryColor = modelData iconSize: 15
visible: modelData === FluTheme.primaryColor
color: FluTheme.dark ? 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
}
}
} }
} }
} }
FluText{
text:"夜间模式"
Layout.topMargin: 20
}
FluToggleSwitch{
Layout.topMargin: 5
selected: FluTheme.dark
clickFunc:function(){
FluTheme.dark = !FluTheme.dark
}
}
FluText{
text:"native文本渲染"
Layout.topMargin: 20
}
FluToggleSwitch{
Layout.topMargin: 5
selected: FluTheme.nativeText
clickFunc:function(){
FluTheme.nativeText = !FluTheme.nativeText
}
}
} }
} }
FluText{ CodeExpander{
text:"夜间模式" Layout.fillWidth: true
Layout.topMargin: 20 code:'FluTheme.primaryColor = FluColors.Orange
}
FluToggleSwitch{ FluTheme.dark = true
selected: FluTheme.dark
clickFunc:function(){ FluTheme.nativeText = true
FluTheme.dark = !FluTheme.dark '
}
}
FluText{
text:"native文本渲染"
Layout.topMargin: 20
}
FluToggleSwitch{
selected: FluTheme.nativeText
clickFunc:function(){
FluTheme.nativeText = !FluTheme.nativeText
}
} }
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,6 +11,7 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -33,7 +35,12 @@ FluScrollablePage{
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluTimePicker{
}'
}
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -49,15 +56,20 @@ FluScrollablePage{
} }
FluText{ FluText{
text:"hourFormat=FluTimePicker.HH" text:"hourFormat=FluTimePicker.H"
} }
FluTimePicker{ FluTimePicker{
hourFormat:FluTimePicker.HH hourFormat:FluTimePicker.HH
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluTimePicker{
hourFormat:FluTimePicker.HH
}'
}
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import QtQuick.Controls import QtQuick.Controls
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,12 +11,29 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluToggleSwitch{ FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20 Layout.topMargin: 20
Row{
spacing: 30
anchors.verticalCenter: parent.verticalCenter
FluToggleSwitch{
}
FluToggleSwitch{
text:"Text"
}
}
} }
FluToggleSwitch{ CodeExpander{
Layout.topMargin: 20 Layout.fillWidth: true
text:"Text" code:'FluToggleSwitch{
text:"Text"
}'
} }
} }

View File

@ -3,6 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import FluentUI import FluentUI
import "./component"
FluScrollablePage{ FluScrollablePage{
@ -10,13 +11,13 @@ FluScrollablePage{
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
FluText{ FluText{
Layout.topMargin: 20 Layout.topMargin: 20
text:"鼠标悬停不动弹出Tooltip" text:"鼠标悬停不动弹出Tooltip"
} }
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 20 Layout.topMargin: 20
@ -42,6 +43,18 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast
iconSize: 15
text:"删除"
onClicked:{
showSuccess("点击IconButton")
}
}
'
}
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
@ -72,6 +85,22 @@ FluScrollablePage{
} }
} }
} }
CodeExpander{
Layout.fillWidth: true
code:'FluButton{
id:button_1
text:"删除"
FluTooltip{
visible: button_1.hovered
text:button_1.text
delay: 1000
}
onClicked:{
showSuccess("点击一个Button")
}
}
'
}
} }

View File

@ -3,13 +3,15 @@ import QtQuick.Layouts
import QtQuick.Window import QtQuick.Window
import QtQuick.Controls import QtQuick.Controls
import FluentUI import FluentUI
import "./component"
FluContentPage { FluScrollablePage {
title:"TreeView" title:"TreeView"
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
spacing: 0
function randomName() { function randomName() {
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"] var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
@ -50,95 +52,110 @@ FluContentPage {
return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees)) return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
} }
FluArea{
FluTreeView{ id:layout_actions
id:tree_view Layout.fillWidth: true
width:240 Layout.topMargin: 20
anchors{ height: 50
top:parent.top paddings: 10
left:parent.left RowLayout{
bottom:parent.bottom spacing: 14
} FluDropDownButton{
onItemClicked: id:btn_selection_model
(model)=>{ Layout.preferredWidth: 140
showSuccess(model.text) text:"None"
items:[
FluMenuItem{
text:"None"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.Equal
}
},
FluMenuItem{
text:"Single"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.SizeToContent
}
},
FluMenuItem{
text:"Muiltple"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.Compact
}
}
]
}
FluFilledButton{
text:"获取选中的数据"
onClicked: {
if(tree_view.selectionMode === FluTreeView.None){
showError("当前非选择模式,没有选中的数据")
}
if(tree_view.selectionMode === FluTreeView.Single){
if(!tree_view.signleData()){
showError("没有选中数据")
return
}
showSuccess(tree_view.signleData().text)
}
if(tree_view.selectionMode === FluTreeView.Multiple){
if(tree_view.multipData().length===0){
showError("没有选中数据")
return
}
var info = []
tree_view.multipData().map((value)=>info.push(value.text))
showSuccess(info.join(","))
}
}
} }
Component.onCompleted: {
var org = createOrg(3, 3, 3)
updateData(org)
} }
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 10
paddings: 10
height: 400
FluTreeView{
id:tree_view
width:240
anchors{
top:parent.top
left:parent.left
bottom:parent.bottom
}
onItemClicked:
(model)=>{
showSuccess(model.text)
}
Component.onCompleted: {
var org = createOrg(3, 3, 3)
createItem()
updateData(org)
}
}
} }
CodeExpander{
ColumnLayout{ Layout.fillWidth: true
anchors{ code:'FluTreeView{
left: tree_view.right id:tree_view
right: parent.right width:240
top: parent.top height:600
} Component.onCompleted: {
var datas = []
FluText{ datas.push(createItem("Node1",false))
text:{ datas.push(createItem("Node2",false))
if(tree_view.selectionMode === FluTreeView.None){ datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)]))
return "selectionMode->FluTreeView.None" updateData(datas)
}
if(tree_view.selectionMode === FluTreeView.Single){
return "selectionMode->FluTreeView.Single"
}
if(tree_view.selectionMode === FluTreeView.Multiple){
return "selectionMode->FluTreeView.Multiple"
}
}
}
FluButton{
text:"None"
onClicked: {
tree_view.selectionMode = FluTreeView.None
}
}
FluButton{
text:"Single"
onClicked: {
tree_view.selectionMode = FluTreeView.Single
}
}
FluButton{
text:"Multiple"
onClicked: {
tree_view.selectionMode = FluTreeView.Multiple
}
}
FluFilledButton{
text:"获取选中的数据"
onClicked: {
if(tree_view.selectionMode === FluTreeView.None){
showError("当前非选择模式,没有选中的数据")
}
if(tree_view.selectionMode === FluTreeView.Single){
if(!tree_view.signleData()){
showError("没有选中数据")
return
}
showSuccess(tree_view.signleData().text)
}
if(tree_view.selectionMode === FluTreeView.Multiple){
if(tree_view.multipData().length===0){
showError("没有选中数据")
return
}
var info = []
tree_view.multipData().map((value)=>info.push(value.text))
showSuccess(info.join(","))
}
}
}
} }
} }
'
}
}

View File

@ -15,15 +15,19 @@ FluContentPage {
slider.seek(0) slider.seek(0)
} }
ScrollView{ FluArea{
clip: true anchors{
width: parent.width top:parent.top
contentWidth: parent.width left: parent.left
right: parent.right
bottom: parent.bottom
topMargin: 20
}
paddings: 10
ColumnLayout{ ColumnLayout{
spacing: 0 spacing: 0
FluText{ FluText{
text:"Display" text:"Display"
Layout.topMargin: 20
padding: 0 padding: 0
pixelSize: textSize pixelSize: textSize
fontStyle: FluText.Display fontStyle: FluText.Display
@ -65,21 +69,26 @@ FluContentPage {
fontStyle: FluText.Caption fontStyle: FluText.Caption
} }
} }
FluSlider{
id:slider
vertical:true
anchors{
right: parent.right
rightMargin: 45
top: parent.top
topMargin: 30
}
onValueChanged:{
textSize = value/100*6+FluTheme.textSize
}
}
} }
FluSlider{
id:slider
vertical:true
anchors{
right: parent.right
rightMargin: 45
top: parent.top
topMargin: 30
}
onValueChanged:{
textSize = value/100*6+FluTheme.textSize
}
}
} }

View File

@ -16,8 +16,13 @@ FluExpander{
width:parent.width width:parent.width
readOnly:true readOnly:true
text:code text:code
focus:false
KeyNavigation.priority: KeyNavigation.BeforeItem
background:Rectangle{ background:Rectangle{
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97) radius: 4
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.width: 1
} }
} }

View File

@ -3,7 +3,6 @@
import QtQuick import QtQuick
import FluentUI import FluentUI
FluObject{ FluObject{
property var navigationView property var navigationView
@ -19,7 +18,6 @@ FluObject{
FluPaneItemExpander{ FluPaneItemExpander{
title:"Basic input" title:"Basic input"
icon:FluentIcons.CheckboxComposite icon:FluentIcons.CheckboxComposite
FluPaneItem{ FluPaneItem{
title:"Buttons" title:"Buttons"
image:"qrc:/res/image/control/Button.png" image:"qrc:/res/image/control/Button.png"
@ -38,7 +36,6 @@ FluObject{
navigationView.push("qrc:/T_Slider.qml") navigationView.push("qrc:/T_Slider.qml")
} }
} }
FluPaneItem{ FluPaneItem{
title:"CheckBox" title:"CheckBox"
image:"qrc:/res/image/control/Checkbox.png" image:"qrc:/res/image/control/Checkbox.png"
@ -48,7 +45,6 @@ FluObject{
navigationView.push("qrc:/T_CheckBox.qml") navigationView.push("qrc:/T_CheckBox.qml")
} }
} }
FluPaneItem{ FluPaneItem{
title:"ToggleSwitch" title:"ToggleSwitch"
onTap:{ onTap:{
@ -92,11 +88,9 @@ FluObject{
} }
} }
FluPaneItemExpander{ FluPaneItemExpander{
title:"Surface" title:"Surface"
icon:FluentIcons.SurfaceHub icon:FluentIcons.SurfaceHub
FluPaneItem{ FluPaneItem{
title:"InfoBar" title:"InfoBar"
image:"qrc:/res/image/control/InfoBar.png" image:"qrc:/res/image/control/InfoBar.png"
@ -106,42 +100,36 @@ FluObject{
navigationView.push("qrc:/T_InfoBar.qml") navigationView.push("qrc:/T_InfoBar.qml")
} }
} }
FluPaneItem{ FluPaneItem{
title:"Progress" title:"Progress"
onTap:{ onTap:{
navigationView.push("qrc:/T_Progress.qml") navigationView.push("qrc:/T_Progress.qml")
} }
} }
FluPaneItem{ FluPaneItem{
title:"Badge" title:"Badge"
onTap:{ onTap:{
navigationView.push("qrc:/T_Badge.qml") navigationView.push("qrc:/T_Badge.qml")
} }
} }
FluPaneItem{ FluPaneItem{
title:"Rectangle" title:"Rectangle"
onTap:{ onTap:{
navigationView.push("qrc:/T_Rectangle.qml") navigationView.push("qrc:/T_Rectangle.qml")
} }
} }
FluPaneItem{ FluPaneItem{
title:"Carousel" title:"Carousel"
onTap:{ onTap:{
navigationView.push("qrc:/T_Carousel.qml") navigationView.push("qrc:/T_Carousel.qml")
} }
} }
FluPaneItem{ FluPaneItem{
title:"Expander" title:"Expander"
onTap:{ onTap:{
navigationView.push("qrc:/T_Expander.qml") navigationView.push("qrc:/T_Expander.qml")
} }
} }
} }
FluPaneItemExpander{ FluPaneItemExpander{
@ -153,14 +141,12 @@ FluObject{
navigationView.push("qrc:/T_Dialog.qml") navigationView.push("qrc:/T_Dialog.qml")
} }
} }
FluPaneItem{ FluPaneItem{
title:"Tooltip" title:"Tooltip"
onTap:{ onTap:{
navigationView.push("qrc:/T_Tooltip.qml") navigationView.push("qrc:/T_Tooltip.qml")
} }
} }
FluPaneItem{ FluPaneItem{
title:"Menu" title:"Menu"
onTap:{ onTap:{
@ -172,7 +158,6 @@ FluObject{
FluPaneItemExpander{ FluPaneItemExpander{
title:"Navigation" title:"Navigation"
icon:FluentIcons.AllApps icon:FluentIcons.AllApps
FluPaneItem{ FluPaneItem{
title:"Pivot" title:"Pivot"
image:"qrc:/res/image/control/Pivot.png" image:"qrc:/res/image/control/Pivot.png"
@ -226,19 +211,18 @@ FluObject{
navigationView.push("qrc:/T_Theme.qml") navigationView.push("qrc:/T_Theme.qml")
} }
} }
FluPaneItem{
title:"Awesome"
onTap:{
navigationView.push("qrc:/T_Awesome.qml")
}
}
FluPaneItem{ FluPaneItem{
title:"Typography" title:"Typography"
onTap:{ onTap:{
navigationView.push("qrc:/T_Typography.qml") navigationView.push("qrc:/T_Typography.qml")
} }
} }
FluPaneItem{
title:"Awesome"
onTap:{
navigationView.push("qrc:/T_Awesome.qml")
}
}
} }
FluPaneItemExpander{ FluPaneItemExpander{