amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-26 13:27:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Qt5.15.2 compatible

Browse Source
This commit is contained in:
zhuzichu 2023-08-24 15:50:37 +08:00
parent cb34c9e48d
commit be5e8a4a88
324 changed files with 40654 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
.cmake/QmlPlugin.cmake Normal file
View File

@ -0,0 +1,139 @@
include(CMakeParseArguments)
find_package(Qt5 REQUIRED COMPONENTS Core)
function(FindQmlPluginDump)
get_target_property (QT_QMAKE_EXECUTABLE Qt5::qmake IMPORTED_LOCATION)
execute_process(
COMMAND ${QT_QMAKE_EXECUTABLE} -query QT_INSTALL_BINS
OUTPUT_VARIABLE QT_BIN_DIR
OUTPUT_STRIP_TRAILING_WHITESPACE
)
endfunction()
function(FindQtInstallQml)
execute_process(
COMMAND ${QT_QMAKE_EXECUTABLE} -query QT_INSTALL_QML
OUTPUT_VARIABLE PROC_RESULT
OUTPUT_STRIP_TRAILING_WHITESPACE
)
set(QT_INSTALL_QML ${PROC_RESULT} PARENT_SCOPE)
endfunction()
function(add_qmlplugin TARGET)
set(options NO_AUTORCC NO_AUTOMOC)
set(oneValueArgs URI VERSION BINARY_DIR QMLDIR LIBTYPE)
set(multiValueArgs SOURCES QMLFILES QMLFILESALIAS)
cmake_parse_arguments(QMLPLUGIN "${options}" "${oneValueArgs}" "${multiValueArgs}" ${ARGN})
if(NOT QMLPLUGIN_URI OR NOT QMLPLUGIN_VERSION OR NOT QMLPLUGIN_QMLDIR OR NOT QMLPLUGIN_LIBTYPE)
message(WARNING "TARGET,URI,VERSION,qmldir and LIBTYPE must be set, no files generated")
return()
endif()
if(NOT QMLPLUGIN_BINARY_DIR)
set(QMLPLUGIN_BINARY_DIR ${CMAKE_BINARY_DIR}/${QMLPLUGIN_URI})
endif()
add_library(${TARGET} ${QMLPLUGIN_LIBTYPE}
${QMLPLUGIN_SOURCES}
)
set(LIBRARY_OUTPUT_PATH ${CMAKE_CURRENT_BINARY_DIR}/lib)
add_custom_target("${TARGET}-qmlfiles" SOURCES ${QMLPLUGIN_QMLFILES})
if(QMLPLUGIN_NO_AUTORCC)
set_target_properties(${TARGET} PROPERTIES AUTOMOC OFF)
else()
set_target_properties(${TARGET} PROPERTIES AUTOMOC ON)
endif()
if(QMLPLUGIN_NO_AUTOMOC)
set_target_properties(${TARGET} PROPERTIES AUTOMOC OFF)
else()
set_target_properties(${TARGET} PROPERTIES AUTOMOC ON)
endif()
if (${QMLPLUGIN_LIBTYPE} MATCHES "SHARED")
FindQmlPluginDump()
FindQtInstallQml()
if(QMLPLUGIN_BINARY_DIR)
set(MAKE_QMLPLUGINDIR_COMMAND ${CMAKE_COMMAND} -E make_directory ${QMLPLUGIN_BINARY_DIR})
endif()
set(COPY_QMLDIR_COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_LIST_DIR}/Qt5/${QMLPLUGIN_QMLDIR}/qmldir $<TARGET_FILE_DIR:${TARGET}>/${QMLPLUGIN_URI}/qmldir)
set(INSTALL_QMLDIR_COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_LIST_DIR}/Qt5/${QMLPLUGIN_QMLDIR}/qmldir ${QMLPLUGIN_BINARY_DIR}/qmldir)
set(COPY_QMLTYPES_COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_LIST_DIR}/Qt5/${QMLPLUGIN_QMLDIR}/plugins.qmltypes $<TARGET_FILE_DIR:${TARGET}>/${QMLPLUGIN_URI}/plugins.qmltypes)
set(INSTALL_QMLTYPES_COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_LIST_DIR}/Qt5/${QMLPLUGIN_QMLDIR}/plugins.qmltypes ${QMLPLUGIN_BINARY_DIR}/plugins.qmltypes)
set(COPY_LIBRARY_COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_BINARY_DIR}/$<TARGET_FILE_NAME:${TARGET}> $<TARGET_FILE_DIR:${TARGET}>/${QMLPLUGIN_URI})
set(INSTALL_LIBRARY_COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_BINARY_DIR}/$<TARGET_FILE_NAME:${TARGET}> ${QMLPLUGIN_BINARY_DIR})
if(QMLPLUGIN_QMLDIR)
set(COPY_QMLFILES_COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_CURRENT_LIST_DIR}/Qt5/${QMLPLUGIN_QMLDIR} $<TARGET_FILE_DIR:${TARGET}>/${QMLPLUGIN_URI})
else()
set(COPY_QMLFILES_COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_LIST_DIR}/${QMLPLUGIN_QMLFILES} $<TARGET_FILE_DIR:${TARGET}>/${QMLPLUGIN_URI})
endif()
set(INSTALL_QMLFILES_COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_CURRENT_LIST_DIR}/Qt5/${QMLPLUGIN_QMLDIR} ${QMLPLUGIN_BINARY_DIR})
if(QMLPLUGIN_BINARY_DIR)
add_custom_command(
TARGET ${TARGET}
POST_BUILD
COMMAND ${MAKE_QMLPLUGINDIR_COMMAND}
COMMAND ${COPY_QMLDIR_COMMAND}
COMMENT "Copying qmldir to binary directory"
)
else()
add_custom_command(
TARGET ${TARGET}
POST_BUILD
COMMAND ${COPY_QMLDIR_COMMAND}
COMMENT "Copying qmldir to binary directory"
)
endif()
if(QMLPLUGIN_BINARY_DIR)
add_custom_command(
TARGET ${TARGET}
POST_BUILD
COMMAND ${MAKE_QMLPLUGINDIR_COMMAND}
COMMAND ${COPY_QMLTYPES_COMMAND}
COMMENT "Copying qmltypes to binary directory"
)
else()
add_custom_command(
TARGET ${TARGET}
POST_BUILD
COMMAND ${COPY_QMLTYPES_COMMAND}
COMMENT "Copying qmltypes to binary directory"
)
endif()
add_custom_command(
TARGET ${TARGET}
POST_BUILD
COMMAND ${COPY_LIBRARY_COMMAND}
COMMENT "Copying Lib to binary plugin directory"
)
if(QMLPLUGIN_QMLFILES)
add_custom_command(
TARGET ${TARGET}
POST_BUILD
COMMAND ${COPY_QMLFILES_COMMAND}
COMMENT "Copying QML files to binary directory"
)
endif()
add_custom_command(
TARGET ${TARGET}
POST_BUILD
COMMAND ${GENERATE_QMLTYPES_COMMAND}
COMMENT "Generating plugin.qmltypes"
)
string(REPLACE "." "/" QMLPLUGIN_INSTALL_URI ${QMLPLUGIN_URI})
add_custom_command(
TARGET ${TARGET}
POST_BUILD
COMMAND ${INSTALL_QMLTYPES_COMMAND}
COMMAND ${INSTALL_QMLDIR_COMMAND}
COMMAND ${INSTALL_LIBRARY_COMMAND}
COMMAND ${INSTALL_QMLFILES_COMMAND}
COMMAND ${INSTALL_QMLTYPES_COMMAND}
COMMENT "Install library and aditional files"
)
endif()
endfunction()

