mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-07-02 08:05:29 +08:00
Qt5.15.2 compatible
This commit is contained in:
zhuzichu
114
example/qml-Qt6/page/T_Acrylic.qml
Normal file
114
example/qml-Qt6/page/T_Acrylic.qml
Normal file
@ -0,0 +1,114 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Acrylic"
|
||||
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
Layout.topMargin: 20
|
||||
FluText{
|
||||
text:"tintColor:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluColorPicker{
|
||||
id:color_picker
|
||||
}
|
||||
}
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"tintOpacity:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id:slider_tint_opacity
|
||||
value: 65
|
||||
}
|
||||
}
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"blurRadius:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id:slider_blur_radius
|
||||
value: 32
|
||||
}
|
||||
}
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 1200/4+20
|
||||
paddings: 10
|
||||
Layout.topMargin: 10
|
||||
FluRectangle{
|
||||
width: 1920/4
|
||||
height: 1200/4
|
||||
radius:[15,15,15,15]
|
||||
Image {
|
||||
id:image
|
||||
asynchronous: true
|
||||
source: "qrc:/example/res/image/bg_scenic.png"
|
||||
anchors.fill: parent
|
||||
sourceSize: Qt.size(2*width,2*height)
|
||||
}
|
||||
FluAcrylic {
|
||||
id:acrylic
|
||||
target: image
|
||||
width: 200
|
||||
height: 200
|
||||
tintOpacity: slider_tint_opacity.value/100
|
||||
tintColor: color_picker.colorValue
|
||||
blurRadius: slider_blur_radius.value
|
||||
x:(image.width-width)/2
|
||||
y:(image.height-height)/2
|
||||
FluText {
|
||||
anchors.centerIn: parent
|
||||
text: "Acrylic"
|
||||
color: "#FFFFFF"
|
||||
font.bold: true
|
||||
}
|
||||
MouseArea {
|
||||
property point clickPos: Qt.point(0,0)
|
||||
id:drag_area
|
||||
anchors.fill: parent
|
||||
onPressed: (mouse)=>{
|
||||
clickPos = Qt.point(mouse.x, mouse.y)
|
||||
}
|
||||
onPositionChanged: (mouse)=>{
|
||||
var delta = Qt.point(mouse.x - clickPos.x,mouse.y - clickPos.y)
|
||||
acrylic.x = acrylic.x + delta.x
|
||||
acrylic.y = acrylic.y + delta.y
|
||||
}
|
||||
}
|
||||
}
|
||||
Layout.topMargin: 20
|
||||
}
|
||||
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'Image{
|
||||
id:image
|
||||
width: 800
|
||||
height: 600
|
||||
source: "qrc:/example/res/image/image_huoyin.webp"
|
||||
radius: 8
|
||||
}
|
||||
FluAcrylic{
|
||||
target:image
|
||||
width: 100
|
||||
height: 100
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
71
example/qml-Qt6/page/T_Awesome.qml
Normal file
71
example/qml-Qt6/page/T_Awesome.qml
Normal file
@ -0,0 +1,71 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
|
||||
FluContentPage {
|
||||
|
||||
title:"Awesome"
|
||||
|
||||
FluTextBox{
|
||||
id:text_box
|
||||
placeholderText: "请输入关键字"
|
||||
anchors{
|
||||
topMargin: 20
|
||||
top:parent.top
|
||||
}
|
||||
}
|
||||
|
||||
FluFilledButton{
|
||||
text:"搜索"
|
||||
anchors{
|
||||
left: text_box.right
|
||||
verticalCenter: text_box.verticalCenter
|
||||
leftMargin: 14
|
||||
}
|
||||
onClicked: {
|
||||
grid_view.model = FluApp.awesomelist(text_box.text)
|
||||
}
|
||||
}
|
||||
GridView{
|
||||
id:grid_view
|
||||
cellWidth: 80
|
||||
cellHeight: 80
|
||||
clip: true
|
||||
boundsBehavior: GridView.StopAtBounds
|
||||
model:FluApp.awesomelist()
|
||||
ScrollBar.vertical: FluScrollBar {}
|
||||
anchors{
|
||||
topMargin: 10
|
||||
top:text_box.bottom
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
}
|
||||
delegate: Item {
|
||||
width: 68
|
||||
height: 80
|
||||
FluIconButton{
|
||||
id:item_icon
|
||||
iconSource:modelData.icon
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
onClicked: {
|
||||
var text ="FluentIcons."+modelData.name;
|
||||
FluTools.clipText(text)
|
||||
showSuccess("您复制了 "+text)
|
||||
}
|
||||
}
|
||||
FluText {
|
||||
id:item_name
|
||||
font.pixelSize: 10
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: item_icon.bottom
|
||||
width:parent.width
|
||||
wrapMode: Text.WrapAnywhere
|
||||
text: modelData.name
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
129
example/qml-Qt6/page/T_Badge.qml
Normal file
129
example/qml-Qt6/page/T_Badge.qml
Normal file
@ -0,0 +1,129 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Badge"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 106
|
||||
paddings: 10
|
||||
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数"
|
||||
}
|
||||
|
||||
Row{
|
||||
spacing: 20
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
showZero: true
|
||||
count:0
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
showZero: true
|
||||
count:5
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
showZero: true
|
||||
count:50
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
showZero: true
|
||||
count:100
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
showZero: true
|
||||
isDot:true
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
showZero: true
|
||||
count:99
|
||||
color: Qt.rgba(250/255,173/255,20/255,1)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
topRight: true
|
||||
showZero: true
|
||||
count:99
|
||||
color: Qt.rgba(82/255,196/255,26/255,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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)
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
94
example/qml-Qt6/page/T_BreadcrumbBar.qml
Normal file
94
example/qml-Qt6/page/T_BreadcrumbBar.qml
Normal file
@ -0,0 +1,94 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"BreadcurmbBar"
|
||||
|
||||
Component.onCompleted: {
|
||||
var items = []
|
||||
for(var i=0;i<10;i++){
|
||||
items.push({title:"Item_"+(i+1)})
|
||||
}
|
||||
breadcrumb_1.items = items
|
||||
breadcrumb_2.items = items
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluBreadcrumbBar{
|
||||
id:breadcrumb_1
|
||||
width:parent.width
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
onClickItem:
|
||||
(model)=>{
|
||||
showSuccess(model.title)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
ColumnLayout{
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width:parent.width
|
||||
spacing: 10
|
||||
|
||||
FluFilledButton{
|
||||
text:"Reset sample"
|
||||
onClicked:{
|
||||
var items = []
|
||||
for(var i=0;i<10;i++){
|
||||
items.push({title:"Item_"+(i+1)})
|
||||
}
|
||||
breadcrumb_2.items = items
|
||||
}
|
||||
}
|
||||
|
||||
FluBreadcrumbBar{
|
||||
id:breadcrumb_2
|
||||
separator:">"
|
||||
spacing:8
|
||||
textSize:18
|
||||
Layout.fillWidth: true
|
||||
onClickItem:
|
||||
(model)=>{
|
||||
//不是点击最后一个item元素
|
||||
if(model.index+1!==count()){
|
||||
breadcrumb_2.remove(model.index+1,count()-model.index-1)
|
||||
}
|
||||
showSuccess(model.title)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluBreadcrumbBar{
|
||||
width:parent.width
|
||||
separator:">"
|
||||
spacing:8
|
||||
textSize:18
|
||||
onClickItem: (model)=>{
|
||||
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
348
example/qml-Qt6/page/T_Buttons.qml
Normal file
348
example/qml-Qt6/page/T_Buttons.qml
Normal file
@ -0,0 +1,348 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Controls.Basic
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Buttons"
|
||||
|
||||
FluText{
|
||||
Layout.topMargin: 20
|
||||
text:"支持Tab键切换焦点，空格键执行点击事件"
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluTextButton{
|
||||
disabled:text_button_switch.checked
|
||||
text:"Text Button"
|
||||
contentDescription: "文本按钮"
|
||||
onClicked: {
|
||||
showInfo("点击Text Button")
|
||||
}
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:text_button_switch
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTextButton{
|
||||
text:"Text Button"
|
||||
onClicked: {
|
||||
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluButton{
|
||||
disabled:button_switch.checked
|
||||
text:"Standard Button"
|
||||
onClicked: {
|
||||
showInfo("点击StandardButton")
|
||||
}
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:button_switch
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluButton{
|
||||
text:"Standard Button"
|
||||
onClicked: {
|
||||
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
Layout.topMargin: 20
|
||||
paddings: 10
|
||||
|
||||
FluFilledButton{
|
||||
disabled:filled_button_switch.checked
|
||||
text:"Filled Button"
|
||||
onClicked: {
|
||||
showWarning("点击FilledButton"+height)
|
||||
}
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:filled_button_switch
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluFilledButton{
|
||||
text:"Filled Button"
|
||||
onClicked: {
|
||||
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
Layout.topMargin: 20
|
||||
paddings: 10
|
||||
|
||||
FluToggleButton{
|
||||
disabled:toggle_button_switch.checked
|
||||
text:"Toggle Button"
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:toggle_button_switch
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluToggleButton{
|
||||
text:"Toggle Button"
|
||||
onClicked: {
|
||||
checked = !checked
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: layout_icon_button.height + 30
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Flow{
|
||||
id:layout_icon_button
|
||||
spacing: 10
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
right: icon_button_switch.left
|
||||
}
|
||||
FluIconButton{
|
||||
disabled:icon_button_switch.checked
|
||||
iconDelegate: Image{ sourceSize: Qt.size(40,40) ; width: 20; height: 20; source: "qrc:/example/res/image/ic_home_github.png" }
|
||||
onClicked:{
|
||||
showSuccess("点击IconButton")
|
||||
}
|
||||
}
|
||||
FluIconButton{
|
||||
iconSource:FluentIcons.ChromeCloseContrast
|
||||
disabled:icon_button_switch.checked
|
||||
iconSize: 15
|
||||
text:"IconOnly"
|
||||
display: Button.IconOnly
|
||||
onClicked:{
|
||||
showSuccess("Button.IconOnly")
|
||||
}
|
||||
}
|
||||
FluIconButton{
|
||||
iconSource:FluentIcons.ChromeCloseContrast
|
||||
disabled:icon_button_switch.checked
|
||||
iconSize: 15
|
||||
text:"TextOnly"
|
||||
display: Button.TextOnly
|
||||
onClicked:{
|
||||
showSuccess("Button.TextOnly")
|
||||
}
|
||||
}
|
||||
FluIconButton{
|
||||
iconSource:FluentIcons.ChromeCloseContrast
|
||||
disabled:icon_button_switch.checked
|
||||
iconSize: 15
|
||||
text:"TextBesideIcon"
|
||||
display: Button.TextBesideIcon
|
||||
onClicked:{
|
||||
showSuccess("Button.TextBesideIcon")
|
||||
}
|
||||
}
|
||||
FluIconButton{
|
||||
iconSource:FluentIcons.ChromeCloseContrast
|
||||
disabled:icon_button_switch.checked
|
||||
iconSize: 15
|
||||
text:"TextUnderIcon"
|
||||
display: Button.TextUnderIcon
|
||||
onClicked:{
|
||||
showSuccess("Button.TextUnderIcon")
|
||||
}
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:icon_button_switch
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluIconButton{
|
||||
iconSource:FluentIcons.ChromeCloseContrast
|
||||
onClicked: {
|
||||
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluDropDownButton{
|
||||
disabled:drop_down_button_switch.checked
|
||||
text:"DropDownButton"
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Menu_1"
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Menu_2"
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Menu_3"
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Menu_4"
|
||||
onClicked: {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:drop_down_button_switch
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluDropDownButton{
|
||||
text:"DropDownButton"
|
||||
FluMenuItem{
|
||||
text:"Menu_1"
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Menu_2"
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Menu_3"
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Menu_4"
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluRadioButtons{
|
||||
spacing: 8
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled:radio_button_switch.checked
|
||||
text:"Radio Button_1"
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled:radio_button_switch.checked
|
||||
text:"Radio Button_2"
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled:radio_button_switch.checked
|
||||
text:"Radio Button_3"
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:radio_button_switch
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluRadioButton{
|
||||
checked:true
|
||||
text:"Text Button"
|
||||
onClicked: {
|
||||
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
50
example/qml-Qt6/page/T_CalendarPicker.qml
Normal file
50
example/qml-Qt6/page/T_CalendarPicker.qml
Normal file
@ -0,0 +1,50 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"CalendarPicker"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 350
|
||||
paddings: 10
|
||||
FluCalendarView{
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluCalendarView{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 80
|
||||
paddings: 10
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluCalendarPicker{
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluCalendarPicker{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
54
example/qml-Qt6/page/T_Captcha.qml
Normal file
54
example/qml-Qt6/page/T_Captcha.qml
Normal file
@ -0,0 +1,54 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Captcha"
|
||||
|
||||
|
||||
FluCaptcha{
|
||||
id:captcha
|
||||
Layout.topMargin: 20
|
||||
MouseArea{
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
captcha.refresh()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluButton{
|
||||
text:"Refresh"
|
||||
Layout.topMargin: 20
|
||||
onClicked: {
|
||||
captcha.refresh()
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
Layout.topMargin: 10
|
||||
FluTextBox{
|
||||
id:text_box
|
||||
placeholderText: "请输入验证码"
|
||||
}
|
||||
FluButton{
|
||||
text:"verify"
|
||||
onClicked: {
|
||||
var success = captcha.verify(text_box.text)
|
||||
if(success){
|
||||
showSuccess("验证码正确")
|
||||
}else{
|
||||
showError("错误验证，请重新输入")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
132
example/qml-Qt6/page/T_Carousel.qml
Normal file
132
example/qml-Qt6/page/T_Carousel.qml
Normal file
@ -0,0 +1,132 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Carousel"
|
||||
|
||||
ListModel{
|
||||
id:data_model
|
||||
ListElement{
|
||||
url:"qrc:/example/res/image/banner_1.jpg"
|
||||
}
|
||||
ListElement{
|
||||
url:"qrc:/example/res/image/banner_2.jpg"
|
||||
}
|
||||
ListElement{
|
||||
url:"qrc:/example/res/image/banner_3.jpg"
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 370
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
|
||||
}
|
||||
FluCarousel{
|
||||
radius:[5,5,5,5]
|
||||
delegate: Component{
|
||||
Image {
|
||||
anchors.fill: parent
|
||||
source: model.url
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
}
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 5
|
||||
Component.onCompleted: {
|
||||
model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 340
|
||||
paddings: 10
|
||||
Layout.topMargin: 10
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
FluCarousel{
|
||||
radius:[15,15,15,15]
|
||||
loopTime:1500
|
||||
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
|
||||
indicatorMarginTop:15
|
||||
delegate: Component{
|
||||
Item{
|
||||
anchors.fill: parent
|
||||
Image {
|
||||
anchors.fill: parent
|
||||
source: model.url
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Rectangle{
|
||||
height: 40
|
||||
width: parent.width
|
||||
anchors.bottom: parent.bottom
|
||||
color: "#33000000"
|
||||
FluText{
|
||||
anchors.fill: parent
|
||||
verticalAlignment: Qt.AlignVCenter
|
||||
horizontalAlignment: Qt.AlignHCenter
|
||||
text:model.title
|
||||
color: FluColors.Grey10
|
||||
font.pixelSize: 15
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 5
|
||||
Component.onCompleted: {
|
||||
var arr = []
|
||||
arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
|
||||
arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
|
||||
arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
|
||||
model = arr
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluCarousel{
|
||||
id:carousel
|
||||
width: 400
|
||||
height: 300
|
||||
delegate: Component{
|
||||
Image {
|
||||
anchors.fill: parent
|
||||
source: model.url
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
}
|
||||
Component.onCompleted: {
|
||||
carousel.model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
|
||||
}
|
||||
}'
|
||||
}
|
||||
}
|
||||
331
example/qml-Qt6/page/T_Chart.qml
Normal file
331
example/qml-Qt6/page/T_Chart.qml
Normal file
@ -0,0 +1,331 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Chart"
|
||||
|
||||
function randomScalingFactor() {
|
||||
return Math.random().toFixed(1);
|
||||
}
|
||||
|
||||
FluArea{
|
||||
height: 370
|
||||
width: 500
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluChart{
|
||||
anchors.fill: parent
|
||||
chartType: 'scatter'
|
||||
chartData: {
|
||||
return {
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
xAxisID: 'x-axis-1',
|
||||
yAxisID: 'y-axis-1',
|
||||
borderColor: '#ff5555',
|
||||
backgroundColor: 'rgba(255,192,192,0.3)',
|
||||
data: [{
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}]
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
xAxisID: 'x-axis-1',
|
||||
yAxisID: 'y-axis-2',
|
||||
borderColor: '#5555ff',
|
||||
backgroundColor: 'rgba(192,192,255,0.3)',
|
||||
data: [{
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}]
|
||||
}]
|
||||
}}
|
||||
chartOptions: {return {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
hoverMode: 'nearest',
|
||||
intersect: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Scatter Chart - Multi Axis'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
position: 'bottom',
|
||||
gridLines: {
|
||||
zeroLineColor: 'rgba(0,0,0,1)'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
||||
display: true,
|
||||
position: 'left',
|
||||
id: 'y-axis-1',
|
||||
}, {
|
||||
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
||||
display: true,
|
||||
position: 'right',
|
||||
reverse: true,
|
||||
id: 'y-axis-2',
|
||||
|
||||
// grid line settings
|
||||
gridLines: {
|
||||
drawOnChartArea: false, // only want the grid lines for one axis to show up
|
||||
},
|
||||
}],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
width: 500
|
||||
height: 370
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluChart{
|
||||
anchors.fill: parent
|
||||
chartType: 'bar'
|
||||
chartData: { return {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Dataset 1',
|
||||
backgroundColor: '#ff9999',
|
||||
stack: 'Stack 0',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'Dataset 2',
|
||||
backgroundColor: '#9999ff',
|
||||
stack: 'Stack 0',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'Dataset 3',
|
||||
backgroundColor: '#99ff99',
|
||||
stack: 'Stack 1',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
chartOptions: { return {
|
||||
maintainAspectRatio: false,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Bar Chart - Stacked'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
stacked: true,
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: true
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
width: 500
|
||||
height: 370
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluChart{
|
||||
anchors.fill: parent
|
||||
chartType: 'pie'
|
||||
chartData: {return {
|
||||
datasets: [{
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
],
|
||||
backgroundColor: [
|
||||
'#ffbbbb',
|
||||
'#ffddaa',
|
||||
'#ffffbb',
|
||||
'#bbffbb',
|
||||
'#bbbbff'
|
||||
],
|
||||
label: 'Dataset 1'
|
||||
}],
|
||||
labels: [
|
||||
'Red',
|
||||
'Orange',
|
||||
'Yellow',
|
||||
'Green',
|
||||
'Blue'
|
||||
]
|
||||
}}
|
||||
chartOptions: {return {maintainAspectRatio: false, responsive: true}}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
width: 500
|
||||
height: 370
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluChart{
|
||||
anchors.fill: parent
|
||||
chartType: 'line'
|
||||
chartData: { return {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Filled',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(192,222,255,0.3)',
|
||||
borderColor: 'rgba(128,192,255,255)',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'Dashed',
|
||||
fill: false,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderColor: '#009900',
|
||||
borderDash: [5, 5],
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'Filled',
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderColor: '#990000',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
fill: false,
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
chartOptions: {return {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: 'nearest',
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
50
example/qml-Qt6/page/T_CheckBox.qml
Normal file
50
example/qml-Qt6/page/T_CheckBox.qml
Normal file
@ -0,0 +1,50 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"CheckBox"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Row{
|
||||
spacing: 30
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluCheckBox{
|
||||
disabled: check_box_switch.checked
|
||||
}
|
||||
FluCheckBox{
|
||||
disabled: check_box_switch.checked
|
||||
text:"Right"
|
||||
}
|
||||
FluCheckBox{
|
||||
disabled: check_box_switch.checked
|
||||
text:"Left"
|
||||
textRight: false
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:check_box_switch
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluCheckBox{
|
||||
text:"Text"
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
69
example/qml-Qt6/page/T_ColorPicker.qml
Normal file
69
example/qml-Qt6/page/T_ColorPicker.qml
Normal file
@ -0,0 +1,69 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"ColorPicker"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 280
|
||||
Layout.topMargin: 20
|
||||
paddings: 10
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"此颜色组件是Github上的开源项目"
|
||||
}
|
||||
FluTextButton{
|
||||
text:"https://github.com/rshest/qml-colorpicker"
|
||||
onClicked: {
|
||||
Qt.openUrlExternally(text)
|
||||
}
|
||||
}
|
||||
FluColorView{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluColorView{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 60
|
||||
paddings: 10
|
||||
|
||||
RowLayout{
|
||||
FluText{
|
||||
text:"点击选择颜色->"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluColorPicker{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluColorPicker{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
81
example/qml-Qt6/page/T_ComboBox.qml
Normal file
81
example/qml-Qt6/page/T_ComboBox.qml
Normal file
@ -0,0 +1,81 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"ComboBox"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 80
|
||||
paddings: 5
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
spacing: 5
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluText{
|
||||
text: "editable=false"
|
||||
x:10
|
||||
}
|
||||
FluComboBox {
|
||||
model: ListModel {
|
||||
id: model_1
|
||||
ListElement { text: "Banana" }
|
||||
ListElement { text: "Apple" }
|
||||
ListElement { text: "Coconut" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 80
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
spacing: 5
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluText{
|
||||
text: "editable=true"
|
||||
x:5
|
||||
}
|
||||
FluComboBox {
|
||||
editable: true
|
||||
font:FluTextStyle.BodyStrong
|
||||
model: ListModel {
|
||||
id: model_2
|
||||
ListElement { text: "Banana" }
|
||||
ListElement { text: "Apple" }
|
||||
ListElement { text: "Coconut" }
|
||||
}
|
||||
onAccepted: {
|
||||
if (find(editText) === -1)
|
||||
model_2.append({text: editText})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluComboBox{
|
||||
editable: true
|
||||
model: ListModel {
|
||||
id: model
|
||||
ListElement { text: "Banana" }
|
||||
ListElement { text: "Apple" }
|
||||
ListElement { text: "Coconut" }
|
||||
}
|
||||
onAccepted: {
|
||||
if (find(editText) === -1)
|
||||
model.append({text: editText})
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
70
example/qml-Qt6/page/T_DatePicker.qml
Normal file
70
example/qml-Qt6/page/T_DatePicker.qml
Normal file
@ -0,0 +1,70 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"TimePicker"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 80
|
||||
paddings: 10
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"showYear=true"
|
||||
}
|
||||
FluDatePicker{
|
||||
onCurrentChanged: {
|
||||
showSuccess(current.toLocaleDateString())
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluDatePicker{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 80
|
||||
paddings: 10
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"showYear=false"
|
||||
}
|
||||
|
||||
FluDatePicker{
|
||||
showYear:false
|
||||
onCurrentChanged: {
|
||||
showSuccess(current.toLocaleDateString())
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluDatePicker{
|
||||
showYear:false
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
118
example/qml-Qt6/page/T_Dialog.qml
Normal file
118
example/qml-Qt6/page/T_Dialog.qml
Normal file
@ -0,0 +1,118 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Dialog"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluButton{
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
Layout.topMargin: 20
|
||||
text:"Show Double Button Dialog"
|
||||
onClicked: {
|
||||
double_btn_dialog.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluContentDialog{
|
||||
id:dialog
|
||||
title:"友情提示"
|
||||
message:"确定要退出程序么？"
|
||||
negativeText:"取消"
|
||||
buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
|
||||
onNegativeClicked:{
|
||||
showSuccess("点击取消按钮")
|
||||
}
|
||||
positiveText:"确定"
|
||||
onPositiveClicked:{
|
||||
showSuccess("点击确定按钮")
|
||||
}
|
||||
}
|
||||
dialog.open()'
|
||||
}
|
||||
|
||||
FluContentDialog{
|
||||
id:double_btn_dialog
|
||||
title:"友情提示"
|
||||
message:"确定要退出程序么？"
|
||||
buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
|
||||
negativeText:"取消"
|
||||
onNegativeClicked:{
|
||||
showSuccess("点击取消按钮")
|
||||
}
|
||||
positiveText:"确定"
|
||||
onPositiveClicked:{
|
||||
showSuccess("点击确定按钮")
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluButton{
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
Layout.topMargin: 20
|
||||
text:"Show Triple Button Dialog"
|
||||
onClicked: {
|
||||
triple_btn_dialog.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluContentDialog{
|
||||
id:dialog
|
||||
title:"友情提示"
|
||||
message:"确定要退出程序么？"
|
||||
negativeText:"取消"
|
||||
buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
|
||||
negativeText:"取消"
|
||||
onNegativeClicked:{
|
||||
showSuccess("点击取消按钮")
|
||||
}
|
||||
positiveText:"确定"
|
||||
onPositiveClicked:{
|
||||
showSuccess("点击确定按钮")
|
||||
}
|
||||
neutralText:"最小化"
|
||||
onNeutralClicked:{
|
||||
showSuccess("点击最小化按钮")
|
||||
}
|
||||
}
|
||||
dialog.open()'
|
||||
}
|
||||
|
||||
FluContentDialog{
|
||||
id:triple_btn_dialog
|
||||
title:"友情提示"
|
||||
message:"确定要退出程序么？"
|
||||
buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
|
||||
negativeText:"取消"
|
||||
onNegativeClicked:{
|
||||
showSuccess("点击取消按钮")
|
||||
}
|
||||
positiveText:"确定"
|
||||
onPositiveClicked:{
|
||||
showSuccess("点击确定按钮")
|
||||
}
|
||||
neutralText:"最小化"
|
||||
onNeutralClicked:{
|
||||
showSuccess("点击最小化按钮")
|
||||
}
|
||||
}
|
||||
}
|
||||
102
example/qml-Qt6/page/T_Expander.qml
Normal file
102
example/qml-Qt6/page/T_Expander.qml
Normal file
@ -0,0 +1,102 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Expander"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: layout_column.height+20
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
id:layout_column
|
||||
spacing: 15
|
||||
anchors{
|
||||
top:parent.top
|
||||
left:parent.left
|
||||
}
|
||||
|
||||
FluExpander{
|
||||
headerText:"打开一个单选框"
|
||||
Layout.topMargin: 20
|
||||
Item{
|
||||
anchors.fill: parent
|
||||
FluRadioButtons{
|
||||
spacing: 8
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
topMargin: 15
|
||||
leftMargin: 15
|
||||
}
|
||||
FluRadioButton{
|
||||
text:"Radio Button_1"
|
||||
}
|
||||
FluRadioButton{
|
||||
text:"Radio Button_2"
|
||||
}
|
||||
FluRadioButton{
|
||||
text:"Radio Button_3"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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:"先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluExpander{
|
||||
headerText:"打开一个单选框"
|
||||
Item{
|
||||
anchors.fill: parent
|
||||
Flickable{
|
||||
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:"先帝创业未半而中道崩殂，今天下三分......""
|
||||
}
|
||||
}
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
117
example/qml-Qt6/page/T_FlipView.qml
Normal file
117
example/qml-Qt6/page/T_FlipView.qml
Normal file
@ -0,0 +1,117 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"FlipView"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 340
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
ColumnLayout{
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluText{
|
||||
text:"水平方向的FlipView"
|
||||
}
|
||||
FluFlipView{
|
||||
Image{
|
||||
source: "qrc:/example/res/image/banner_1.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Image{
|
||||
source: "qrc:/example/res/image/banner_2.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Image{
|
||||
source: "qrc:/example/res/image/banner_3.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluFlipView{
|
||||
Image{
|
||||
source: "qrc:/example/res/image/banner_1.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Image{
|
||||
source: "qrc:/example/res/image/banner_1.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Image{
|
||||
source: "qrc:/example/res/image/banner_1.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 340
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
ColumnLayout{
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluText{
|
||||
text:"垂直方向的FlipView"
|
||||
}
|
||||
FluFlipView{
|
||||
vertical:true
|
||||
Image{
|
||||
source: "qrc:/example/res/image/banner_1.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Image{
|
||||
source: "qrc:/example/res/image/banner_2.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Image{
|
||||
source: "qrc:/example/res/image/banner_3.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluFlipView{
|
||||
vertical:true
|
||||
Image{
|
||||
source: "qrc:/example/res/image/banner_1.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Image{
|
||||
source: "qrc:/example/res/image/banner_1.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Image{
|
||||
source: "qrc:/example/res/image/banner_1.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
}
|
||||
284
example/qml-Qt6/page/T_Home.qml
Normal file
284
example/qml-Qt6/page/T_Home.qml
Normal file
@ -0,0 +1,284 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import "qrc:///example/qml/global"
|
||||
import FluentUI
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
launchMode: FluPageType.SingleTask
|
||||
animDisabled: true
|
||||
|
||||
ListModel{
|
||||
id:model_header
|
||||
ListElement{
|
||||
icon:"qrc:/example/res/image/ic_home_github.png"
|
||||
title:"FluentUI GitHub"
|
||||
desc:"The latest FluentUI controls and styles for your applications."
|
||||
url:"https://github.com/zhuzichu520/FluentUI"
|
||||
}
|
||||
}
|
||||
|
||||
Item{
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 320
|
||||
Image {
|
||||
id: bg
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
anchors.fill: parent
|
||||
verticalAlignment: Qt.AlignTop
|
||||
source: "qrc:/example/res/image/bg_home_header.png"
|
||||
}
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
gradient: Gradient{
|
||||
GradientStop { position: 0.8; color: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(1,1,1,0) }
|
||||
GradientStop { position: 1.0; color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) }
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"FluentUI Gallery"
|
||||
font: FluTextStyle.TitleLarge
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
topMargin: 20
|
||||
leftMargin: 20
|
||||
}
|
||||
}
|
||||
|
||||
ListView{
|
||||
id: list
|
||||
anchors{
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
}
|
||||
orientation: ListView.Horizontal
|
||||
height: 240
|
||||
model: model_header
|
||||
header: Item{height: 10;width: 10}
|
||||
footer: Item{height: 10;width: 10}
|
||||
ScrollBar.horizontal: FluScrollBar{
|
||||
id: scrollbar_header
|
||||
}
|
||||
clip: false
|
||||
delegate:Item{
|
||||
id: control
|
||||
width: 220
|
||||
height: 240
|
||||
FluShadow{
|
||||
radius:8
|
||||
anchors.fill: item_content
|
||||
}
|
||||
FluItem{
|
||||
id:item_content
|
||||
radius: [8,8,8,8]
|
||||
width: 200
|
||||
height: 220
|
||||
anchors.centerIn: parent
|
||||
FluAcrylic{
|
||||
anchors.fill: parent
|
||||
tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
target: bg
|
||||
tintOpacity: FluTheme.dark ? 0.8 : 0.9
|
||||
blurRadius : 40
|
||||
targetRect: Qt.rect(list.x-list.contentX+10+(control.width)*index,list.y+10,width,height)
|
||||
}
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
radius: 8
|
||||
color:{
|
||||
if(FluTheme.dark){
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(1,1,1,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0.0)
|
||||
}else{
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(0,0,0,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0.0)
|
||||
}
|
||||
}
|
||||
}
|
||||
ColumnLayout{
|
||||
Image {
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 20
|
||||
Layout.preferredWidth: 50
|
||||
Layout.preferredHeight: 50
|
||||
source: model.icon
|
||||
}
|
||||
FluText{
|
||||
text: model.title
|
||||
font: FluTextStyle.Body
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 20
|
||||
}
|
||||
FluText{
|
||||
text: model.desc
|
||||
Layout.topMargin: 5
|
||||
Layout.preferredWidth: 160
|
||||
Layout.leftMargin: 20
|
||||
color: FluColors.Grey120
|
||||
font.pixelSize: 12
|
||||
wrapMode: Text.WrapAnywhere
|
||||
}
|
||||
}
|
||||
FluIcon{
|
||||
iconSource: FluentIcons.OpenInNewWindow
|
||||
iconSize: 15
|
||||
anchors{
|
||||
bottom: parent.bottom
|
||||
right: parent.right
|
||||
rightMargin: 10
|
||||
bottomMargin: 10
|
||||
}
|
||||
}
|
||||
MouseArea{
|
||||
id:item_mouse
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onWheel:
|
||||
(wheel)=>{
|
||||
if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
|
||||
else scrollbar_header.increase()
|
||||
}
|
||||
onClicked: {
|
||||
Qt.openUrlExternally(model.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component{
|
||||
id:com_item
|
||||
Item{
|
||||
width: 320
|
||||
height: 120
|
||||
FluArea{
|
||||
radius: 8
|
||||
width: 300
|
||||
height: 100
|
||||
anchors.centerIn: parent
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
radius: 8
|
||||
color:{
|
||||
if(FluTheme.dark){
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(1,1,1,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}else{
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(0,0,0,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
}
|
||||
Image{
|
||||
id:item_icon
|
||||
height: 40
|
||||
width: 40
|
||||
source: modelData.image
|
||||
anchors{
|
||||
left: parent.left
|
||||
leftMargin: 20
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
id:item_title
|
||||
text:modelData.title
|
||||
font: FluTextStyle.BodyStrong
|
||||
anchors{
|
||||
left: item_icon.right
|
||||
leftMargin: 20
|
||||
top: item_icon.top
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
id:item_desc
|
||||
text:modelData.desc
|
||||
color:FluColors.Grey120
|
||||
wrapMode: Text.WrapAnywhere
|
||||
elide: Text.ElideRight
|
||||
font: FluTextStyle.Caption
|
||||
maximumLineCount: 2
|
||||
anchors{
|
||||
left: item_title.left
|
||||
right: parent.right
|
||||
rightMargin: 20
|
||||
top: item_title.bottom
|
||||
topMargin: 5
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
height: 12
|
||||
width: 12
|
||||
radius: 6
|
||||
color: FluTheme.primaryColor.dark
|
||||
anchors{
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
rightMargin: 14
|
||||
topMargin: 14
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea{
|
||||
id:item_mouse
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: {
|
||||
ItemsOriginal.startPageByItem(modelData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
text: "Recently added samples"
|
||||
font: FluTextStyle.Title
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 20
|
||||
}
|
||||
|
||||
GridView{
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: contentHeight
|
||||
cellHeight: 120
|
||||
cellWidth: 320
|
||||
model:ItemsOriginal.getRecentlyAddedData()
|
||||
interactive: false
|
||||
delegate: com_item
|
||||
}
|
||||
|
||||
FluText{
|
||||
text: "Recently updated samples"
|
||||
font: FluTextStyle.Title
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 20
|
||||
}
|
||||
|
||||
GridView{
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: contentHeight
|
||||
cellHeight: 120
|
||||
cellWidth: 320
|
||||
interactive: false
|
||||
model: ItemsOriginal.getRecentlyUpdatedData()
|
||||
delegate: com_item
|
||||
}
|
||||
|
||||
}
|
||||
279
example/qml-Qt6/page/T_Http.qml
Normal file
279
example/qml-Qt6/page/T_Http.qml
Normal file
@ -0,0 +1,279 @@
|
||||
import QtQuick
|
||||
import Qt.labs.platform
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Dialogs
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluContentPage{
|
||||
|
||||
title:"Http"
|
||||
|
||||
FluHttp{
|
||||
id:http
|
||||
}
|
||||
|
||||
Flickable{
|
||||
id:layout_flick
|
||||
width: 160
|
||||
clip: true
|
||||
anchors{
|
||||
top: parent.top
|
||||
topMargin: 20
|
||||
bottom: parent.bottom
|
||||
left: parent.left
|
||||
}
|
||||
ScrollBar.vertical: FluScrollBar {}
|
||||
contentHeight:layout_column.height
|
||||
Column{
|
||||
spacing: 2
|
||||
id:layout_column
|
||||
width: parent.width
|
||||
FluButton{
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: 36
|
||||
text: "Get请求"
|
||||
onClicked: {
|
||||
var callable = {}
|
||||
callable.onStart = function(){
|
||||
showLoading()
|
||||
}
|
||||
callable.onFinish = function(){
|
||||
hideLoading()
|
||||
}
|
||||
callable.onSuccess = function(result){
|
||||
text_info.text = result
|
||||
console.debug(result)
|
||||
}
|
||||
callable.onError = function(status,errorString){
|
||||
console.debug(status+";"+errorString)
|
||||
}
|
||||
http.get("https://httpbingo.org/get",callable)
|
||||
}
|
||||
}
|
||||
FluButton{
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: 36
|
||||
text: "Post表单请求"
|
||||
onClicked: {
|
||||
var callable = {}
|
||||
callable.onStart = function(){
|
||||
showLoading()
|
||||
}
|
||||
callable.onFinish = function(){
|
||||
hideLoading()
|
||||
}
|
||||
callable.onSuccess = function(result){
|
||||
text_info.text = result
|
||||
console.debug(result)
|
||||
}
|
||||
callable.onError = function(status,errorString){
|
||||
console.debug(status+";"+errorString)
|
||||
}
|
||||
var param = {}
|
||||
param.custname = "朱子楚"
|
||||
param.custtel = "1234567890"
|
||||
param.custemail = "zhuzichu520@gmail.com"
|
||||
http.post("https://httpbingo.org/post",callable,param)
|
||||
}
|
||||
}
|
||||
FluButton{
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: 36
|
||||
text: "Post Json请求"
|
||||
onClicked: {
|
||||
var callable = {}
|
||||
callable.onStart = function(){
|
||||
showLoading()
|
||||
}
|
||||
callable.onFinish = function(){
|
||||
hideLoading()
|
||||
}
|
||||
callable.onSuccess = function(result){
|
||||
text_info.text = result
|
||||
console.debug(result)
|
||||
}
|
||||
callable.onError = function(status,errorString){
|
||||
console.debug(status+";"+errorString)
|
||||
}
|
||||
var param = {}
|
||||
param.custname = "朱子楚"
|
||||
param.custtel = "1234567890"
|
||||
param.custemail = "zhuzichu520@gmail.com"
|
||||
http.postJson("https://httpbingo.org/post",callable,param)
|
||||
}
|
||||
}
|
||||
FluButton{
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: 36
|
||||
text: "Post String请求"
|
||||
onClicked: {
|
||||
var callable = {}
|
||||
callable.onStart = function(){
|
||||
showLoading()
|
||||
}
|
||||
callable.onFinish = function(){
|
||||
hideLoading()
|
||||
}
|
||||
callable.onSuccess = function(result){
|
||||
text_info.text = result
|
||||
console.debug(result)
|
||||
}
|
||||
callable.onError = function(status,errorString){
|
||||
console.debug(status+";"+errorString)
|
||||
}
|
||||
var param = "我命由我不由天"
|
||||
http.postString("https://httpbingo.org/post",callable,param)
|
||||
}
|
||||
}
|
||||
FluButton{
|
||||
id:btn_download
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: 36
|
||||
text: "下载文件"
|
||||
onClicked: {
|
||||
folder_dialog.open()
|
||||
}
|
||||
}
|
||||
FluButton{
|
||||
id:btn_upload
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: 36
|
||||
text: "文件上传"
|
||||
onClicked: {
|
||||
file_dialog.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FileDialog {
|
||||
id: file_dialog
|
||||
onAccepted: {
|
||||
var param = {}
|
||||
for(var i=0;i<selectedFiles.length;i++){
|
||||
var fileUrl = selectedFiles[i]
|
||||
var fileName = FluTools.getFileNameByUrl(fileUrl)
|
||||
var filePath = FluTools.toLocalPath(fileUrl)
|
||||
param[fileName] = filePath
|
||||
}
|
||||
console.debug(JSON.stringify(param))
|
||||
var callable = {}
|
||||
callable.onStart = function(){
|
||||
btn_upload.disabled = true
|
||||
}
|
||||
callable.onFinish = function(){
|
||||
btn_upload.disabled = false
|
||||
btn_upload.text = "上传文件"
|
||||
layout_upload_file_size.visible = false
|
||||
text_upload_file_size.text = ""
|
||||
}
|
||||
callable.onSuccess = function(result){
|
||||
text_info.text = result
|
||||
console.debug(result)
|
||||
}
|
||||
callable.onError = function(status,errorString,result){
|
||||
text_info.text = result
|
||||
console.debug(result)
|
||||
}
|
||||
callable.onUploadProgress = function(sent,total){
|
||||
var locale = Qt.locale()
|
||||
var precent = (sent/total * 100).toFixed(0) + "%"
|
||||
btn_upload.text = "上传中..."+precent
|
||||
text_upload_file_size.text = "%1/%2".arg(locale.formattedDataSize(sent)).arg(locale.formattedDataSize(total))
|
||||
layout_upload_file_size.visible = true
|
||||
}
|
||||
http.upload("https://httpbingo.org/post",callable,param)
|
||||
}
|
||||
}
|
||||
|
||||
FolderDialog {
|
||||
id: folder_dialog
|
||||
currentFolder: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
|
||||
onAccepted: {
|
||||
var callable = {}
|
||||
callable.onStart = function(){
|
||||
btn_download.disabled = true
|
||||
}
|
||||
callable.onFinish = function(){
|
||||
btn_download.disabled = false
|
||||
btn_download.text = "下载文件"
|
||||
layout_download_file_size.visible = false
|
||||
text_download_file_size.text = ""
|
||||
}
|
||||
callable.onSuccess = function(result){
|
||||
showSuccess(result)
|
||||
}
|
||||
callable.onError = function(status,errorString){
|
||||
showError(errorString)
|
||||
}
|
||||
callable.onDownloadProgress = function(recv,total){
|
||||
var locale = Qt.locale()
|
||||
var precent = (recv/total * 100).toFixed(0) + "%"
|
||||
btn_download.text = "下载中..."+precent
|
||||
text_download_file_size.text = "%1/%2".arg(locale.formattedDataSize(recv)).arg(locale.formattedDataSize(total))
|
||||
layout_download_file_size.visible = true
|
||||
}
|
||||
var path = FluTools.toLocalPath(currentFolder)+ "/big_buck_bunny.mp4"
|
||||
http.download("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",callable,path)
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
anchors{
|
||||
top: layout_flick.top
|
||||
bottom: layout_flick.bottom
|
||||
left: layout_flick.right
|
||||
right: parent.right
|
||||
leftMargin: 8
|
||||
}
|
||||
Flickable{
|
||||
clip: true
|
||||
id:scrollview
|
||||
boundsBehavior:Flickable.StopAtBounds
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluRectangle{
|
||||
id:layout_download_file_size
|
||||
radius: [4,4,4,4]
|
||||
height: 36
|
||||
width: 160
|
||||
visible: false
|
||||
x:layout_flick.width
|
||||
y: 173 - layout_flick.contentY
|
||||
FluText{
|
||||
id:text_download_file_size
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
FluRectangle{
|
||||
id:layout_upload_file_size
|
||||
radius: [4,4,4,4]
|
||||
height: 36
|
||||
width: 160
|
||||
visible: false
|
||||
x:layout_flick.width
|
||||
y: 210 - layout_flick.contentY
|
||||
FluText{
|
||||
id:text_upload_file_size
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
48
example/qml-Qt6/page/T_Image.qml
Normal file
48
example/qml-Qt6/page/T_Image.qml
Normal file
@ -0,0 +1,48 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Image"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 260
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
FluImage{
|
||||
width: 384
|
||||
height: 240
|
||||
source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_4.jpg"
|
||||
onStatusChanged:{
|
||||
if(status === Image.Error){
|
||||
showError("图片加载失败，请重新加载")
|
||||
}
|
||||
}
|
||||
clickErrorListener: function(){
|
||||
source = "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluImage{
|
||||
width: 400
|
||||
height: 300
|
||||
source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
66
example/qml-Qt6/page/T_InfoBar.qml
Normal file
66
example/qml-Qt6/page/T_InfoBar.qml
Normal file
@ -0,0 +1,66 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"InfoBar"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 240
|
||||
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{
|
||||
text:"Loading"
|
||||
onClicked: {
|
||||
showLoading()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'showInfo("这是一个Info样式的InfoBar")
|
||||
|
||||
showWarning("这是一个Warning样式的InfoBar")
|
||||
|
||||
showError("这是一个Error样式的InfoBar")
|
||||
|
||||
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")'
|
||||
}
|
||||
}
|
||||
175
example/qml-Qt6/page/T_Menu.qml
Normal file
175
example/qml-Qt6/page/T_Menu.qml
Normal file
@ -0,0 +1,175 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Menu"
|
||||
|
||||
FluMenu {
|
||||
id:menu
|
||||
title: qsTr("File")
|
||||
Action { text: qsTr("New...")}
|
||||
Action { text: qsTr("Open...") }
|
||||
Action { text: qsTr("Save") }
|
||||
FluMenuSeparator { }
|
||||
FluMenuItem{
|
||||
text: qsTr("Quit")
|
||||
onTriggered: {
|
||||
showError("Quit")
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text: qsTr("Search")
|
||||
iconSource: FluentIcons.Zoom
|
||||
iconSpacing: 3
|
||||
onTriggered: {
|
||||
showError("Search")
|
||||
}
|
||||
}
|
||||
Action {
|
||||
text: qsTr("Disable")
|
||||
enabled:false
|
||||
onTriggered: {
|
||||
showError("Disable")
|
||||
}
|
||||
}
|
||||
FluMenuSeparator { }
|
||||
Action { text: qsTr("Check");checkable: true;checked: true}
|
||||
FluMenu{
|
||||
title: "Save As..."
|
||||
Action { text: qsTr("Doc") }
|
||||
Action { text: qsTr("PDF") }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
id:layout_column
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:"Menu"
|
||||
}
|
||||
|
||||
FluButton{
|
||||
text:"Show Menu Popup"
|
||||
Layout.topMargin: 20
|
||||
onClicked:{
|
||||
menu.popup()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluMenu{
|
||||
id:menu
|
||||
FluMenuItem:{
|
||||
text:"删除"
|
||||
onClicked: {
|
||||
showError("删除")
|
||||
}
|
||||
}
|
||||
FluMenuItem:{
|
||||
text:"修改"
|
||||
onClicked: {
|
||||
showInfo("修改")
|
||||
}
|
||||
}
|
||||
}
|
||||
menu.popup()
|
||||
'
|
||||
}
|
||||
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:"MenuBar"
|
||||
}
|
||||
|
||||
FluMenuBar {
|
||||
id:menu_bar
|
||||
FluMenu {
|
||||
title: qsTr("File")
|
||||
Action { text: qsTr("New...") }
|
||||
Action { text: qsTr("Open...") }
|
||||
Action { text: qsTr("Save") }
|
||||
FluMenuSeparator { }
|
||||
Action { text: qsTr("Quit") }
|
||||
Action {
|
||||
text: qsTr("Disable")
|
||||
enabled:false
|
||||
}
|
||||
FluMenu{
|
||||
title: "Save As..."
|
||||
Action { text: qsTr("Doc") }
|
||||
Action { text: qsTr("PDF") }
|
||||
}
|
||||
}
|
||||
FluMenu {
|
||||
title: qsTr("Edit")
|
||||
Action { text: qsTr("Cut") }
|
||||
Action { text: qsTr("Copy") }
|
||||
Action { text: qsTr("Paste") }
|
||||
}
|
||||
FluMenu {
|
||||
title: qsTr("Help")
|
||||
Action { text: qsTr("About") }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluMenuBar{
|
||||
id:menu
|
||||
FluMenu:{
|
||||
title:"File"
|
||||
Action { text: qsTr("New...") }
|
||||
}
|
||||
FluMenu:{
|
||||
title:"Edit"
|
||||
Action { text: qsTr("Cut") }
|
||||
Action { text: qsTr("Copy") }
|
||||
Action { text: qsTr("Paste") }
|
||||
}
|
||||
}
|
||||
menu.popup()
|
||||
'
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
186
example/qml-Qt6/page/T_MultiWindow.qml
Normal file
186
example/qml-Qt6/page/T_MultiWindow.qml
Normal file
@ -0,0 +1,186 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
property string password: ""
|
||||
property var loginPageRegister: registerForWindowResult("/login")
|
||||
|
||||
title:"MultiWindow"
|
||||
|
||||
Connections{
|
||||
target: loginPageRegister
|
||||
function onResult(data)
|
||||
{
|
||||
password = data.password
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 86
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"<font color='red'>Standard</font>模式窗口，每次都会创建新窗口"
|
||||
}
|
||||
FluButton{
|
||||
text:"点击创建窗口"
|
||||
onClicked: {
|
||||
FluApp.navigate("/standardWindow")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 86
|
||||
paddings: 10
|
||||
Layout.topMargin: 10
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"<font color='red'>SingleTask</font>模式窗口，如果窗口存在，这激活该窗口"
|
||||
textFormat: Text.RichText
|
||||
}
|
||||
FluButton{
|
||||
text:"点击创建窗口"
|
||||
onClicked: {
|
||||
FluApp.navigate("/singleTaskWindow")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 86
|
||||
paddings: 10
|
||||
Layout.topMargin: 10
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"<font color='red'>SingleInstance</font>模式窗口，如果窗口存在，则销毁窗口，然后新建窗口"
|
||||
}
|
||||
FluButton{
|
||||
text:"点击创建窗口"
|
||||
onClicked: {
|
||||
FluApp.navigate("/singleInstanceWindow")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluWindow{
|
||||
//launchMode: FluWindowType.Standard
|
||||
//launchMode: FluWindowType.SingleTask
|
||||
launchMode: FluWindowType.SingleInstance
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"页面跳转，不携带任何参数"
|
||||
}
|
||||
FluButton{
|
||||
text:"点击跳转"
|
||||
onClicked: {
|
||||
FluApp.navigate("/about")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluButton{
|
||||
text:"点击跳转"
|
||||
onClicked: {
|
||||
FluApp.navigate("/about")
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 130
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"页面跳转，并携带参数用户名：zhuzichu"
|
||||
}
|
||||
FluButton{
|
||||
text:"点击跳转到登录"
|
||||
onClicked: {
|
||||
loginPageRegister.launch({username:"zhuzichu"})
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"登录窗口返回过来的密码->"+password
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'property var loginPageRegister: registerForWindowResult("/login")
|
||||
|
||||
Connections{
|
||||
target: loginPageRegister
|
||||
function onResult(data)
|
||||
{
|
||||
password = data.password
|
||||
}
|
||||
}
|
||||
|
||||
FluButton{
|
||||
text:"点击跳转"
|
||||
onClicked: {
|
||||
loginPageRegister.launch({username:"zhuzichu"})
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
}
|
||||
49
example/qml-Qt6/page/T_Pagination.qml
Normal file
49
example/qml-Qt6/page/T_Pagination.qml
Normal file
@ -0,0 +1,49 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import "qrc:///example/qml/component"
|
||||
import FluentUI
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Pagination"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 200
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
ColumnLayout{
|
||||
spacing: 20
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluPagination{
|
||||
pageCurrent: 1
|
||||
pageButtonCount: 5
|
||||
itemCount: 5000
|
||||
}
|
||||
FluPagination{
|
||||
pageCurrent: 2
|
||||
itemCount: 5000
|
||||
pageButtonCount: 7
|
||||
}
|
||||
FluPagination{
|
||||
pageCurrent: 3
|
||||
itemCount: 5000
|
||||
pageButtonCount: 9
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluPagination{
|
||||
pageCurrent: 1
|
||||
itemCount: 1000
|
||||
pageButtonCount: 9
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
79
example/qml-Qt6/page/T_Pivot.qml
Normal file
79
example/qml-Qt6/page/T_Pivot.qml
Normal file
@ -0,0 +1,79 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Pivot"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 400
|
||||
paddings: 10
|
||||
|
||||
FluPivot{
|
||||
anchors.fill: parent
|
||||
currentIndex: 2
|
||||
FluPivotItem{
|
||||
title:"All"
|
||||
contentItem:FluText{
|
||||
text:"All emails go here."
|
||||
}
|
||||
}
|
||||
FluPivotItem{
|
||||
title:"Unread"
|
||||
contentItem:FluText{
|
||||
text:"Unread emails go here."
|
||||
}
|
||||
}
|
||||
FluPivotItem{
|
||||
title:"Flagged"
|
||||
contentItem:FluText{
|
||||
text:"Flagged emails go here."
|
||||
}
|
||||
}
|
||||
FluPivotItem{
|
||||
title:"Urgent"
|
||||
contentItem:FluText{
|
||||
text:"Urgent emails go here."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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."
|
||||
}
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
}
|
||||
103
example/qml-Qt6/page/T_Progress.qml
Normal file
103
example/qml-Qt6/page/T_Progress.qml
Normal file
@ -0,0 +1,103 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Progress"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 130
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 10
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text: "indeterminate = true"
|
||||
}
|
||||
FluProgressBar{
|
||||
}
|
||||
FluProgressRing{
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluProgressBar{
|
||||
|
||||
}
|
||||
FluProgressRing{
|
||||
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 286
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 10
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text: "indeterminate = false"
|
||||
}
|
||||
FluProgressBar{
|
||||
indeterminate: false
|
||||
value:slider.value/100
|
||||
Layout.topMargin: 10
|
||||
}
|
||||
FluProgressBar{
|
||||
indeterminate: false
|
||||
value:slider.value/100
|
||||
progressVisible: true
|
||||
Layout.topMargin: 10
|
||||
}
|
||||
FluProgressRing{
|
||||
indeterminate: false
|
||||
value: slider.value/100
|
||||
Layout.topMargin: 10
|
||||
}
|
||||
FluProgressRing{
|
||||
progressVisible: true
|
||||
indeterminate: false
|
||||
value: slider.value/100
|
||||
}
|
||||
FluSlider{
|
||||
id:slider
|
||||
Component.onCompleted: {
|
||||
value = 50
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluProgressBar{
|
||||
indeterminate: false
|
||||
}
|
||||
FluProgressRing{
|
||||
indeterminate: false
|
||||
progressVisible: true
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
106
example/qml-Qt6/page/T_QRCode.qml
Normal file
106
example/qml-Qt6/page/T_QRCode.qml
Normal file
@ -0,0 +1,106 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import Qt5Compat.GraphicalEffects
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"QRCode"
|
||||
|
||||
FluQRCode{
|
||||
id:qrcode
|
||||
Layout.topMargin: 20
|
||||
size:slider_size.value
|
||||
text:text_box.text
|
||||
color:color_picker.colorValue
|
||||
bgColor: bgcolor_picker.colorValue
|
||||
margins:slider_margins.value
|
||||
Layout.preferredWidth: size
|
||||
Layout.preferredHeight: size
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
Layout.topMargin: 20
|
||||
FluText{
|
||||
text:"text:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluTextBox{
|
||||
id:text_box
|
||||
text:"会磨刀的小猪"
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
Layout.topMargin: 10
|
||||
FluText{
|
||||
text:"color:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluColorPicker{
|
||||
id:color_picker
|
||||
Component.onCompleted: {
|
||||
setColor(Qt.rgba(0,0,0,1))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
Layout.topMargin: 10
|
||||
FluText{
|
||||
text:"bgColor:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluColorPicker{
|
||||
id:bgcolor_picker
|
||||
Component.onCompleted: {
|
||||
setColor(Qt.rgba(1,1,1,1))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"margins:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id:slider_margins
|
||||
from:0
|
||||
to:80
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"size:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id:slider_size
|
||||
from:120
|
||||
to:260
|
||||
value: 120
|
||||
}
|
||||
}
|
||||
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
code:'FluQRCode{
|
||||
color:"red"
|
||||
text:"会磨刀的小猪"
|
||||
size:100
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
101
example/qml-Qt6/page/T_RadioButton.qml
Normal file
101
example/qml-Qt6/page/T_RadioButton.qml
Normal file
@ -0,0 +1,101 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"RadioButton"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Row{
|
||||
spacing: 30
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluRadioButton{
|
||||
disabled: radio_button_switch.checked
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled: radio_button_switch.checked
|
||||
text:"Right"
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled: radio_button_switch.checked
|
||||
text:"Left"
|
||||
textRight: false
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:radio_button_switch
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluRadioButton{
|
||||
text:"Text"
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluRadioButtons{
|
||||
spacing: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled: radio_button_switch2.checked
|
||||
text:"Radio Button_1"
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled: radio_button_switch2.checked
|
||||
text:"Radio Button_2"
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled: radio_button_switch2.checked
|
||||
text:"Radio Button_3"
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:radio_button_switch2
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluRadioButtons{
|
||||
spacing: 8
|
||||
FluRadioButton{
|
||||
text:"Radio Button_1"
|
||||
}
|
||||
FluRadioButton{
|
||||
text:"Radio Button_2"
|
||||
}
|
||||
FluRadioButton{
|
||||
text:"Radio Button_3"
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
35
example/qml-Qt6/page/T_RatingControl.qml
Normal file
35
example/qml-Qt6/page/T_RatingControl.qml
Normal file
@ -0,0 +1,35 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage {
|
||||
|
||||
title: "RatingControl"
|
||||
|
||||
FluArea {
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
Column {
|
||||
spacing: 10
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluRatingControl {}
|
||||
FluRatingControl {
|
||||
number: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeExpander {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code: 'FluRatingControl{
|
||||
|
||||
}'
|
||||
}
|
||||
}
|
||||
147
example/qml-Qt6/page/T_Rectangle.qml
Normal file
147
example/qml-Qt6/page/T_Rectangle.qml
Normal file
@ -0,0 +1,147 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Rectangle"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 460
|
||||
paddings: 10
|
||||
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
|
||||
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]
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"配合图片使用"
|
||||
font: FluTextStyle.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:/example/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:/example/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:/example/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:/example/res/svg/avatar_4.svg"
|
||||
}
|
||||
}
|
||||
}
|
||||
FluRectangle{
|
||||
width: 1920/5
|
||||
height: 1200/5
|
||||
radius:[15,15,15,15]
|
||||
Image {
|
||||
asynchronous: true
|
||||
source: "qrc:/example/res/image/banner_1.jpg"
|
||||
anchors.fill: parent
|
||||
sourceSize: Qt.size(2*width,2*height)
|
||||
}
|
||||
Layout.topMargin: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluRectangle{
|
||||
radius: [25,25,25,25]
|
||||
width: 50
|
||||
height: 50
|
||||
Image{
|
||||
asynchronous: true
|
||||
anchors.fill: parent
|
||||
source: "qrc:/example/res/svg/avatar_4.svg"
|
||||
sourceSize: Qt.size(width,height)
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
14
example/qml-Qt6/page/T_RemoteLoader.qml
Normal file
14
example/qml-Qt6/page/T_RemoteLoader.qml
Normal file
@ -0,0 +1,14 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluPage{
|
||||
launchMode: FluPageType.SingleTop
|
||||
FluRemoteLoader{
|
||||
anchors.fill: parent
|
||||
source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
|
||||
}
|
||||
}
|
||||
55
example/qml-Qt6/page/T_Screenshot.qml
Normal file
55
example/qml-Qt6/page/T_Screenshot.qml
Normal file
@ -0,0 +1,55 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Screenshot"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluFilledButton{
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text:"Open Screenshot"
|
||||
onClicked: {
|
||||
screenshot.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
Layout.preferredHeight: 400
|
||||
Layout.preferredWidth: 400
|
||||
Layout.topMargin: 10
|
||||
Layout.leftMargin: 4
|
||||
Layout.bottomMargin: 4
|
||||
color: FluTheme.dark ? FluColors.Black : FluColors.White
|
||||
FluShadow{
|
||||
radius: 0
|
||||
color: FluTheme.primaryColor.dark
|
||||
}
|
||||
Image{
|
||||
id:image
|
||||
anchors.fill: parent
|
||||
fillMode: Image.PreserveAspectFit
|
||||
asynchronous: true
|
||||
}
|
||||
}
|
||||
|
||||
FluScreenshot{
|
||||
id:screenshot
|
||||
captrueMode: FluScreenshotType.File
|
||||
saveFolder: FluTools.getApplicationDirPath()+"/screenshot"
|
||||
onCaptrueCompleted:
|
||||
(captrue)=>{
|
||||
image.source = captrue
|
||||
}
|
||||
}
|
||||
}
|
||||
108
example/qml-Qt6/page/T_Settings.qml
Normal file
108
example/qml-Qt6/page/T_Settings.qml
Normal file
@ -0,0 +1,108 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/global"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Settings"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 128
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:lang.dark_mode
|
||||
font: FluTextStyle.BodyStrong
|
||||
Layout.bottomMargin: 4
|
||||
}
|
||||
Repeater{
|
||||
model: [{title:"System",mode:FluThemeType.System},{title:"Light",mode:FluThemeType.Light},{title:"Dark",mode:FluThemeType.Dark}]
|
||||
delegate: FluRadioButton{
|
||||
checked : FluTheme.darkMode === modelData.mode
|
||||
text:modelData.title
|
||||
clickListener:function(){
|
||||
FluTheme.darkMode = modelData.mode
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 160
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:lang.navigation_view_display_mode
|
||||
font: FluTextStyle.BodyStrong
|
||||
Layout.bottomMargin: 4
|
||||
}
|
||||
Repeater{
|
||||
model: [{title:"Open",mode:FluNavigationViewType.Open},{title:"Compact",mode:FluNavigationViewType.Compact},{title:"Minimal",mode:FluNavigationViewType.Minimal},{title:"Auto",mode:FluNavigationViewType.Auto}]
|
||||
delegate: FluRadioButton{
|
||||
checked : MainEvent.displayMode===modelData.mode
|
||||
text:modelData.title
|
||||
clickListener:function(){
|
||||
MainEvent.displayMode = modelData.mode
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 80
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 10
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:lang.locale
|
||||
font: FluTextStyle.BodyStrong
|
||||
Layout.bottomMargin: 4
|
||||
}
|
||||
|
||||
Flow{
|
||||
spacing: 5
|
||||
Repeater{
|
||||
model: ["Zh","En"]
|
||||
delegate: FluRadioButton{
|
||||
checked: appInfo.lang.objectName === modelData
|
||||
text:modelData
|
||||
clickListener:function(){
|
||||
appInfo.changeLang(modelData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
50
example/qml-Qt6/page/T_Slider.qml
Normal file
50
example/qml-Qt6/page/T_Slider.qml
Normal file
@ -0,0 +1,50 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import "qrc:///example/qml/component"
|
||||
import FluentUI
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Slider"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluSlider{
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluSlider{
|
||||
value:50
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 200
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluSlider{
|
||||
orientation: Qt.Vertical
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluSlider{
|
||||
orientation: Qt.Vertical
|
||||
value:50
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
86
example/qml-Qt6/page/T_StatusView.qml
Normal file
86
example/qml-Qt6/page/T_StatusView.qml
Normal file
@ -0,0 +1,86 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"StatusView"
|
||||
|
||||
FluArea{
|
||||
id:layout_actions
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 50
|
||||
paddings: 10
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
FluDropDownButton{
|
||||
id:btn_status_mode
|
||||
Layout.preferredWidth: 140
|
||||
text:"Loading"
|
||||
FluMenuItem{
|
||||
text:"Loading"
|
||||
onClicked: {
|
||||
btn_status_mode.text = text
|
||||
status_view.statusMode = FluStatusViewType.Loading
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Empty"
|
||||
onClicked: {
|
||||
btn_status_mode.text = text
|
||||
status_view.statusMode = FluStatusViewType.Empty
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Error"
|
||||
onClicked: {
|
||||
btn_status_mode.text = text
|
||||
status_view.statusMode = FluStatusViewType.Error
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Success"
|
||||
onClicked: {
|
||||
btn_status_mode.text = text
|
||||
status_view.statusMode = FluStatusViewType.Success
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 10
|
||||
height: 380
|
||||
paddings: 10
|
||||
FluStatusView{
|
||||
id:status_view
|
||||
anchors.fill: parent
|
||||
onErrorClicked:{
|
||||
showError("点击重新加载")
|
||||
}
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color:FluTheme.primaryColor.dark
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluStatusView{
|
||||
anchors.fill: parent
|
||||
statusMode: FluStatusViewType.Loading
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
color:FluTheme.primaryColor.dark
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
130
example/qml-Qt6/page/T_TabView.qml
Normal file
130
example/qml-Qt6/page/T_TabView.qml
Normal file
@ -0,0 +1,130 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||
|
||||
title:"TabView"
|
||||
|
||||
Component{
|
||||
id:com_page
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
color: argument
|
||||
}
|
||||
}
|
||||
|
||||
function newTab(){
|
||||
tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
newTab()
|
||||
newTab()
|
||||
newTab()
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 50
|
||||
paddings: 10
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
FluDropDownButton{
|
||||
id:btn_tab_width_behavior
|
||||
Layout.preferredWidth: 140
|
||||
text:"Equal"
|
||||
FluMenuItem{
|
||||
text:"Equal"
|
||||
onClicked: {
|
||||
btn_tab_width_behavior.text = text
|
||||
tab_view.tabWidthBehavior = FluTabViewType.Equal
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"SizeToContent"
|
||||
onClicked: {
|
||||
btn_tab_width_behavior.text = text
|
||||
tab_view.tabWidthBehavior = FluTabViewType.SizeToContent
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Compact"
|
||||
onClicked: {
|
||||
btn_tab_width_behavior.text = text
|
||||
tab_view.tabWidthBehavior = FluTabViewType.Compact
|
||||
}
|
||||
}
|
||||
}
|
||||
FluDropDownButton{
|
||||
id:btn_close_button_visibility
|
||||
text:"Always"
|
||||
Layout.preferredWidth: 120
|
||||
FluMenuItem{
|
||||
text:"Nerver"
|
||||
onClicked: {
|
||||
btn_close_button_visibility.text = text
|
||||
tab_view.closeButtonVisibility = FluTabViewType.Nerver
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Always"
|
||||
onClicked: {
|
||||
btn_close_button_visibility.text = text
|
||||
tab_view.closeButtonVisibility = FluTabViewType.Always
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"OnHover"
|
||||
onClicked: {
|
||||
btn_close_button_visibility.text = text
|
||||
tab_view.closeButtonVisibility = FluTabViewType.OnHover
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 15
|
||||
height: 400
|
||||
paddings: 10
|
||||
FluTabView{
|
||||
id:tab_view
|
||||
onNewPressed:{
|
||||
newTab()
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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:/example/res/image/favicon.ico","Document 1",com_page,argument)
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
}
|
||||
171
example/qml-Qt6/page/T_TableView.qml
Normal file
171
example/qml-Qt6/page/T_TableView.qml
Normal file
@ -0,0 +1,171 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluContentPage{
|
||||
|
||||
title:"TableView"
|
||||
|
||||
Component.onCompleted: {
|
||||
loadData(1,1000)
|
||||
}
|
||||
|
||||
Component{
|
||||
id:com_action
|
||||
Item{
|
||||
RowLayout{
|
||||
anchors.centerIn: parent
|
||||
FluButton{
|
||||
text:"删除"
|
||||
onClicked: {
|
||||
table_view.closeEditor()
|
||||
tableModel.removeRow(row)
|
||||
}
|
||||
}
|
||||
FluFilledButton{
|
||||
text:"编辑"
|
||||
onClicked: {
|
||||
showSuccess(JSON.stringify(tableModel.getRow(row)))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadData(page,count){
|
||||
var numbers = [100, 300, 500, 1000];
|
||||
function getRandomAge() {
|
||||
var randomIndex = Math.floor(Math.random() * numbers.length);
|
||||
return numbers[randomIndex];
|
||||
}
|
||||
var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
|
||||
function getRandomName(){
|
||||
var randomIndex = Math.floor(Math.random() * names.length);
|
||||
return names[randomIndex];
|
||||
}
|
||||
var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
|
||||
function getRandomNickname(){
|
||||
var randomIndex = Math.floor(Math.random() * nicknames.length);
|
||||
return nicknames[randomIndex];
|
||||
}
|
||||
var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
|
||||
function getRandomAddresses(){
|
||||
var randomIndex = Math.floor(Math.random() * addresses.length);
|
||||
return addresses[randomIndex];
|
||||
}
|
||||
const dataSource = []
|
||||
for(var i=0;i<count;i++){
|
||||
dataSource.push({
|
||||
name: getRandomName(),
|
||||
age:getRandomAge(),
|
||||
address: getRandomAddresses(),
|
||||
nickname: getRandomNickname(),
|
||||
longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
|
||||
action:com_action
|
||||
})
|
||||
}
|
||||
table_view.dataSource = dataSource
|
||||
}
|
||||
|
||||
Component{
|
||||
id:com_combobox
|
||||
FluComboBox {
|
||||
anchors.fill: parent
|
||||
focus: true
|
||||
currentIndex: display
|
||||
editable: true
|
||||
model: ListModel {
|
||||
ListElement { text: 100 }
|
||||
ListElement { text: 300 }
|
||||
ListElement { text: 500 }
|
||||
ListElement { text: 1000 }
|
||||
}
|
||||
Component.onCompleted: {
|
||||
currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
|
||||
selectAll()
|
||||
}
|
||||
onCommit: {
|
||||
display = editText
|
||||
tableView.closeEditor()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluTableView{
|
||||
id:table_view
|
||||
anchors{
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
bottom: gagination.top
|
||||
}
|
||||
anchors.topMargin: 20
|
||||
columnSource:[
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
readOnly:true,
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
editDelegate:com_combobox,
|
||||
width:100,
|
||||
minimumWidth:100,
|
||||
maximumWidth:100
|
||||
},
|
||||
{
|
||||
title: '住址',
|
||||
dataIndex: 'address',
|
||||
width:200,
|
||||
minimumWidth:100,
|
||||
maximumWidth:250
|
||||
},
|
||||
{
|
||||
title: '别名',
|
||||
dataIndex: 'nickname',
|
||||
width:100,
|
||||
minimumWidth:80,
|
||||
maximumWidth:200
|
||||
},
|
||||
{
|
||||
title: '长字符串',
|
||||
dataIndex: 'longstring',
|
||||
width:200,
|
||||
minimumWidth:100,
|
||||
maximumWidth:300
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width:160,
|
||||
minimumWidth:160,
|
||||
maximumWidth:160
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
FluPagination{
|
||||
id:gagination
|
||||
anchors{
|
||||
bottom: parent.bottom
|
||||
left: parent.left
|
||||
}
|
||||
pageCurrent: 1
|
||||
itemCount: 100000
|
||||
pageButtonCount: 7
|
||||
__itemPerPage: 1000
|
||||
onRequestPage:
|
||||
(page,count)=> {
|
||||
table_view.closeEditor()
|
||||
loadData(page,count)
|
||||
table_view.resetPosition()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
32
example/qml-Qt6/page/T_Text.qml
Normal file
32
example/qml-Qt6/page/T_Text.qml
Normal file
@ -0,0 +1,32 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Text"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 60
|
||||
paddings: 10
|
||||
|
||||
FluCopyableText{
|
||||
text: "这是一个可以支持复制的Text"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluCopyableText{
|
||||
text:"这是一个可以支持复制的Text"
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
191
example/qml-Qt6/page/T_TextBox.qml
Normal file
191
example/qml-Qt6/page/T_TextBox.qml
Normal file
@ -0,0 +1,191 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
launchMode: FluPageType.SingleInstance
|
||||
|
||||
title:"TextBox"
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluTextBox{
|
||||
placeholderText: "单行输入框"
|
||||
disabled:text_box_switch.checked
|
||||
cleanEnabled: true
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
|
||||
FluToggleSwitch{
|
||||
id:text_box_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTextBox{
|
||||
placeholderText:"单行输入框"
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluPasswordBox{
|
||||
placeholderText: "请输入密码"
|
||||
disabled:password_box_switch.checked
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:password_box_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluPasswordBox{
|
||||
placeholderText:"请输入密码"
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 36+multiine_textbox.height
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluMultilineTextBox{
|
||||
id:multiine_textbox
|
||||
placeholderText: "多行输入框"
|
||||
disabled:text_box_multi_switch.checked
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
|
||||
FluToggleSwitch{
|
||||
id:text_box_multi_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluMultilineTextBox{
|
||||
placeholderText:"多行输入框"
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluAutoSuggestBox{
|
||||
placeholderText: "AutoSuggestBox"
|
||||
items:generateRandomNames(100)
|
||||
disabled:text_box_suggest_switch.checked
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:text_box_suggest_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluAutoSuggestBox{
|
||||
placeholderText:"AutoSuggestBox"
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluSpinBox{
|
||||
disabled: spin_box_switch.checked
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:spin_box_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluSpinBox{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
function generateRandomNames(numNames) {
|
||||
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
const names = [];
|
||||
function generateRandomName() {
|
||||
const nameLength = Math.floor(Math.random() * 5) + 4;
|
||||
let name = '';
|
||||
for (let i = 0; i < nameLength; i++) {
|
||||
const letterIndex = Math.floor(Math.random() * 26);
|
||||
name += alphabet.charAt(letterIndex);
|
||||
}
|
||||
return name;
|
||||
}
|
||||
for (let i = 0; i < numNames; i++) {
|
||||
const name = generateRandomName();
|
||||
names.push({title:name});
|
||||
}
|
||||
return names;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
99
example/qml-Qt6/page/T_Theme.qml
Normal file
99
example/qml-Qt6/page/T_Theme.qml
Normal file
@ -0,0 +1,99 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Theme"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 270
|
||||
paddings: 10
|
||||
ColumnLayout{
|
||||
spacing:0
|
||||
anchors{
|
||||
left: parent.left
|
||||
}
|
||||
RowLayout{
|
||||
Layout.topMargin: 10
|
||||
Repeater{
|
||||
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||
delegate: FluRectangle{
|
||||
width: 42
|
||||
height: 42
|
||||
radius: [4,4,4,4]
|
||||
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
|
||||
FluIcon {
|
||||
anchors.centerIn: parent
|
||||
iconSource: FluentIcons.AcceptMedium
|
||||
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
|
||||
checked: FluTheme.dark
|
||||
onClicked: {
|
||||
if(FluTheme.dark){
|
||||
FluTheme.darkMode = FluThemeType.Light
|
||||
}else{
|
||||
FluTheme.darkMode = FluThemeType.Dark
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"native文本渲染"
|
||||
Layout.topMargin: 20
|
||||
}
|
||||
FluToggleSwitch{
|
||||
Layout.topMargin: 5
|
||||
checked: FluTheme.nativeText
|
||||
onClicked: {
|
||||
FluTheme.nativeText = !FluTheme.nativeText
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"开启动画效果"
|
||||
Layout.topMargin: 20
|
||||
}
|
||||
FluToggleSwitch{
|
||||
Layout.topMargin: 5
|
||||
checked: FluTheme.enableAnimation
|
||||
onClicked: {
|
||||
FluTheme.enableAnimation = !FluTheme.enableAnimation
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTheme.primaryColor = FluColors.Orange
|
||||
|
||||
FluTheme.dark = true
|
||||
|
||||
FluTheme.nativeText = true'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
79
example/qml-Qt6/page/T_TimePicker.qml
Normal file
79
example/qml-Qt6/page/T_TimePicker.qml
Normal file
@ -0,0 +1,79 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"TimePicker"
|
||||
launchMode: FluPageType.SingleInstance
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 80
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:"hourFormat=FluTimePickerType.H"
|
||||
}
|
||||
|
||||
FluTimePicker{
|
||||
onCurrentChanged: {
|
||||
showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTimePicker{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 80
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:"hourFormat=FluTimePickerType.HH"
|
||||
}
|
||||
|
||||
FluTimePicker{
|
||||
hourFormat:FluTimePickerType.HH
|
||||
onCurrentChanged: {
|
||||
showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTimePicker{
|
||||
hourFormat:FluTimePickerType.HH
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
170
example/qml-Qt6/page/T_Timeline.qml
Normal file
170
example/qml-Qt6/page/T_Timeline.qml
Normal file
@ -0,0 +1,170 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Timeline"
|
||||
|
||||
Component{
|
||||
id:com_dot
|
||||
Rectangle{
|
||||
width: 16
|
||||
height: 16
|
||||
radius: 8
|
||||
border.width: 4
|
||||
border.color: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
|
||||
}
|
||||
}
|
||||
|
||||
Component{
|
||||
id:com_lable
|
||||
FluText{
|
||||
wrapMode: Text.WrapAnywhere
|
||||
font.bold: true
|
||||
horizontalAlignment: isRight ? Qt.AlignRight : Qt.AlignLeft
|
||||
text: modelData.lable
|
||||
color: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
|
||||
MouseArea{
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
showSuccess(modelData.lable)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component{
|
||||
id:com_text
|
||||
FluText{
|
||||
wrapMode: Text.WrapAnywhere
|
||||
horizontalAlignment: isRight ? Qt.AlignRight : Qt.AlignLeft
|
||||
text: modelData.text
|
||||
font.bold: true
|
||||
linkColor: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
|
||||
onLinkActivated:
|
||||
(link)=> {
|
||||
Qt.openUrlExternally(link)
|
||||
}
|
||||
onLinkHovered:
|
||||
(link)=> {
|
||||
if(link === ""){
|
||||
FluTools.restoreOverrideCursor()
|
||||
}else{
|
||||
FluTools.setOverrideCursor(Qt.PointingHandCursor)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ListModel{
|
||||
id:list_model
|
||||
ListElement{
|
||||
lable:"2013-09-01"
|
||||
text:' <img src="qrc:/example/res/image/image_1.jpg" align="top" width="144" height="102.4"> 考上中国皮城大学，杰斯武器工坊专业'
|
||||
}
|
||||
ListElement{
|
||||
lable:"2017-07-01"
|
||||
text:"大学毕业，在寝室打了4年LOL，没想到毕业还要找工作，瞬间蒙蔽，害"
|
||||
}
|
||||
ListElement{
|
||||
lable:"2017-09-01"
|
||||
text:"开始找工作，毕业即失业！回农村老家躺平，继承三亩良田"
|
||||
}
|
||||
ListElement{
|
||||
lable:"2018-02-01"
|
||||
text:"玩了一年没钱，惨，出去找工作上班"
|
||||
}
|
||||
ListElement{
|
||||
lable:"2018-03-01"
|
||||
text:"找到一份Android外包开发岗位，开发了一个Android应用，满满成就感！前端、服务端、Flutter也都懂一丢丢，什么都会什么都不精通，钱途无望"
|
||||
}
|
||||
ListElement{
|
||||
lable:"2020-06-01"
|
||||
text:"由于某个项目紧急，临时加入Qt项目组（就因为大学学了点C++），本来是想进去打个酱油，到后面竟然成开发主力，坑啊"
|
||||
}
|
||||
ListElement{
|
||||
lable:"2022-08-01"
|
||||
text:"额，被老板卖到甲方公司，走时老板还问我想不想去，我说：'哪里工资高就去哪里'，老板：'无语'"
|
||||
}
|
||||
ListElement{
|
||||
lable:"2023-02-28"
|
||||
text:"开发FluentUI组件库"
|
||||
}
|
||||
ListElement{
|
||||
lable:"2023-03-28"
|
||||
text:'将FluentUI源码开源到<a href="https://github.com/zhuzichu520/FluentUI">github</a>，并发布视频到<a href="https://www.bilibili.com/video/BV1mg4y1M71w">B站</a>'
|
||||
lableDelegate:()=>com_lable
|
||||
textDelegate:()=>com_text
|
||||
dot:()=>com_dot
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 20
|
||||
Layout.topMargin: 20
|
||||
FluTextBox{
|
||||
id:text_box
|
||||
text:"Technical testing 2015-09-01"
|
||||
}
|
||||
FluFilledButton{
|
||||
text:"Append"
|
||||
onClicked: {
|
||||
list_model.append({text:text_box.text})
|
||||
}
|
||||
}
|
||||
FluFilledButton{
|
||||
text:"clear"
|
||||
onClicked: {
|
||||
list_model.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
Layout.topMargin: 10
|
||||
FluText{
|
||||
text:"mode:"
|
||||
}
|
||||
FluDropDownButton{
|
||||
id:btn_mode
|
||||
Layout.preferredWidth: 100
|
||||
text:"Alternate"
|
||||
FluMenuItem{
|
||||
text:"Left"
|
||||
onClicked: {
|
||||
btn_mode.text = text
|
||||
time_line.mode = FluTimelineType.Left
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Right"
|
||||
onClicked: {
|
||||
btn_mode.text = text
|
||||
time_line.mode = FluTimelineType.Right
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Alternate"
|
||||
onClicked: {
|
||||
btn_mode.text = text
|
||||
time_line.mode = FluTimelineType.Alternate
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluTimeline{
|
||||
id:time_line
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
Layout.bottomMargin: 20
|
||||
mode: FluTimelineType.Alternate
|
||||
model:list_model
|
||||
}
|
||||
|
||||
}
|
||||
51
example/qml-Qt6/page/T_ToggleSwitch.qml
Normal file
51
example/qml-Qt6/page/T_ToggleSwitch.qml
Normal file
@ -0,0 +1,51 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"ToggleSwitch"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Row{
|
||||
spacing: 30
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluToggleSwitch{
|
||||
disabled: toggle_switch.checked
|
||||
}
|
||||
FluToggleSwitch{
|
||||
disabled: toggle_switch.checked
|
||||
text:"Right"
|
||||
}
|
||||
FluToggleSwitch{
|
||||
disabled: toggle_switch.checked
|
||||
text:"Left"
|
||||
textRight: false
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:toggle_switch
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluToggleSwitch{
|
||||
text:"Text"
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
103
example/qml-Qt6/page/T_Tooltip.qml
Normal file
103
example/qml-Qt6/page/T_Tooltip.qml
Normal file
@ -0,0 +1,103 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Tooltip"
|
||||
|
||||
FluText{
|
||||
Layout.topMargin: 20
|
||||
text:"鼠标悬停不动，弹出Tooltip"
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 68
|
||||
paddings: 10
|
||||
|
||||
Column{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"FluIconButton的text属性自带Tooltip效果"
|
||||
}
|
||||
FluIconButton{
|
||||
iconSource:FluentIcons.ChromeCloseContrast
|
||||
iconSize: 15
|
||||
text:"删除"
|
||||
onClicked:{
|
||||
showSuccess("点击IconButton")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluIconButton{
|
||||
iconSource:FluentIcons.ChromeCloseContrast
|
||||
iconSize: 15
|
||||
text:"删除"
|
||||
onClicked:{
|
||||
showSuccess("点击IconButton")
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 68
|
||||
paddings: 10
|
||||
|
||||
Column{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"给一个Button添加Tooltip效果"
|
||||
}
|
||||
FluButton{
|
||||
id:button_1
|
||||
text:"删除"
|
||||
onClicked:{
|
||||
showSuccess("点击一个Button")
|
||||
}
|
||||
FluTooltip{
|
||||
visible: button_1.hovered
|
||||
text:button_1.text
|
||||
delay: 1000
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluButton{
|
||||
id:button_1
|
||||
text:"删除"
|
||||
FluTooltip{
|
||||
visible: button_1.hovered
|
||||
text:button_1.text
|
||||
delay: 1000
|
||||
}
|
||||
onClicked:{
|
||||
showSuccess("点击一个Button")
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
80
example/qml-Qt6/page/T_Tour.qml
Normal file
80
example/qml-Qt6/page/T_Tour.qml
Normal file
@ -0,0 +1,80 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Tour"
|
||||
|
||||
FluTour{
|
||||
id:tour
|
||||
steps:[
|
||||
{title:"Upload File",description: "Put your files here.",target:()=>btn_upload},
|
||||
{title:"Save",description: "Save your changes.",target:()=>btn_save},
|
||||
{title:"Other Actions",description: "Click to see other actions.",target:()=>btn_more}
|
||||
]
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 130
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluFilledButton{
|
||||
anchors{
|
||||
top: parent.top
|
||||
topMargin: 14
|
||||
}
|
||||
text:"Begin Tour"
|
||||
onClicked: {
|
||||
tour.open()
|
||||
}
|
||||
}
|
||||
|
||||
Row{
|
||||
spacing: 20
|
||||
anchors{
|
||||
top: parent.top
|
||||
topMargin: 60
|
||||
}
|
||||
FluButton{
|
||||
id:btn_upload
|
||||
text:"Upload"
|
||||
onClicked: {
|
||||
showInfo("Upload")
|
||||
}
|
||||
}
|
||||
FluFilledButton{
|
||||
id:btn_save
|
||||
text:"Save"
|
||||
onClicked: {
|
||||
showInfo("Save")
|
||||
}
|
||||
}
|
||||
FluIconButton{
|
||||
id:btn_more
|
||||
iconSource: FluentIcons.More
|
||||
onClicked: {
|
||||
showInfo("More")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTour{
|
||||
id:tour
|
||||
steps:[
|
||||
{title:"Upload File",description: "Put your files here.",target:()=>btn_upload},
|
||||
{title:"Save",description: "Save your changes.",target:()=>btn_save},
|
||||
{title:"Other Actions",description: "Click to see other actions.",target:()=>btn_more}
|
||||
]
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
156
example/qml-Qt6/page/T_TreeView.qml
Normal file
156
example/qml-Qt6/page/T_TreeView.qml
Normal file
@ -0,0 +1,156 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage {
|
||||
|
||||
title:"TreeView"
|
||||
|
||||
function randomName() {
|
||||
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
|
||||
return names[Math.floor(Math.random() * names.length)]
|
||||
}
|
||||
|
||||
function randomCompany() {
|
||||
var companies = ["阿里巴巴", "腾讯", "百度", "京东", "华为", "小米", "字节跳动", "美团", "滴滴"]
|
||||
return companies[Math.floor(Math.random() * companies.length)]
|
||||
}
|
||||
|
||||
function randomDepartment() {
|
||||
var departments = ["技术部", "销售部", "市场部", "人事部", "财务部", "客服部", "产品部", "设计部", "运营部"]
|
||||
return departments[Math.floor(Math.random() * departments.length)]
|
||||
}
|
||||
|
||||
function createEmployee() {
|
||||
var name = randomName()
|
||||
return tree_view.createItem(name, false)
|
||||
}
|
||||
|
||||
function createSubtree(numEmployees) {
|
||||
var employees = []
|
||||
for (var i = 0; i < numEmployees; i++) {
|
||||
employees.push(createEmployee())
|
||||
}
|
||||
return tree_view.createItem(randomDepartment(), true, employees)
|
||||
}
|
||||
|
||||
function createOrg(numLevels, numSubtrees, numEmployees) {
|
||||
if (numLevels === 0) {
|
||||
return []
|
||||
}
|
||||
var subtrees = []
|
||||
for (var i = 0; i < numSubtrees; i++) {
|
||||
subtrees.push(createSubtree(numEmployees))
|
||||
}
|
||||
return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
|
||||
}
|
||||
|
||||
FluArea{
|
||||
id:layout_actions
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 50
|
||||
paddings: 10
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
FluDropDownButton{
|
||||
id:btn_selection_model
|
||||
Layout.preferredWidth: 140
|
||||
text:"None"
|
||||
FluMenuItem{
|
||||
text:"None"
|
||||
onClicked: {
|
||||
btn_selection_model.text = text
|
||||
tree_view.selectionMode = FluTabViewType.Equal
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Single"
|
||||
onClicked: {
|
||||
btn_selection_model.text = text
|
||||
tree_view.selectionMode = FluTabViewType.SizeToContent
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"Muiltple"
|
||||
onClicked: {
|
||||
btn_selection_model.text = text
|
||||
tree_view.selectionMode = FluTabViewType.Compact
|
||||
}
|
||||
}
|
||||
}
|
||||
FluFilledButton{
|
||||
text:"获取选中的数据"
|
||||
onClicked: {
|
||||
if(tree_view.selectionMode === FluTreeViewType.None){
|
||||
showError("当前非选择模式,没有选中的数据")
|
||||
}
|
||||
if(tree_view.selectionMode === FluTreeViewType.Single){
|
||||
if(!tree_view.signleData()){
|
||||
showError("没有选中数据")
|
||||
return
|
||||
}
|
||||
showSuccess(tree_view.signleData().text)
|
||||
}
|
||||
if(tree_view.selectionMode === FluTreeViewType.Multiple){
|
||||
if(tree_view.multipData().length===0){
|
||||
showError("没有选中数据")
|
||||
return
|
||||
}
|
||||
var info = []
|
||||
tree_view.multipData().map((value)=>info.push(value.text))
|
||||
showSuccess(info.join(","))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTreeView{
|
||||
id:tree_view
|
||||
width:240
|
||||
height:600
|
||||
Component.onCompleted: {
|
||||
var datas = []
|
||||
datas.push(createItem("Node1",false))
|
||||
datas.push(createItem("Node2",false))
|
||||
datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)]))
|
||||
updateData(datas)
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
84
example/qml-Qt6/page/T_Typography.qml
Normal file
84
example/qml-Qt6/page/T_Typography.qml
Normal file
@ -0,0 +1,84 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
|
||||
FluContentPage {
|
||||
|
||||
property real textScale: 1
|
||||
|
||||
title: "Typography"
|
||||
rightPadding: 10
|
||||
|
||||
FluArea{
|
||||
anchors{
|
||||
top:parent.top
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
topMargin: 20
|
||||
}
|
||||
paddings: 10
|
||||
ColumnLayout{
|
||||
spacing: 0
|
||||
scale: textScale
|
||||
transformOrigin: Item.TopLeft
|
||||
FluText{
|
||||
id:text_Display
|
||||
text:"Display"
|
||||
padding: 0
|
||||
font: FluTextStyle.Display
|
||||
}
|
||||
FluText{
|
||||
id:text_TitleLarge
|
||||
text:"Title Large"
|
||||
padding: 0
|
||||
font: FluTextStyle.TitleLarge
|
||||
}
|
||||
FluText{
|
||||
id:text_Title
|
||||
text:"Title"
|
||||
padding: 0
|
||||
font: FluTextStyle.Title
|
||||
}
|
||||
FluText{
|
||||
id:text_Subtitle
|
||||
text:"Subtitle"
|
||||
padding: 0
|
||||
font: FluTextStyle.Subtitle
|
||||
}
|
||||
FluText{
|
||||
id:text_BodyStrong
|
||||
text:"Body Strong"
|
||||
padding: 0
|
||||
font: FluTextStyle.BodyStrong
|
||||
}
|
||||
FluText{
|
||||
id:text_Body
|
||||
text:"Body"
|
||||
padding: 0
|
||||
font: FluTextStyle.Body
|
||||
}
|
||||
FluText{
|
||||
id:text_Caption
|
||||
text:"Caption"
|
||||
padding: 0
|
||||
font: FluTextStyle.Caption
|
||||
}
|
||||
}
|
||||
|
||||
FluSlider{
|
||||
id:slider
|
||||
orientation: Qt.Vertical
|
||||
anchors{
|
||||
right: parent.right
|
||||
rightMargin: 45
|
||||
top: parent.top
|
||||
topMargin: 30
|
||||
}
|
||||
onValueChanged:{
|
||||
textScale = 1+value/100
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
132
example/qml-Qt6/page/T_Watermark.qml
Normal file
132
example/qml-Qt6/page/T_Watermark.qml
Normal file
@ -0,0 +1,132 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluContentPage{
|
||||
|
||||
title:"Watermark"
|
||||
|
||||
FluArea{
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 20
|
||||
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
left: parent.left
|
||||
leftMargin: 14
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
Layout.topMargin: 14
|
||||
FluText{
|
||||
text:"text:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluTextBox{
|
||||
id:text_box
|
||||
text:"会磨刀的小猪"
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"textSize:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id:slider_text_size
|
||||
value: 20
|
||||
from: 13
|
||||
to:50
|
||||
}
|
||||
}
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"gapX:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id:slider_gap_x
|
||||
value: 100
|
||||
}
|
||||
}
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"gapY:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id:slider_gap_y
|
||||
value: 100
|
||||
}
|
||||
}
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"offsetX:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id:slider_offset_x
|
||||
value: 50
|
||||
}
|
||||
}
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"offsetY:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id:slider_offset_y
|
||||
value: 50
|
||||
}
|
||||
}
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"rotate:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id:slider_rotate
|
||||
value: 22
|
||||
from: 0
|
||||
to:360
|
||||
}
|
||||
}
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"textColor:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluColorPicker{
|
||||
id:color_picker
|
||||
Component.onCompleted: {
|
||||
setColor(Qt.rgba(0,0,0,0.1))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluWatermark{
|
||||
id:water_mark
|
||||
anchors.fill: parent
|
||||
text:text_box.text
|
||||
textColor: color_picker.colorValue
|
||||
textSize: slider_text_size.value
|
||||
rotate: slider_rotate.value
|
||||
gap:Qt.point(slider_gap_x.value,slider_gap_y.value)
|
||||
offset: Qt.point(slider_offset_x.value,slider_offset_y.value)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user