mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-07-03 08:35:28 +08:00
Qt5.15.2 compatible
This commit is contained in:
zhuzichu
150
example/qml-Qt6/window/AboutWindow.qml
Normal file
150
example/qml-Qt6/window/AboutWindow.qml
Normal file
@ -0,0 +1,150 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
CustomWindow {
|
||||
|
||||
id:window
|
||||
title:"关于"
|
||||
width: 600
|
||||
height: 600
|
||||
fixSize: true
|
||||
launchMode: FluWindowType.SingleTask
|
||||
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 15
|
||||
spacing: 14
|
||||
FluText{
|
||||
text:"FluentUI"
|
||||
font: FluTextStyle.Title
|
||||
MouseArea{
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
FluApp.navigate("/")
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"v%1".arg(appInfo.version)
|
||||
font: FluTextStyle.Body
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 15
|
||||
FluText{
|
||||
text:"作者："
|
||||
}
|
||||
FluText{
|
||||
text:"朱子楚"
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
Layout.leftMargin: 15
|
||||
FluText{
|
||||
text:"GitHub："
|
||||
}
|
||||
FluTextButton{
|
||||
id:text_hublink
|
||||
topPadding:0
|
||||
bottomPadding:0
|
||||
text:"https://github.com/zhuzichu520/FluentUI"
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
onClicked: {
|
||||
Qt.openUrlExternally(text_hublink.text)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
Layout.leftMargin: 15
|
||||
FluText{
|
||||
text:"B站："
|
||||
}
|
||||
FluTextButton{
|
||||
topPadding:0
|
||||
bottomPadding:0
|
||||
text:"https://www.bilibili.com/video/BV1mg4y1M71w/"
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
onClicked: {
|
||||
Qt.openUrlExternally(text)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
Layout.leftMargin: 15
|
||||
FluText{
|
||||
id:text_info
|
||||
text:"如果该项目对你有作用，就请点击上方链接给一个免费的star，或者一键三连，谢谢！"
|
||||
ColorAnimation {
|
||||
id: animation
|
||||
target: text_info
|
||||
property: "color"
|
||||
from: "red"
|
||||
to: "blue"
|
||||
duration: 1000
|
||||
running: true
|
||||
loops: Animation.Infinite
|
||||
easing.type: Easing.InOutQuad
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 15
|
||||
FluText{
|
||||
text:"捐赠："
|
||||
}
|
||||
}
|
||||
|
||||
Item{
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.preferredHeight: 252
|
||||
Row{
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: 30
|
||||
Image{
|
||||
width: 250
|
||||
height: 250
|
||||
source: "qrc:/example/res/image/qrcode_wx.jpg"
|
||||
}
|
||||
Image{
|
||||
width: 250
|
||||
height: 250
|
||||
source: "qrc:/example/res/image/qrcode_zfb.jpg"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
Layout.leftMargin: 15
|
||||
Layout.topMargin: 20
|
||||
FluText{
|
||||
id:text_desc
|
||||
text:"个人开发，维护不易，你们的捐赠就是我继续更新的动力！\n有什么问题提Issues，只要时间充足我就会解决的！！"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
85
example/qml-Qt6/window/HotloadWindow.qml
Normal file
85
example/qml-Qt6/window/HotloadWindow.qml
Normal file
@ -0,0 +1,85 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
import example
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
CustomWindow {
|
||||
|
||||
id:window
|
||||
title:"热加载"
|
||||
width: 800
|
||||
height: 600
|
||||
minimumWidth: 520
|
||||
minimumHeight: 200
|
||||
launchMode: FluWindowType.SingleTask
|
||||
FileWatcher{
|
||||
id:watcher
|
||||
onFileChanged: {
|
||||
loader.reload()
|
||||
}
|
||||
}
|
||||
FluArea{
|
||||
anchors.fill: parent
|
||||
FluRemoteLoader{
|
||||
id:loader
|
||||
anchors.fill: parent
|
||||
statusMode: FluStatusViewType.Success
|
||||
lazy: true
|
||||
errorItem: Item{
|
||||
FluText{
|
||||
text:loader.itemLodaer().sourceComponent.errorString()
|
||||
color:"red"
|
||||
anchors.fill: parent
|
||||
wrapMode: Text.WrapAnywhere
|
||||
padding: 20
|
||||
verticalAlignment: Qt.AlignVCenter
|
||||
horizontalAlignment: Qt.AlignHCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"拖入qml文件"
|
||||
font.pixelSize: 26
|
||||
anchors.centerIn: parent
|
||||
visible: !loader.itemLodaer().item && loader.statusMode === FluStatusViewType.Success
|
||||
}
|
||||
Rectangle{
|
||||
radius: 4
|
||||
anchors.fill: parent
|
||||
color: "#33333333"
|
||||
visible: drop_area.containsDrag
|
||||
}
|
||||
DropArea{
|
||||
id:drop_area
|
||||
anchors.fill: parent
|
||||
onEntered:
|
||||
(event)=>{
|
||||
if(!event.hasUrls){
|
||||
event.accepted = false
|
||||
return
|
||||
}
|
||||
if (event.urls.length !== 1) {
|
||||
event.accepted = false
|
||||
return
|
||||
}
|
||||
var url = event.urls[0].toString()
|
||||
var fileExtension = url.substring(url.lastIndexOf(".") + 1)
|
||||
if (fileExtension !== "qml") {
|
||||
event.accepted = false
|
||||
return
|
||||
}
|
||||
return true
|
||||
}
|
||||
onDropped:
|
||||
(event)=>{
|
||||
var path = event.urls[0].toString()
|
||||
loader.source = path
|
||||
watcher.path = path
|
||||
loader.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
63
example/qml-Qt6/window/LoginWindow.qml
Normal file
63
example/qml-Qt6/window/LoginWindow.qml
Normal file
@ -0,0 +1,63 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
CustomWindow {
|
||||
|
||||
id:window
|
||||
title:"登录"
|
||||
width: 400
|
||||
height: 400
|
||||
fixSize: true
|
||||
|
||||
onInitArgument:
|
||||
(argument)=>{
|
||||
textbox_uesrname.updateText(argument.username)
|
||||
textbox_password.focus = true
|
||||
}
|
||||
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
FluAutoSuggestBox{
|
||||
id:textbox_uesrname
|
||||
items:[{title:"Admin"},{title:"User"}]
|
||||
placeholderText: "请输入账号"
|
||||
Layout.preferredWidth: 260
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
||||
FluTextBox{
|
||||
id:textbox_password
|
||||
Layout.topMargin: 20
|
||||
Layout.preferredWidth: 260
|
||||
placeholderText: "请输入密码"
|
||||
echoMode:TextInput.Password
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
||||
FluFilledButton{
|
||||
text:"登录"
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.topMargin: 20
|
||||
onClicked:{
|
||||
if(textbox_password.text === ""){
|
||||
showError("请随便输入一个密码")
|
||||
return
|
||||
}
|
||||
onResult({password:textbox_password.text})
|
||||
window.close()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
280
example/qml-Qt6/window/MainWindow.qml
Normal file
280
example/qml-Qt6/window/MainWindow.qml
Normal file
@ -0,0 +1,280 @@
|
||||
import QtQuick
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import Qt.labs.platform
|
||||
import FluentUI
|
||||
import example
|
||||
import "qrc:///example/qml/component"
|
||||
import "qrc:///example/qml/global"
|
||||
|
||||
CustomWindow {
|
||||
|
||||
id:window
|
||||
title: "FluentUI"
|
||||
width: 1000
|
||||
height: 640
|
||||
closeDestory:false
|
||||
minimumWidth: 520
|
||||
minimumHeight: 200
|
||||
appBarVisible: false
|
||||
launchMode: FluWindowType.SingleTask
|
||||
|
||||
closeFunc:function(event){
|
||||
dialog_close.open()
|
||||
event.accepted = false
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
FluTools.setQuitOnLastWindowClosed(false)
|
||||
tour.open()
|
||||
}
|
||||
|
||||
SystemTrayIcon {
|
||||
id:system_tray
|
||||
visible: true
|
||||
icon.source: "qrc:/example/res/image/favicon.ico"
|
||||
tooltip: "FluentUI"
|
||||
menu: Menu {
|
||||
MenuItem {
|
||||
text: "退出"
|
||||
onTriggered: {
|
||||
window.deleteWindow()
|
||||
FluApp.closeApp()
|
||||
}
|
||||
}
|
||||
}
|
||||
onActivated:
|
||||
(reason)=>{
|
||||
if(reason === SystemTrayIcon.Trigger){
|
||||
window.show()
|
||||
window.raise()
|
||||
window.requestActivate()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluContentDialog{
|
||||
id:dialog_close
|
||||
title:"退出"
|
||||
message:"确定要退出程序吗？"
|
||||
negativeText:"最小化"
|
||||
buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
|
||||
onNegativeClicked:{
|
||||
window.hide()
|
||||
system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
|
||||
}
|
||||
positiveText:"退出"
|
||||
neutralText:"取消"
|
||||
onPositiveClicked:{
|
||||
window.deleteWindow()
|
||||
FluApp.closeApp()
|
||||
}
|
||||
}
|
||||
|
||||
Flipable{
|
||||
id:flipable
|
||||
anchors.fill: parent
|
||||
property bool flipped: false
|
||||
property real flipAngle: 0
|
||||
transform: Rotation {
|
||||
id: rotation
|
||||
origin.x: flipable.width/2
|
||||
origin.y: flipable.height/2
|
||||
axis { x: 0; y: 1; z: 0 }
|
||||
angle: flipable.flipAngle
|
||||
|
||||
}
|
||||
states: State {
|
||||
PropertyChanges { target: flipable; flipAngle: 180 }
|
||||
when: flipable.flipped
|
||||
}
|
||||
transitions: Transition {
|
||||
NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutCubic}
|
||||
}
|
||||
back: Item{
|
||||
anchors.fill: flipable
|
||||
visible: flipable.flipAngle !== 0
|
||||
FluAppBar {
|
||||
anchors {
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
}
|
||||
darkText: lang.dark_mode
|
||||
showDark: true
|
||||
z:7
|
||||
darkClickListener:(button)=>handleDarkChanged(button)
|
||||
}
|
||||
Row{
|
||||
z:8
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
topMargin: FluTools.isMacos() ? 20 : 5
|
||||
leftMargin: 5
|
||||
}
|
||||
FluIconButton{
|
||||
iconSource: FluentIcons.ChromeBack
|
||||
width: 30
|
||||
height: 30
|
||||
iconSize: 13
|
||||
onClicked: {
|
||||
flipable.flipped = false
|
||||
}
|
||||
}
|
||||
FluIconButton{
|
||||
iconSource: FluentIcons.Sync
|
||||
width: 30
|
||||
height: 30
|
||||
iconSize: 13
|
||||
onClicked: {
|
||||
loader.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluRemoteLoader{
|
||||
id:loader
|
||||
lazy: true
|
||||
anchors.fill: parent
|
||||
// source: "http://localhost:9000/RemoteComponent.qml"
|
||||
source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
|
||||
}
|
||||
}
|
||||
front: Item{
|
||||
id:page_front
|
||||
visible: flipable.flipAngle !== 180
|
||||
anchors.fill: flipable
|
||||
FluAppBar {
|
||||
id:app_bar_front
|
||||
anchors {
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
}
|
||||
darkText: lang.dark_mode
|
||||
showDark: true
|
||||
darkClickListener:(button)=>handleDarkChanged(button)
|
||||
z:7
|
||||
}
|
||||
FluNavigationView{
|
||||
property int clickCount: 0
|
||||
id:nav_view
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
z:999
|
||||
//Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
|
||||
pageMode: FluNavigationViewType.Stack
|
||||
//NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
|
||||
// pageMode: FluNavigationViewType.NoStack
|
||||
items: ItemsOriginal
|
||||
footerItems:ItemsFooter
|
||||
topPadding:FluTools.isMacos() ? 20 : 0
|
||||
displayMode:MainEvent.displayMode
|
||||
logo: "qrc:/example/res/image/favicon.ico"
|
||||
title:"FluentUI"
|
||||
onLogoClicked:{
|
||||
clickCount += 1
|
||||
showSuccess("点击%1次".arg(clickCount))
|
||||
if(clickCount === 5){
|
||||
loader.reload()
|
||||
flipable.flipped = true
|
||||
clickCount = 0
|
||||
}
|
||||
}
|
||||
autoSuggestBox:FluAutoSuggestBox{
|
||||
width: 280
|
||||
anchors.centerIn: parent
|
||||
iconSource: FluentIcons.Search
|
||||
items: ItemsOriginal.getSearchData()
|
||||
placeholderText: lang.search
|
||||
onItemClicked:
|
||||
(data)=>{
|
||||
ItemsOriginal.startPageByItem(data)
|
||||
}
|
||||
}
|
||||
Component.onCompleted: {
|
||||
ItemsOriginal.navigationView = nav_view
|
||||
ItemsFooter.navigationView = nav_view
|
||||
setCurrentIndex(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component{
|
||||
id:com_reveal
|
||||
CircularReveal{
|
||||
id:reveal
|
||||
target:window.contentItem
|
||||
anchors.fill: parent
|
||||
onAnimationFinished:{
|
||||
//动画结束后释放资源
|
||||
loader_reveal.sourceComponent = undefined
|
||||
}
|
||||
onImageChanged: {
|
||||
changeDark()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader{
|
||||
id:loader_reveal
|
||||
anchors.fill: parent
|
||||
}
|
||||
|
||||
function distance(x1,y1,x2,y2){
|
||||
return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
|
||||
}
|
||||
|
||||
function handleDarkChanged(button){
|
||||
if(FluTools.isMacos() || !FluTheme.enableAnimation){
|
||||
changeDark()
|
||||
}else{
|
||||
loader_reveal.sourceComponent = com_reveal
|
||||
var target = window.contentItem
|
||||
var pos = button.mapToItem(target,0,0)
|
||||
var mouseX = pos.x
|
||||
var mouseY = pos.y
|
||||
var radius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
|
||||
var reveal = loader_reveal.item
|
||||
reveal.start(reveal.width*Screen.devicePixelRatio,reveal.height*Screen.devicePixelRatio,Qt.point(mouseX,mouseY),radius)
|
||||
}
|
||||
}
|
||||
|
||||
function changeDark(){
|
||||
if(FluTheme.dark){
|
||||
FluTheme.darkMode = FluThemeType.Light
|
||||
}else{
|
||||
FluTheme.darkMode = FluThemeType.Dark
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "F5"
|
||||
context: Qt.WindowShortcut
|
||||
onActivated: {
|
||||
if(flipable.flipped){
|
||||
loader.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "F6"
|
||||
context: Qt.WindowShortcut
|
||||
onActivated: {
|
||||
tour.open()
|
||||
}
|
||||
}
|
||||
|
||||
FluTour{
|
||||
id:tour
|
||||
steps:[
|
||||
{title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()},
|
||||
{title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()}
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
35
example/qml-Qt6/window/SingleInstanceWindow.qml
Normal file
35
example/qml-Qt6/window/SingleInstanceWindow.qml
Normal file
@ -0,0 +1,35 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
CustomWindow {
|
||||
|
||||
id:window
|
||||
title:"SingleInstance"
|
||||
width: 500
|
||||
height: 600
|
||||
fixSize: true
|
||||
launchMode: FluWindowType.SingleInstance
|
||||
|
||||
FluTextBox{
|
||||
anchors{
|
||||
top:parent.top
|
||||
topMargin:60
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
wrapMode: Text.WrapAnywhere
|
||||
anchors{
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
leftMargin: 20
|
||||
rightMargin: 20
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"我是一个SingleInstance模式的窗口，如果我存在，我会销毁之前的窗口，并创建一个新窗口"
|
||||
}
|
||||
}
|
||||
21
example/qml-Qt6/window/SingleTaskWindow.qml
Normal file
21
example/qml-Qt6/window/SingleTaskWindow.qml
Normal file
@ -0,0 +1,21 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
CustomWindow {
|
||||
|
||||
id:window
|
||||
title:"SingleTask"
|
||||
width: 500
|
||||
height: 600
|
||||
fixSize: true
|
||||
launchMode: FluWindowType.SingleTask
|
||||
|
||||
FluText{
|
||||
anchors.centerIn: parent
|
||||
text:"我是一个SingleTask模式的窗口，如果我存在，我就激活窗口"
|
||||
}
|
||||
|
||||
}
|
||||
43
example/qml-Qt6/window/StandardWindow.qml
Normal file
43
example/qml-Qt6/window/StandardWindow.qml
Normal file
@ -0,0 +1,43 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
CustomWindow {
|
||||
|
||||
id:window
|
||||
title:"Standard"
|
||||
width: 500
|
||||
height: 600
|
||||
fixSize: true
|
||||
launchMode: FluWindowType.Standard
|
||||
|
||||
FluMenuBar {
|
||||
FluMenu {
|
||||
title: qsTr("File")
|
||||
Action { text: qsTr("New...") }
|
||||
Action { text: qsTr("Open...") }
|
||||
Action { text: qsTr("Save") }
|
||||
Action { text: qsTr("Save As...") }
|
||||
FluMenuSeparator { }
|
||||
Action { text: qsTr("Quit") }
|
||||
}
|
||||
FluMenu {
|
||||
title: qsTr("Edit")
|
||||
Action { text: qsTr("Cut") }
|
||||
Action { text: qsTr("Copy") }
|
||||
Action { text: qsTr("Paste") }
|
||||
}
|
||||
FluMenu {
|
||||
title: qsTr("Help")
|
||||
Action { text: qsTr("About") }
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
anchors.centerIn: parent
|
||||
text:"我是一个Standard模式的窗口，每次我都会创建一个新的窗口"
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user