5
CMakeLists.txt
View File

@ -11,9 +11,10 @@ option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
option(FLUENTUI_BUILD_FRAMELESSHEPLER "Build FramelessHelper." ON)
option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)
find_package(Qt6 REQUIRED COMPONENTS Core)
find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)
set(QT_SDK_DIR "${Qt6_DIR}")
set(QT_SDK_DIR "${Qt${QT_VERSION_MAJOR}_DIR}")
cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)

54
example/CMakeLists.txt
View File

@ -26,7 +26,8 @@ endif()
#获取文件路径分隔符（解决执行命令的时候有些平台会报错）
file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
find_package(Qt6 REQUIRED COMPONENTS Quick Svg Network)
find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
qt_standard_project_setup()
@ -50,19 +51,25 @@ foreach(filepath ${CPP_FILES})
list(APPEND sources_files ${filename})
endforeach(filepath)
#遍历所有qml文件
file(GLOB_RECURSE QML_PATHS *.qml)
foreach(filepath ${QML_PATHS})
if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
#遍历所有qml文件
file(GLOB_RECURSE QML_PATHS *.qml qmldir)
foreach(filepath ${QML_PATHS})
string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
if(${filepath} MATCHES "Qt${QT_VERSION_MAJOR}/")
string(REPLACE "qml-Qt${QT_VERSION_MAJOR}" "qml" filealias ${filename})
set_source_files_properties(${filename} PROPERTIES QT_RESOURCE_ALIAS ${filealias})
list(APPEND qml_files ${filename})
endforeach(filepath)
endif()
endforeach(filepath)
#遍历所有资源文件
file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp qmldir)
foreach(filepath ${RES_PATHS})
#遍历所有资源文件
file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp)
foreach(filepath ${RES_PATHS})
string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
list(APPEND resource_files ${filename})
endforeach(filepath)
endforeach(filepath)
endif()
#如果是Windows平台，则生成rc文件
set(EXAMPLE_VERSION_RC_PATH "")
@ -76,12 +83,12 @@ endif()
#添加可执行文件
if (WIN32)
qt_add_executable(example
add_executable(example
${sources_files}
${EXAMPLE_VERSION_RC_PATH}
)
else ()
qt_add_executable(example
add_executable(example
${sources_files}
)
endif ()
@ -102,14 +109,21 @@ if(WIN32)
)
endif()
#添加qml模块
qt_add_qml_module(example
if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
#添加qml模块
qt_add_qml_module(example
URI "example"
VERSION 1.0
QML_FILES ${qml_files}
RESOURCES ${resource_files}
RESOURCE_PREFIX "/"
)
)
else()
target_include_directories(example PRIVATE
${CMAKE_CURRENT_SOURCE_DIR}
)
target_sources(example PRIVATE resource.qrc)
endif()
#导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
target_include_directories(example PRIVATE
@ -128,9 +142,9 @@ set_target_properties(example PROPERTIES
#链接库
if (FLUENTUI_BUILD_STATIC_LIB)
target_link_libraries(example PRIVATE
Qt::Quick
Qt::Svg
Qt::Network
Qt${QT_VERSION_MAJOR}::Quick
Qt${QT_VERSION_MAJOR}::Svg
Qt${QT_VERSION_MAJOR}::Network
fluentui
fluentuiplugin
FramelessHelper::Core
@ -138,9 +152,9 @@ if (FLUENTUI_BUILD_STATIC_LIB)
)
else()
target_link_libraries(example PRIVATE
Qt::Quick
Qt::Svg
Qt::Network
Qt${QT_VERSION_MAJOR}::Quick
Qt${QT_VERSION_MAJOR}::Svg
Qt${QT_VERSION_MAJOR}::Network
fluentuiplugin
FramelessHelper::Core
FramelessHelper::Quick

44
example/qml-Qt6/App.qml Normal file
View File

@ -0,0 +1,44 @@
import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
Window {
id: app
flags: Qt.SplashScreen
FluHttpInterceptor{
id:interceptor
function onIntercept(request){
if(request.method === "get"){
request.params["method"] = "get"
}
if(request.method === "post"){
request.params["method"] = "post"
}
request.headers["token"] ="yyds"
request.headers["os"] ="pc"
console.debug(JSON.stringify(request))
return request
}
}
Component.onCompleted: {
FluApp.init(app)
FluTheme.darkMode = FluThemeType.System
FluTheme.enableAnimation = true
FluApp.routes = {
"/":"qrc:/example/qml/window/MainWindow.qml",
"/about":"qrc:/example/qml/window/AboutWindow.qml",
"/login":"qrc:/example/qml/window/LoginWindow.qml",
"/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
"/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
"/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
"/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"
}
FluApp.initialRoute = "/"
FluApp.httpInterceptor = interceptor
FluApp.run()
}
}

145
example/qml-Qt6/component/CodeExpander.qml Normal file
View File

@ -0,0 +1,145 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
FluExpander{
id:control
property string code: ""
headerText: "Source"
contentHeight:content.height
focus: false
FluMultilineTextBox{
id:content
width:parent.width
activeFocusOnTab: false
activeFocusOnPress: false
readOnly: true
text:highlightQmlCode(code)
textFormat: FluMultilineTextBox.RichText
KeyNavigation.priority: KeyNavigation.BeforeItem
background:Rectangle{
radius: 4
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.width: 1
}
}
FluIconButton{
iconSource:FluentIcons.Copy
anchors{
right: parent.right
top: parent.top
rightMargin: 5
topMargin: 5
}
onClicked:{
FluTools.clipText(FluTools.html2PlantText(content.text))
showSuccess("复制成功")
}
}
function htmlEncode(e){
var i,s;
for(i in s={
"&":/&/g,//""//":/"/g,"'":/'/g,
"<":/</g,">":/>/g,"<br/>":/\n/g,
" ":/ /g," ":/\t/g
})e=e.replace(s[i],i);
return e;
}
function highlightQmlCode(code) {
// 定义 QML 关键字列表
var qmlKeywords = [
"FluTextButton",
"FluAppBar",
"FluAutoSuggestBox",
"FluBadge",
"FluButton",
"FluCalendarPicker",
"FluCalendarView",
"FluCarousel",
"FluCheckBox",
"FluColorPicker",
"FluColorView",
"FluComboBox",
"FluContentDialog",
"FluContentPage",
"FluDatePicker",
"FluDivider",
"FluDropDownButton",
"FluExpander",
"FluFilledButton",
"FluFlipView",
"FluFocusRectangle",
"FluIcon",
"FluIconButton",
"FluInfoBar",
"FluItem",
"FluMediaPlayer",
"FluMenu",
"FluMenuItem",
"FluMultilineTextBox",
"FluNavigationView",
"FluObject",
"FluPaneItem",
"FluPaneItemExpander",
"FluPaneItemHeader",
"FluPaneItemSeparator",
"FluPivot",
"FluPivotItem",
"FluProgressBar",
"FluProgressRing",
"FluRadioButton",
"FluRectangle",
"FluScrollablePage",
"FluScrollBar",
"FluShadow",
"FluSlider",
"FluTabView",
"FluText",
"FluTextArea",
"FluTextBox",
"FluTextBoxBackground",
"FluTextBoxMenu",
"FluTextButton",
"FluTextFiled",
"FluTimePicker",
"FluToggleSwitch",
"FluTooltip",
"FluTreeView",
"FluWindow",
"FluWindowResize",
"FluToggleButton",
"FluTableView",
"FluColors",
"FluTheme",
"FluStatusView",
"FluRatingControl",
"FluPasswordBox",
"FluBreadcrumbBar",
"FluCopyableText",
"FluAcrylic",
"FluRemoteLoader",
"FluMenuBar",
"FluPagination",
"FluRadioButtons",
"FluImage",
"FluSpinBox",
"FluHttp",
"FluWatermark",
"FluTour",
"FluQRCode",
"FluTimeline",
"FluChart"
];
code = code.replace(/\n/g, "<br>");
code = code.replace(/ /g, "&nbsp;");
return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
}
}

64
example/qml-Qt6/component/CustomWindow.qml Normal file
View File

@ -0,0 +1,64 @@
import QtQuick
import QtQuick.Layouts
import FluentUI
import org.wangwenx190.FramelessHelper
FluWindow {
id:window
property bool fixSize
property alias titleVisible: title_bar.titleVisible
property bool appBarVisible: true
default property alias content: container.data
FluAppBar {
id: title_bar
title: window.title
visible: window.appBarVisible
icon:"qrc:/example/res/image/favicon.ico"
anchors {
top: parent.top
left: parent.left
right: parent.right
}
darkText: lang.dark_mode
}
Item{
id:container
anchors{
top: title_bar.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
}
clip: true
}
FramelessHelper{
id:framless_helper
onReady: {
setTitleBarItem(title_bar)
moveWindowToDesktopCenter()
setHitTestVisible(title_bar.minimizeButton())
setHitTestVisible(title_bar.maximizeButton())
setHitTestVisible(title_bar.closeButton())
setWindowFixedSize(fixSize)
title_bar.maximizeButton.visible = !fixSize
if (blurBehindWindowEnabled)
window.background = undefined
window.show()
}
}
Connections{
target: FluTheme
function onDarkChanged(){
if (FluTheme.dark)
FramelessUtils.systemTheme = FramelessHelperConstants.Dark
else
FramelessUtils.systemTheme = FramelessHelperConstants.Light
}
}
function setHitTestVisible(com){
framless_helper.setHitTestVisible(com)
}
function setTitleBarItem(com){
framless_helper.setTitleBarItem(com)
}
}

30
example/qml-Qt6/global/ItemsFooter.qml Normal file
View File

@ -0,0 +1,30 @@
pragma Singleton
import QtQuick
import FluentUI
FluObject{
property var navigationView
id:footer_items
FluPaneItemSeparator{}
FluPaneItem{
title:lang.about
icon:FluentIcons.Contact
tapFunc:function(){
FluApp.navigate("/about")
}
}
FluPaneItem{
title:lang.settings
icon:FluentIcons.Settings
onTap:{
navigationView.push("qrc:/example/qml/page/T_Settings.qml")
}
}
}

483
example/qml-Qt6/global/ItemsOriginal.qml Normal file
View File

@ -0,0 +1,483 @@
pragma Singleton
import QtQuick
import FluentUI
FluObject{
property var navigationView
function rename(item, newName){
if(newName && newName.trim().length>0){
item.title = newName;
}
}
FluPaneItem{
id:item_home
count: 9
title:lang.home
infoBadge:FluBadge{
count: item_home.count
}
icon:FluentIcons.Home
onTap:{
if(navigationView.getCurrentUrl()){
item_home.count = 0
}
navigationView.push("qrc:/example/qml/page/T_Home.qml")
}
editDelegate: FluTextBox{
text:item_home.title
}
menuDelegate: FluMenu{
id:nav_item_right_menu
width: 120
FluMenuItem{
text: "重命名"
visible: true
onClicked: {
item_home.showEdit = true
}
}
}
}
FluPaneItemExpander{
id:item_expander_basic_input
title:lang.basic_input
icon:FluentIcons.CheckboxComposite
editDelegate: FluTextBox{
text:item_expander_basic_input.title
}
menuDelegate: FluMenu{
FluMenuItem{
text: "重命名"
visible: true
onClicked: {
item_expander_basic_input.showEdit = true
}
}
}
FluPaneItem{
id:item_buttons
count: 99
infoBadge:FluBadge{
count: item_buttons.count
}
title:"Buttons"
image:"qrc:/example/res/image/control/Button.png"
recentlyUpdated:true
desc:"A control that responds to user input and raisesa Click event."
onTap:{
item_buttons.count = 0
navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
}
}
FluPaneItem{
id:item_text
title:"Text"
count: 5
infoBadge:FluBadge{
count: item_text.count
color: Qt.rgba(82/255,196/255,26/255,1)
}
onTap:{
item_text.count = 0
navigationView.push("qrc:/example/qml/page/T_Text.qml")
}
}
FluPaneItem{
title:"Image"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Image.qml")
}
}
FluPaneItem{
title:"Slider"
image:"qrc:/example/res/image/control/Slider.png"
recentlyUpdated:true
desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
onTap:{
navigationView.push("qrc:/example/qml/page/T_Slider.qml")
}
}
FluPaneItem{
title:"CheckBox"
image:"qrc:/example/res/image/control/Checkbox.png"
recentlyUpdated:true
desc:"A control that a user can select or clear."
onTap:{
navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
}
}
FluPaneItem{
title:"RadioButton"
onTap:{
navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
}
}
FluPaneItem{
title:"ToggleSwitch"
onTap:{
navigationView.push("qrc:/example/qml/page/T_ToggleSwitch.qml")
}
}
}
FluPaneItemExpander{
title:lang.form
icon:FluentIcons.GridView
FluPaneItem{
title:"TextBox"
onTap:{
navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
}
}
FluPaneItem{
title:"TimePicker"
onTap:{
navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
}
}
FluPaneItem{
title:"DatePicker"
onTap:{
navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
}
}
FluPaneItem{
title:"CalendarPicker"
onTap:{
navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
}
}
FluPaneItem{
title:"ColorPicker"
onTap:{
navigationView.push("qrc:/example/qml/page/T_ColorPicker.qml")
}
}
}
FluPaneItemExpander{
title:lang.surface
icon:FluentIcons.SurfaceHub
FluPaneItem{
title:"InfoBar"
image:"qrc:/example/res/image/control/InfoBar.png"
recentlyUpdated:true
desc:"An inline message to display app-wide statuschange information."
onTap:{
navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
}
}
FluPaneItem{
title:"Progress"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Progress.qml")
}
}
FluPaneItem{
title:"RatingControl"
onTap:{
navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
}
}
FluPaneItem{
title:"Badge"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Badge.qml")
}
}
FluPaneItem{
title:"Rectangle"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
}
}
FluPaneItem{
title:"StatusView"
onTap:{
navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
}
}
FluPaneItem{
title:"Carousel"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
}
}
FluPaneItem{
title:"Expander"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Expander.qml")
}
}
FluPaneItem{
title:"Watermark"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
}
}
}
FluPaneItemExpander{
title:lang.popus
icon:FluentIcons.ButtonMenu
FluPaneItem{
title:"Dialog"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
}
}
FluPaneItem{
id:item_combobox
title:"ComboBox"
count: 9
infoBadge:FluBadge{
count: item_combobox.count
color: Qt.rgba(250/255,173/255,20/255,1)
}
onTap:{
item_combobox.count = 0
navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
}
}
FluPaneItem{
title:"Tooltip"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
}
}
FluPaneItem{
title:"Menu"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Menu.qml")
}
}
}
FluPaneItemExpander{
title:lang.navigation
icon:FluentIcons.AllApps
FluPaneItem{
title:"Pivot"
image:"qrc:/example/res/image/control/Pivot.png"
recentlyAdded:true
order:3
desc:"Presents information from different sources in atabbed view."
onTap:{
navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
}
}
FluPaneItem{
title:"BreadcrumbBar"
onTap:{
navigationView.push("qrc:/example/qml/page/T_BreadcrumbBar.qml")
}
}
FluPaneItem{
title:"TabView"
image:"qrc:/example/res/image/control/TabView.png"
recentlyAdded:true
order:1
desc:"A control that displays a collection of tabs thatcan be used to display several documents."
onTap:{
navigationView.push("qrc:/example/qml/page/T_TabView.qml")
}
}
FluPaneItem{
title:"TreeView"
onTap:{
navigationView.push("qrc:/example/qml/page/T_TreeView.qml")
}
}
FluPaneItem{
title:"TableView"
image:"qrc:/example/res/image/control/DataGrid.png"
recentlyAdded:true
order:4
desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
onTap:{
navigationView.push("qrc:/example/qml/page/T_TableView.qml")
}
}
FluPaneItem{
title:"Pagination"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
}
}
FluPaneItem{
title:"MultiWindow"
onTap:{
navigationView.push("qrc:/example/qml/page/T_MultiWindow.qml")
}
}
FluPaneItem{
title:"FlipView"
image:"qrc:/example/res/image/control/FlipView.png"
recentlyAdded:true
order:2
desc:"Presents a collection of items that the user canflip through, one item at a time."
onTap:{
navigationView.push("qrc:/example/qml/page/T_FlipView.qml")
}
}
}
FluPaneItemExpander{
title:lang.theming
icon:FluentIcons.Brightness
FluPaneItem{
title:"Acrylic"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
}
}
FluPaneItem{
title:"Theme"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Theme.qml")
}
}
FluPaneItem{
title:"Typography"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Typography.qml")
}
}
FluPaneItem{
title:"Awesome"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Awesome.qml")
}
}
}
FluPaneItemSeparator{
spacing:10
size:1
}
FluPaneItemExpander{
title:lang.other
icon:FluentIcons.Shop
FluPaneItem{
title:"QRCode"
onTap:{
navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
}
}
FluPaneItem{
title:"Tour"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Tour.qml")
}
}
FluPaneItem{
title:"Timeline"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Timeline.qml")
}
}
FluPaneItem{
title:"Screenshot"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Screenshot.qml")
}
}
FluPaneItem{
title:"Captcha"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Captcha.qml")
}
}
FluPaneItem{
title:"Chart"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Chart.qml")
}
}
FluPaneItem{
title:"Http"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Http.qml")
}
}
FluPaneItem{
id:item_other
title:"RemoteLoader"
count: 99
infoBadge:FluBadge{
count: item_other.count
color: Qt.rgba(82/255,196/255,26/255,1)
}
onTap:{
item_other.count = 0
navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
}
}
FluPaneItem{
title:"HotLoader"
tapFunc:function(){
FluApp.navigate("/hotload")
}
}
}
function getRecentlyAddedData(){
var arr = []
for(var i=0;i<children.length;i++){
var item = children[i]
if(item instanceof FluPaneItem && item.recentlyAdded){
arr.push(item)
}
if(item instanceof FluPaneItemExpander){
for(var j=0;j<item.children.length;j++){
var itemChild = item.children[j]
if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
arr.push(itemChild)
}
}
}
}
arr.sort(function(o1,o2){ return o2.order-o1.order })
return arr
}
function getRecentlyUpdatedData(){
var arr = []
var items = navigationView.getItems();
for(var i=0;i<items.length;i++){
var item = items[i]
if(item instanceof FluPaneItem && item.recentlyUpdated){
arr.push(item)
}
}
return arr
}
function getSearchData(){
var arr = []
var items = navigationView.getItems();
for(var i=0;i<items.length;i++){
var item = items[i]
if(item instanceof FluPaneItem){
if (item.parent instanceof FluPaneItemExpander)
{
arr.push({title:`${item.parent.title} -> ${item.title}`,key:item.key})
}
else
arr.push({title:item.title,key:item.key})
}
}
return arr
}
function startPageByItem(data){
navigationView.startPageByItem(data)
}
}

9
example/qml-Qt6/global/MainEvent.qml Normal file
View File

@ -0,0 +1,9 @@
pragma Singleton
import QtQuick
import QtQuick.Controls
import FluentUI
QtObject {
property int displayMode : FluNavigationViewType.Auto
}

3
example/qml-Qt6/global/qmldir Normal file
View File

@ -0,0 +1,3 @@
singleton ItemsOriginal 1.0 ItemsOriginal.qml
singleton ItemsFooter 1.0 ItemsFooter.qml
singleton MainEvent 1.0 MainEvent.qml

114
example/qml-Qt6/page/T_Acrylic.qml Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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:'&nbsp;<img src="qrc:/example/res/image/image_1.jpg" align="top" width="144" height="102.4">&nbsp;考上中国皮城大学，杰斯武器工坊专业'
}
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
View 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
View 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
View 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
View 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
View 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
View 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)
}
}
}

150
example/qml-Qt6/window/AboutWindow.qml Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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模式的窗口，每次我都会创建一个新的窗口"
}
}

10
example/qml/App.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0
Window {
id: app

10
example/qml/component/CodeExpander.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
FluExpander{

8
example/qml/component/CustomWindow.qml
View File

@ -1,7 +1,7 @@
import QtQuick
import QtQuick.Layouts
import FluentUI
import org.wangwenx190.FramelessHelper
import QtQuick 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0
import org.wangwenx190.FramelessHelper 1.0
FluWindow {
id:window

4
example/qml/global/ItemsFooter.qml
View File

@ -1,7 +1,7 @@
pragma Singleton
import QtQuick
import FluentUI
import QtQuick 2.15
import FluentUI 1.0
FluObject{

4
example/qml/global/ItemsOriginal.qml
View File

@ -1,7 +1,7 @@
pragma Singleton
import QtQuick
import FluentUI
import QtQuick 2.15
import FluentUI 1.0
FluObject{

6
example/qml/global/MainEvent.qml
View File

@ -1,8 +1,8 @@
pragma Singleton
import QtQuick
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
QtObject {
property int displayMode : FluNavigationViewType.Auto

10
example/qml/page/T_Acrylic.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_Awesome.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
FluContentPage {

10
example/qml/page/T_Badge.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_BreadcrumbBar.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

11
example/qml/page/T_Buttons.qml
View File

@ -1,9 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Controls.Basic
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_CalendarPicker.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_Captcha.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_Carousel.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_Chart.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_CheckBox.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_ColorPicker.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_ComboBox.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_DatePicker.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_Dialog.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_Expander.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_FlipView.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_Home.qml
View File

@ -1,9 +1,9 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import "qrc:///example/qml/global"
import FluentUI
import FluentUI 1.0
FluScrollablePage{

14
example/qml/page/T_Http.qml
View File

@ -1,10 +1,10 @@
import QtQuick
import Qt.labs.platform
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Dialogs
import FluentUI
import QtQuick 2.15
import Qt.labs.platform 1.1
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.3
import FluentUI 1.0
import "qrc:///example/qml/component"
FluContentPage{

10
example/qml/page/T_Image.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_InfoBar.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_Menu.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_MultiWindow.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_Pagination.qml
View File

@ -1,9 +1,9 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import "qrc:///example/qml/component"
import FluentUI
import FluentUI 1.0
FluScrollablePage{

10
example/qml/page/T_Pivot.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_Progress.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

12
example/qml/page/T_QRCode.qml
View File

@ -1,9 +1,9 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import Qt5Compat.GraphicalEffects
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
import QtGraphicalEffects 1.15
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_RadioButton.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_RatingControl.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage {

10
example/qml/page/T_Rectangle.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Window
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluScrollablePage{

10
example/qml/page/T_RemoteLoader.qml
View File

@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
FluPage{

Some files were not shown because too many files have changed in this diff Show More