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

update

Browse Source
This commit is contained in:
朱子楚\zhuzi 2024-03-18 17:07:44 +08:00
parent 47bde34671
commit a587443ea7
193 changed files with 36086 additions and 9986 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CMakeLists.txt
View File

@ -13,6 +13,7 @@ list(APPEND CMAKE_MODULE_PATH ${CMAKE_SOURCE_DIR}/.cmake/)
include(GetGitRevisionDescription) include(GetGitRevisionDescription)
option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON) option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
set(FLUENTUI_BUILD_STATIC_LIB OFF)
find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core) find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core) find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)

107
example/CMakeLists.txt
View File

@ -4,6 +4,10 @@ project(example VERSION 1.0 LANGUAGES CXX)
#配置通用编译 #配置通用编译
set(CMAKE_CXX_STANDARD 17) set(CMAKE_CXX_STANDARD 17)
set(CMAKE_INCLUDE_CURRENT_DIR ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)
set(CMAKE_CXX_STANDARD_REQUIRED ON) set(CMAKE_CXX_STANDARD_REQUIRED ON)
#判断FluentUI库类型 #判断FluentUI库类型
@ -24,19 +28,11 @@ endif()
find_package(QT NAMES Qt6 Qt5 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) find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
if(QT_VERSION VERSION_GREATER_EQUAL "6.3") #添加国际化脚本
qt_standard_project_setup()
else()
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)
endif()
#国际化
find_program(QT_LUPDATE NAMES lupdate) find_program(QT_LUPDATE NAMES lupdate)
find_program(QT_LRELEASE NAMES lrelease) find_program(QT_LRELEASE NAMES lrelease)
file(GLOB TS_FILE_PATHS ${CMAKE_CURRENT_LIST_DIR}/ *.ts) file(GLOB TS_FILE_PATHS ${CMAKE_CURRENT_LIST_DIR}/ *.ts)
add_custom_target(UpdateTranslations add_custom_target(Script-UpdateTranslations
COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR} COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR} COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR} COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
@ -64,30 +60,6 @@ if(WIN32)
list(APPEND sources_files "src/app_dmp.h") list(APPEND sources_files "src/app_dmp.h")
endif() endif()
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 "qml-Qt6")
string(REPLACE "qml-Qt6" "qml" filealias ${filename})
set_source_files_properties(${filename} PROPERTIES QT_RESOURCE_ALIAS ${filealias})
if(${filename} MATCHES "qmldir")
list(APPEND resource_files ${filename})
else()
list(APPEND qml_files ${filename})
endif()
endif()
endforeach(filepath)
#遍历所有资源文件
file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.in)
foreach(filepath ${RES_PATHS})
string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
list(APPEND resource_files ${filename})
endforeach(filepath)
endif()
#如果是Windows平台，则生成rc文件，还有inno setup脚本文件 #如果是Windows平台，则生成rc文件，还有inno setup脚本文件
set(EXAMPLE_VERSION_RC_PATH "") set(EXAMPLE_VERSION_RC_PATH "")
if(WIN32) if(WIN32)
@ -103,21 +75,26 @@ configure_file(
endif() endif()
#添加可执行文件 #添加可执行文件
if (WIN32) list(APPEND sources_files ${PROJECT_NAME}.qrc)
add_executable(${PROJECT_NAME} if(WIN32)
list(APPEND sources_files ${EXAMPLE_VERSION_RC_PATH})
endif()
if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)
qt_add_executable(${PROJECT_NAME}
MANUAL_FINALIZATION
${sources_files} ${sources_files}
${EXAMPLE_VERSION_RC_PATH}
) )
else () else()
add_executable(${PROJECT_NAME} add_executable(${PROJECT_NAME}
${sources_files} ${sources_files}
) )
endif () endif()
add_dependencies(${PROJECT_NAME} Script-UpdateTranslations)
add_dependencies(${PROJECT_NAME} UpdateTranslations)
#复制程序运行所需要的动态库 #复制程序运行所需要的动态库
if(WIN32) if(WIN32)
message("-----------------------------")
message(${CMAKE_CXX_COMPILER_ID})
if(MSVC) if(MSVC)
if(CMAKE_SIZEOF_VOID_P EQUAL 4) if(CMAKE_SIZEOF_VOID_P EQUAL 4)
file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll) file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
@ -134,23 +111,6 @@ endif()
file(MAKE_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/source/) file(MAKE_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/source/)
file(COPY ${CMAKE_SOURCE_DIR}/src/ DESTINATION ${APPLICATION_DIR_PATH}/source/) file(COPY ${CMAKE_SOURCE_DIR}/src/ DESTINATION ${APPLICATION_DIR_PATH}/source/)
if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
#如果是Qt6.2以上，则使用qt_add_qml_module添加资源文件
qt_add_qml_module(${PROJECT_NAME}
URI ${PROJECT_NAME}
VERSION 1.0
QML_FILES ${qml_files}
RESOURCES ${resource_files}
RESOURCE_PREFIX "/"
)
else()
#如果是Qt6.2以下，则使用qrc添加资源文件
target_include_directories(${PROJECT_NAME} PRIVATE
${CMAKE_CURRENT_SOURCE_DIR}
)
target_sources(${PROJECT_NAME} PRIVATE ${PROJECT_NAME}.qrc)
endif()
#导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错 #导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
target_include_directories(${PROJECT_NAME} PRIVATE target_include_directories(${PROJECT_NAME} PRIVATE
${CMAKE_CURRENT_SOURCE_DIR}/src/component ${CMAKE_CURRENT_SOURCE_DIR}/src/component
@ -186,9 +146,28 @@ target_link_libraries(${PROJECT_NAME} PRIVATE
fluentuiplugin fluentuiplugin
) )
#安装 #添加部署脚本
install(TARGETS ${PROJECT_NAME} if (CMAKE_BUILD_TYPE MATCHES "Release")
BUNDLE DESTINATION . if (APPLE)
LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR} find_program(QT_DEPLOY_QT NAMES macdeployqt)
RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR} add_custom_target(Script-DeployRelease
) COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME} -qmldir=${CMAKE_CURRENT_LIST_DIR}
COMMENT "MacOs Deploying Qt Dependencies After Build........."
SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
)
endif()
if(WIN32)
find_program(QT_DEPLOY_QT NAMES windeployqt)
add_custom_target(Script-DeployRelease
COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe -qmldir=${CMAKE_CURRENT_LIST_DIR}
COMMENT "Windows Deploying Qt Dependencies After Build........."
SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
)
endif()
endif()

18
example/README.md Normal file
View File

@ -0,0 +1,18 @@
# FluentUI 脚手架开发说明
## 代码说明
文件编码格式请用utf-8不带bom，代码中最好不要含有中文（包括注释），中文可能会改变文件格式导致编译失败，还会出现乱码，显示中文请用国际化，c++中用tr函数，qml中用qsTr函数
### 脚本说明
1. **Script-UpdateTranslations**
用于更新ts与qm文件，当你的代码添加了tr或者qsTr函数后，执行这个脚本会更新ts文件，然后编写翻译后，再执行这个脚本，qm文件会更新生效
2. **Script-DeployRelease**
执行Qt的windeployqt或macdeployqt命令，这个脚本只在windows与macos才有，linux不支持

536
example/example_en_US.ts
View File

File diff suppressed because it is too large Load Diff

526
example/example_zh_CN.ts
View File

File diff suppressed because it is too large Load Diff

59
example/qml-Qt6/App.qml
View File

@ -1,59 +0,0 @@
import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
Item {
id: app
Connections{
target: FluTheme
function onDarkModeChanged(){
SettingsHelper.saveDarkMode(FluTheme.darkMode)
}
}
Connections{
target: FluApp
function onUseSystemAppBarChanged(){
SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
}
}
Connections{
target: TranslateHelper
function onCurrentChanged(){
SettingsHelper.saveLanguage(TranslateHelper.current)
}
}
Component.onCompleted: {
FluNetwork.openLog = false
FluNetwork.setInterceptor(function(param){
param.addHeader("Token","000000000000000000000")
})
FluApp.init(app,Qt.locale(TranslateHelper.current))
FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
FluTheme.darkMode = SettingsHelper.getDarkMode()
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",
"/crash":"qrc:/example/qml/window/CrashWindow.qml",
"/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
"/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
"/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
"/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
}
var args = Qt.application.arguments
if(args.length>=2 && args[1].startsWith("-crashed=")){
FluApp.navigate("/crash",{crashFilePath:args[1].replace("-crashed=","")})
}else{
FluApp.navigate("/")
}
}
}

132
example/qml-Qt6/chart/T_BarChart.qml
View File

@ -1,132 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Bar Chart")
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: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
}
}
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: 'horizontalBar'
chartData: { return {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js HorizontalBar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
}
}
}
}

74
example/qml-Qt6/chart/T_BubbleChart.qml
View File

@ -1,74 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Bubble Chart")
function randomScalingFactor() {
return Math.random().toFixed(1);
}
FluArea{
height: 370
width: 500
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: 'bubble'
chartData: {
return {
datasets: [{
label: 'First Dataset',
data: [{
x: 20,
y: 30,
r: 15
}, {
x: 12,
y: 70,
r: 20
}, {
x: 11,
y: 28,
r: 8
}, {
x: 9,
y: 28,
r: 10
}, {
x: 43,
y: 7,
r: 14
}, {
x: 22,
y: 22,
r: 12
}, {
x: 40,
y: 10,
r: 10
}],
backgroundColor: 'rgb(255, 99, 132)'
}]
}}
chartOptions: {return {
maintainAspectRatio: false,
responsive: true,
hoverMode: 'nearest',
intersect: true,
title: {
display: true,
text: 'Chart.js Bubble Chart - Multi Axis'
}
}
}
}
}
}

45
example/qml-Qt6/chart/T_LineChart.qml
View File

@ -1,45 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Line Chart")
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: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Line Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
}
}
}
}
}
}

93
example/qml-Qt6/chart/T_PieChart.qml
View File

@ -1,93 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Pie Chart")
FluArea{
width: 500
height: 370
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: "doughnut"
chartData: { return {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Doughnut Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
}
}
}
}
}
FluArea{
width: 500
height: 370
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: "pie"
chartData: { return {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Pie Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
}
}
}
}
}
}

57
example/qml-Qt6/chart/T_PolarAreaChart.qml
View File

@ -1,57 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Polar Area Chart")
FluArea{
width: 500
height: 370
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: 'polarArea'
chartData: { return {
labels: [
'Red',
'Green',
'Yellow',
'Grey',
'Blue'
],
datasets: [{
label: 'My First Dataset',
data: [11, 16, 7, 3, 14],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(75, 192, 192)',
'rgb(255, 205, 86)',
'rgb(201, 203, 207)',
'rgb(54, 162, 235)'
]
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js PolarArea Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
}
}
}
}
}
}

74
example/qml-Qt6/chart/T_RadarChart.qml
View File

@ -1,74 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Radar Chart")
FluArea{
width: 500
height: 370
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: 'radar'
chartData: { return {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running'
],
datasets:
[{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
label: 'My Second Dataset',
data: [28, 48, 40, 19, 96, 27, 100],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Radar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
elements: {
line: {
borderWidth: 3
}
}
}
}
}
}
}

123
example/qml-Qt6/chart/T_ScatterChart.qml
View File

@ -1,123 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Scatter 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
},
}],
}
}
}
}
}
}

144
example/qml-Qt6/component/CodeExpander.qml
View File

@ -1,144 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
FluExpander{
id:control
property string code: ""
headerText: qsTr("Source")
contentHeight:content.height
focus: false
FluCopyableText{
id:content
width:parent.width
text:highlightQmlCode(code)
textFormat: FluMultilineTextBox.RichText
padding: 10
topPadding: 10
leftPadding: 10
rightPadding: 10
bottomPadding: 10
}
FluIconButton{
iconSource:FluentIcons.Copy
anchors{
right: parent.right
top: parent.top
rightMargin: 5
topMargin: 5
}
onClicked:{
FluTools.clipText(FluTools.html2PlantText(content.text))
showSuccess(qsTr("The Copy is Successful"))
}
}
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) {
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",
"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",
"FluStatusLayout",
"FluRatingControl",
"FluPasswordBox",
"FluBreadcrumbBar",
"FluCopyableText",
"FluAcrylic",
"FluRemoteLoader",
"FluMenuBar",
"FluPagination",
"FluRadioButtons",
"FluImage",
"FluSpinBox",
"FluWatermark",
"FluTour",
"FluQRCode",
"FluTimeline",
"FluChart",
"FluRangeSlider",
"FluStaggeredLayout",
"FluProgressButton",
"FluLoadingButton",
"FluClip",
"FluNetwork",
"FluShortcutPicker"
];
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>");
}
}

33
example/qml-Qt6/global/ItemsFooter.qml
View File

@ -1,33 +0,0 @@
pragma Singleton
import QtQuick
import FluentUI
FluObject{
property var navigationView
property var paneItemMenu
id:footer_items
FluPaneItemSeparator{}
FluPaneItem{
title:qsTr("About")
icon:FluentIcons.Contact
onTapListener:function(){
FluApp.navigate("/about")
}
}
FluPaneItem{
title:qsTr("Settings")
menuDelegate: paneItemMenu
icon:FluentIcons.Settings
url:"qrc:/example/qml/page/T_Settings.qml"
onTap:{
navigationView.push(url)
}
}
}

532
example/qml-Qt6/global/ItemsOriginal.qml
View File

@ -1,532 +0,0 @@
pragma Singleton
import QtQuick
import FluentUI
FluObject{
property var navigationView
property var paneItemMenu
function rename(item, newName){
if(newName && newName.trim().length>0){
item.title = newName;
}
}
FluPaneItem{
id:item_home
count: 9
title: qsTr("Home")
menuDelegate: paneItemMenu
infoBadge: FluBadge{
count: item_home.count
}
icon: FluentIcons.Home
url: "qrc:/example/qml/page/T_Home.qml"
onTap: {
if(navigationView.getCurrentUrl()){
item_home.count = 0
}
navigationView.push(url)
}
}
FluPaneItemExpander{
title: qsTr("PaneItemExpander Disabled")
iconVisible: false
disabled: true
}
FluPaneItemExpander{
id: item_expander_basic_input
title: qsTr("Basic Input")
icon: FluentIcons.CheckboxComposite
FluPaneItem{
id: item_buttons
count: 99
infoBadge: FluBadge{
count: item_buttons.count
}
title: qsTr("Buttons")
menuDelegate: paneItemMenu
extra: ({image:"qrc:/example/res/image/control/Button.png",recentlyUpdated:true,desc:qsTr("A control that responds to user input and raisesa Click event.")})
url: "qrc:/example/qml/page/T_Buttons.qml"
onTap: {
item_buttons.count = 0
navigationView.push(url)
}
}
FluPaneItem{
id: item_text
title: qsTr("Text")
menuDelegate: paneItemMenu
count: 5
infoBadge: FluBadge{
count: item_text.count
color: Qt.rgba(82/255,196/255,26/255,1)
}
url: "qrc:/example/qml/page/T_Text.qml"
onTap: {
item_text.count = 0
navigationView.push(url)
}
}
FluPaneItem{
title: qsTr("Image")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Image.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Slider")
menuDelegate: paneItemMenu
extra: ({image:"qrc:/example/res/image/control/Slider.png",recentlyUpdated:true,desc:qsTr("A control that lets the user select from a rangeof values by moving a Thumb control along atrack.")})
url: "qrc:/example/qml/page/T_Slider.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("CheckBox")
menuDelegate: paneItemMenu
extra: ({image:"qrc:/example/res/image/control/Checkbox.png",recentlyUpdated:true,desc:qsTr("A control that a user can select or clear.")})
url: "qrc:/example/qml/page/T_CheckBox.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("RadioButton")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_RadioButton.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("ToggleSwitch")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_ToggleSwitch.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("PaneItem Disabled")
disabled: true
icon: FluentIcons.Error
}
}
FluPaneItemExpander{
title: qsTr("Form")
icon: FluentIcons.GridView
FluPaneItem {
title: qsTr("TextBox")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_TextBox.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("TimePicker")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_TimePicker.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("DatePicker")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_DatePicker.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("CalendarPicker")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_CalendarPicker.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("ColorPicker")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_ColorPicker.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("ShortcutPicker")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_ShortcutPicker.qml"
onTap: { navigationView.push(url) }
}
}
FluPaneItemExpander{
title: qsTr("Surface")
icon: FluentIcons.SurfaceHub
FluPaneItem{
title: qsTr("InfoBar")
menuDelegate: paneItemMenu
extra: ({image:"qrc:/example/res/image/control/InfoBar.png",recentlyUpdated:true,desc:qsTr("An inline message to display app-wide statuschange information.")})
url: "qrc:/example/qml/page/T_InfoBar.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Progress")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Progress.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("RatingControl")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_RatingControl.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Badge")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Badge.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Rectangle")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Rectangle.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Clip")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Clip.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Carousel")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Carousel.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Expander")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Expander.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Watermark")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Watermark.qml"
onTap: { navigationView.push(url) }
}
}
FluPaneItemExpander{
title: qsTr("Layout")
icon: FluentIcons.DockLeft
FluPaneItem {
title: qsTr("StaggeredLayout")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_StaggeredLayout.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("SplitLayout")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_SplitLayout.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("StatusLayout")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_StatusLayout.qml"
onTap: { navigationView.push(url) }
}
}
FluPaneItemExpander{
title: qsTr("Popus")
icon: FluentIcons.ButtonMenu
FluPaneItem{
title: qsTr("Dialog")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Dialog.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
id: item_combobox
title: qsTr("ComboBox")
menuDelegate: paneItemMenu
count: 9
infoBadge:FluBadge{
count: item_combobox.count
color: Qt.rgba(250/255,173/255,20/255,1)
}
url: "qrc:/example/qml/page/T_ComboBox.qml"
onTap: {
item_combobox.count = 0
navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
}
}
FluPaneItem{
title: qsTr("Tooltip")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Tooltip.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Menu")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Menu.qml"
onTap: { navigationView.push(url) }
}
}
FluPaneItemExpander{
title: qsTr("Navigation")
icon: FluentIcons.AllApps
FluPaneItem{
title: qsTr("Pivot")
menuDelegate: paneItemMenu
extra: ({image:"qrc:/example/res/image/control/Pivot.png",order:3,recentlyAdded:true,desc:qsTr("Presents information from different sources in a tabbed view.")})
url: "qrc:/example/qml/page/T_Pivot.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("BreadcrumbBar")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_BreadcrumbBar.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("TabView")
menuDelegate: paneItemMenu
extra: ({image:"qrc:/example/res/image/control/TabView.png",order:1,recentlyAdded:true,desc:qsTr("A control that displays a collection of tabs thatcan be used to display several documents.")})
url: "qrc:/example/qml/page/T_TabView.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("TreeView")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_TreeView.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("TableView")
menuDelegate: paneItemMenu
extra: ({image:"qrc:/example/res/image/control/DataGrid.png",order:4,recentlyAdded:true,desc:qsTr("The TableView control provides a flexible way to display a collection of data in rows and columns")})
url: "qrc:/example/qml/page/T_TableView.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Pagination")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Pagination.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("MultiWindow")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_MultiWindow.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("FlipView")
menuDelegate: paneItemMenu
extra: ({image:"qrc:/example/res/image/control/FlipView.png",order:2,recentlyAdded:true,desc:qsTr("Presents a collection of items that the user canflip through, one item at a time.")})
url: "qrc:/example/qml/page/T_FlipView.qml"
onTap: { navigationView.push(url) }
}
}
FluPaneItemExpander{
title: qsTr("Theming")
icon:FluentIcons.Brightness
FluPaneItem{
title: qsTr("Acrylic")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Acrylic.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Theme")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Theme.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Typography")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Typography.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Awesome")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Awesome.qml"
onTap: { navigationView.push(url) }
}
}
FluPaneItemExpander{
title: qsTr("Chart")
icon: FluentIcons.AreaChart
FluPaneItem{
title: qsTr("Bar Chart")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/chart/T_BarChart.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Line Chart")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/chart/T_LineChart.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Pie Chart")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/chart/T_PieChart.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Polar Area Chart")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/chart/T_PolarAreaChart.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Bubble Chart")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/chart/T_BubbleChart.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Scatter Chart")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/chart/T_ScatterChart.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Radar Chart")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/chart/T_RadarChart.qml"
onTap: { navigationView.push(url) }
}
}
FluPaneItemSeparator{
spacing:10
size:1
}
FluPaneItemExpander{
title: qsTr("Other")
icon: FluentIcons.Shop
FluPaneItem{
title: qsTr("QRCode")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_QRCode.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Tour")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Tour.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Timeline")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Timeline.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Captcha")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Captcha.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Network")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_Network.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
id: item_other
title: qsTr("Remote Loader")
menuDelegate: paneItemMenu
count: 99
infoBadge:FluBadge{
count: item_other.count
color: Qt.rgba(82/255,196/255,26/255,1)
}
url: "qrc:/example/qml/page/T_RemoteLoader.qml"
onTap: {
item_other.count = 0
navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
}
}
FluPaneItem{
title: qsTr("Hot Loader")
onTapListener: function(){
FluApp.navigate("/hotload")
}
}
FluPaneItem{
title: qsTr("3D")
menuDelegate: paneItemMenu
url: "qrc:/example/qml/page/T_3D.qml"
onTap: { navigationView.push(url) }
}
FluPaneItem{
title: qsTr("Test Crash")
visible: FluTools.isWin()
onTapListener: function(){
AppInfo.testCrash()
}
}
}
function getRecentlyAddedData(){
var arr = []
var items = navigationView.getItems();
for(var i=0;i<items.length;i++){
var item = items[i]
if(item instanceof FluPaneItem && item.extra && item.extra.recentlyAdded){
arr.push(item)
}
}
arr.sort(function(o1,o2){ return o2.extra.order-o1.extra.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.extra && item.extra.recentlyUpdated){
arr.push(item)
}
}
return arr
}
function getSearchData(){
if(!navigationView){
return
}
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)
}
}

2
example/qml-Qt6/global/qmldir
View File

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

117
example/qml-Qt6/page/T_3D.qml
View File

@ -1,117 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Window
import FluentUI
import Qt3D.Core
import Qt3D.Render
import Qt3D.Input
import Qt3D.Extras
import QtQuick.Scene3D
import QtQuick.Dialogs
import Qt.labs.platform
import "../component"
FluContentPage{
id:root
title:"3D"
Scene3D{
id:scene_3d
anchors.fill: parent
focus: true
aspects: ["input", "logic"]
cameraAspectRatioMode: Scene3D.AutomaticAspectRatio
Entity {
Camera {
id: camera
projectionType: CameraLens.PerspectiveProjection
fieldOfView: 22.5
aspectRatio: scene_3d.width / scene_3d.height
nearPlane: 1
farPlane: 1000.0
viewCenter: Qt.vector3d( 0.0, 0.0, 0.0 )
upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
position: Qt.vector3d( 0.0, 0.0, 15.0 )
}
FirstPersonCameraController {
linearSpeed: 100
lookSpeed: 50
camera: camera
}
components: [
RenderSettings{
activeFrameGraph: ForwardRenderer{
clearColor: Qt.rgba(0,0,0,0);
camera: camera
}
},
InputSettings{}
]
Mesh {
id: mesh
source: "https://zhu-zichu.gitee.io/test.obj"
}
PhongMaterial {
id: material
ambient: color_picker.current
}
Transform{
id:transform
scale: 1.0
translation: Qt.vector3d(0, 0, 0)
rotation: fromEulerAngles(0, 0, 0)
property real hAngle:0.0
NumberAnimation on hAngle{
from:0
to:360.0
duration: 5000
loops: Animation.Infinite
}
matrix:{
var m=Qt.matrix4x4();
m.rotate(hAngle,Qt.vector3d(0,1,0));
m.translate(Qt.vector3d(0,0,0));
return m;
}
}
Entity {
id: entity
components: [mesh, material,transform]
}
}
}
ColumnLayout{
RowLayout{
spacing: 10
Layout.topMargin: 20
FluText{
text:"tintColor:"
Layout.alignment: Qt.AlignVCenter
}
FluColorPicker{
id:color_picker
current: "gray"
}
}
FluButton{
text:"选择obj资源"
onClicked: {
file_dialog.open()
}
}
}
FileDialog {
id: file_dialog
nameFilters: ["Obj files (*.obj)"]
folder: StandardPaths.writableLocation(StandardPaths.DocumentsLocation)
onAccepted: {
var fileUrl = file_dialog.currentFile
mesh.source = fileUrl
}
}
}

115
example/qml-Qt6/page/T_Acrylic.qml
View File

@ -1,115 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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
FluClip{
width: 1920/4
height: 1200/4
radius:[8,8,8,8]
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.current
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
preventStealing: true
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
View File

@ -1,71 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
FluContentPage {
title: qsTr("Awesome")
FluTextBox{
id:text_box
placeholderText: qsTr("Please enter a keyword")
anchors{
topMargin: 20
top:parent.top
}
}
FluFilledButton{
text: qsTr("Search")
anchors{
left: text_box.right
verticalCenter: text_box.verticalCenter
leftMargin: 14
}
onClicked: {
grid_view.model = FluTheme.awesomeList(text_box.text)
}
}
GridView{
id:grid_view
cellWidth: 80
cellHeight: 80
clip: true
boundsBehavior: GridView.StopAtBounds
model:FluTheme.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(qsTr("You Copied ")+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
}
}
}
}

131
example/qml-Qt6/page/T_Badge.qml
View File

@ -1,131 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Badge")
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 120
paddings: 10
Column{
spacing: 15
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
right: parent.right
}
FluText{
wrapMode: Text.WrapAnywhere
width: parent.width
text: qsTr("It usually appears in the upper right corner of the notification icon or avatar to display the number of messages that need to be processed")
}
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)
}
}'
}
}

93
example/qml-Qt6/page/T_BreadcrumbBar.qml
View File

@ -1,93 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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: qsTr("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)=>{
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)=>{
}
}'
}
}

438
example/qml-Qt6/page/T_Buttons.qml
View File

@ -1,438 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Controls.Basic
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Buttons")
FluText{
Layout.topMargin: 20
text: qsTr("Support the Tab key to switch focus, and the Space key to perform click events")
}
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluTextButton{
disabled: text_button_switch.checked
text: qsTr("Text Button")
onClicked: {
showInfo("点击Text Button")
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
FluToggleSwitch{
id: text_button_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("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: qsTr("Standard Button")
onClicked: {
showInfo(qsTr("Click StandardButton"))
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
FluToggleSwitch{
id: button_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("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: qsTr("Filled Button")
onClicked: {
showWarning(qsTr("Click FilledButton"))
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
FluToggleSwitch{
id: filled_button_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("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: qsTr("Toggle Button")
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
FluToggleSwitch{
id: toggle_button_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("Disabled")
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluToggleButton{
text:"Toggle Button"
onClicked: {
checked = !checked
}
}'
}
Timer{
id: timer_progress
interval: 200
onTriggered: {
btn_progress.progress = (btn_progress.progress + 0.1).toFixed(1)
if(btn_progress.progress==1){
timer_progress.stop()
}else{
timer_progress.start()
}
}
}
FluArea{
Layout.fillWidth: true
height: 68
Layout.topMargin: 20
paddings: 10
FluProgressButton{
id: btn_progress
disabled: progress_button_switch.checked
text: qsTr("Progress Button")
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
onClicked: {
btn_progress.progress = 0
timer_progress.restart()
}
}
FluToggleSwitch{
id: progress_button_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("Disabled")
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluProgressButton{
text:"Progress Button"
onClicked: {
}
}'
}
FluArea{
Layout.fillWidth: true
height: 68
Layout.topMargin: 20
paddings: 10
FluLoadingButton{
id: btn_loading
loading: loading_button_switch.checked
text: qsTr("Loading Button")
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
onClicked: {
}
}
FluToggleSwitch{
id: loading_button_switch
checked: true
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("Loading")
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluLoadingButton{
text:"Loading Button"
onClicked: {
}
}'
}
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(qsTr("Click IconButton"))
}
}
FluIconButton{
iconSource: FluentIcons.ChromeCloseContrast
disabled: icon_button_switch.checked
iconSize: 15
text: qsTr("IconOnly")
display: Button.IconOnly
onClicked:{
showSuccess(qsTr("Button.IconOnly"))
}
}
FluIconButton{
iconSource: FluentIcons.ChromeCloseContrast
disabled: icon_button_switch.checked
iconSize: 15
text: qsTr("TextOnly")
display: Button.TextOnly
onClicked:{
showSuccess(qsTr("Button.TextOnly"))
}
}
FluIconButton{
iconSource: FluentIcons.ChromeCloseContrast
disabled: icon_button_switch.checked
iconSize: 15
text: qsTr("TextBesideIcon")
display: Button.TextBesideIcon
onClicked:{
showSuccess(qsTr("Button.TextBesideIcon"))
}
}
FluIconButton{
iconSource: FluentIcons.ChromeCloseContrast
disabled: icon_button_switch.checked
iconSize: 15
text: qsTr("TextUnderIcon")
display: Button.TextUnderIcon
onClicked:{
showSuccess(qsTr("Button.TextUnderIcon"))
}
}
}
FluToggleSwitch{
id: icon_button_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("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: qsTr("DropDownButton")
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluMenuItem{
text: qsTr("Menu_1")
}
FluMenuItem{
text: qsTr("Menu_2")
}
FluMenuItem{
text: qsTr("Menu_3")
}
FluMenuItem{
text: qsTr("Menu_4")
onClicked: {
}
}
}
FluToggleSwitch{
id: drop_down_button_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("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: qsTr("Radio Button_1")
}
FluRadioButton{
disabled:radio_button_switch.checked
text: qsTr("Radio Button_2")
}
FluRadioButton{
disabled:radio_button_switch.checked
text: qsTr("Radio Button_3")
}
}
FluToggleSwitch{
id: radio_button_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("Disabled")
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluRadioButton{
checked:true
text:"Text Button"
onClicked: {
}
}'
}
}

37
example/qml-Qt6/page/T_CalendarPicker.qml
View File

@ -1,37 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("CalendarPicker")
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 80
paddings: 10
ColumnLayout{
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluCalendarPicker{
onAccepted:{
showSuccess(current.toLocaleString())
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluCalendarPicker{
}'
}
}

60
example/qml-Qt6/page/T_Captcha.qml
View File

@ -1,60 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Captcha")
FluCaptcha{
id: captcha
Layout.topMargin: 20
ignoreCase:switch_case.checked
MouseArea{
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
captcha.refresh()
}
}
}
FluButton{
text: qsTr("Refresh")
Layout.topMargin: 20
onClicked: {
captcha.refresh()
}
}
FluToggleSwitch{
id: switch_case
text: qsTr("Ignore Case")
checked: true
Layout.topMargin: 10
}
RowLayout{
spacing: 10
Layout.topMargin: 10
FluTextBox{
id:text_box
placeholderText: qsTr("Please enter a verification code")
Layout.preferredWidth: 240
}
FluButton{
text:"verify"
onClicked: {
var success = captcha.verify(text_box.text)
if(success){
showSuccess(qsTr("The verification code is correct"))
}else{
showError(qsTr("Error validation, please re-enter"))
}
}
}
}
}

147
example/qml-Qt6/page/T_Carousel.qml
View File

@ -1,147 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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: qsTr("Carousel map, support infinite carousel, infinite swipe, and components implemented with ListView")
}
Item{
width: 400
height: 300
FluShadow{
radius: 8
}
FluCarousel{
anchors.fill: parent
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
}
Item{
width: 400
height: 300
FluShadow{
radius: 8
}
FluCarousel{
anchors.fill: parent
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"}]
}
}'
}
}

114
example/qml-Qt6/page/T_CheckBox.qml
View File

@ -1,114 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("CheckBox")
FluArea{
Layout.fillWidth: true
height: 72
paddings: 10
Layout.topMargin: 20
FluText{
text: qsTr("A 2-state CheckBox")
}
Row{
spacing: 30
anchors{
top: parent.top
topMargin: 30
}
FluCheckBox{
disabled: check_box_switch_two.checked
}
FluCheckBox{
disabled: check_box_switch_two.checked
text: qsTr("Right")
}
FluCheckBox{
disabled: check_box_switch_two.checked
text: qsTr("Left")
textRight: false
}
}
FluToggleSwitch{
id:check_box_switch_two
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("Disabled")
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluCheckBox{
text:"Text"
}'
}
FluArea{
Layout.fillWidth: true
height: 72
paddings: 10
Layout.topMargin: 20
FluText{
text: qsTr("A 3-state CheckBox")
}
Row{
spacing: 30
anchors{
top: parent.top
topMargin: 30
}
FluCheckBox{
property int count: 1
text: qsTr("Three State")
disabled: check_box_switch_three.checked
clickListener: function(){
var flag = count%3
if(flag === 0){
checked = false
indeterminate = false
}
if(flag === 1){
checked = true
indeterminate = false
}
if(flag === 2){
checked = true
indeterminate = true
}
count++
}
}
}
FluToggleSwitch{
id: check_box_switch_three
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("Disabled")
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluCheckBox{
text:"Text"
indeterminate:true
}'
}
}

106
example/qml-Qt6/page/T_Clip.qml
View File

@ -1,106 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Clip")
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 380
paddings: 10
Column{
spacing: 15
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluText{
text: qsTr("Use with images (this component will have no effect under software rendering)")
Layout.topMargin: 20
}
RowLayout{
spacing: 14
FluClip{
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)
}
}
FluClip{
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"
}
}
FluClip{
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"
}
}
FluClip{
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"
}
}
}
FluClip{
width: 1920/5
height: 1200/5
radius: [8,8,8,8]
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:'FluClip{
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)
}
}'
}
}

43
example/qml-Qt6/page/T_ColorPicker.qml
View File

@ -1,43 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("ColorPicker")
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 60
paddings: 10
RowLayout{
FluText{
text: qsTr("Click to Select a Color - >")
Layout.alignment: Qt.AlignVCenter
}
FluColorPicker{
cancelText: qsTr("Cancel")
okText: qsTr("OK")
titleText: qsTr("Color Picker")
editText: qsTr("Edit Color")
redText: qsTr("Red")
greenText: qsTr("Green")
blueText: qsTr("Blue")
opacityText: qsTr("Opacity")
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluColorPicker{
}'
}
}

104
example/qml-Qt6/page/T_ComboBox.qml
View File

@ -1,104 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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: 5
Layout.topMargin: 20
Column{
spacing: 5
anchors.verticalCenter: parent.verticalCenter
FluText{
text: "disabled=true"
x:10
}
FluComboBox {
disabled: true
model: ListModel {
id: model_2
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
model: ListModel {
id: model_3
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
onAccepted: {
if (find(editText) === -1)
model_3.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})
}
}'
}
}

75
example/qml-Qt6/page/T_DatePicker.qml
View File

@ -1,75 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("TimePicker")
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 80
paddings: 10
ColumnLayout{
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluText{
text: qsTr("showYear=true")
}
FluDatePicker{
current: new Date()
onAccepted: {
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: qsTr("showYear=false")
}
FluDatePicker{
showYear: false
yearText: qsTr("Year")
monthText: qsTr("Month")
dayText: qsTr("Day")
cancelText: qsTr("Cancel")
okText: qsTr("OK")
onAccepted: {
showSuccess(current.toLocaleDateString())
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluDatePicker{
showYear:false
}'
}
}

232
example/qml-Qt6/page/T_Dialog.qml
View File

@ -1,232 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Dialog")
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluButton{
anchors.verticalCenter: parent.verticalCenter
text: qsTr("Show Double Button Dialog")
onClicked: {
double_btn_dialog.open()
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluContentDialog{
id:dialog
title: qsTr("Friendly Reminder")
message: qsTr("Are you sure you want to opt out?")
negativeText: qsTr("Cancel")
buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
onNegativeClicked:{
showSuccess(qsTr("Click the Cancel Button"))
}
positiveText: qsTr("OK")
onPositiveClicked:{
showSuccess(qsTr("Click the OK Button"))
}
}
dialog.open()'
}
FluContentDialog{
id:double_btn_dialog
title: qsTr("Friendly Reminder")
message: qsTr("Are you sure you want to opt out?")
buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
negativeText: qsTr("Cancel")
onNegativeClicked: {
showSuccess(qsTr("Click the Cancel Button"))
}
positiveText: qsTr("OK")
onPositiveClicked:{
showSuccess(qsTr("Click the OK Button"))
}
}
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluButton{
anchors.verticalCenter: parent.verticalCenter
text: qsTr("Show Triple Button Dialog")
onClicked: {
triple_btn_dialog.open()
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluContentDialog{
id: dialog
title: qsTr("Friendly Reminder")
message: qsTr("Are you sure you want to opt out?")
negativeText: qsTr("Cancel")
buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
negativeText: qsTr("Cancel")
onNegativeClicked: {
showSuccess(qsTr("Click the Cancel Button"))
}
positiveText: qsTr("OK")
onPositiveClicked: {
showSuccess(qsTr("Click the OK Button"))
}
neutralText: qsTr("Minimize")
onNeutralClicked: {
showSuccess(qsTr("Click Minimize"))
}
}
dialog.open()'
}
FluContentDialog{
id: triple_btn_dialog
title: qsTr("Friendly Reminder")
message: qsTr("Are you sure you want to opt out?")
buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
negativeText: qsTr("Cancel")
onNegativeClicked: {
showSuccess(qsTr("Click the Cancel Button"))
}
positiveText: qsTr("OK")
onPositiveClicked: {
showSuccess(qsTr("Click the OK Button"))
}
neutralText: qsTr("Minimize")
onNeutralClicked: {
showSuccess(qsTr("Click Minimize"))
}
}
FluArea{
Layout.fillWidth: true
height: 100
paddings: 10
Layout.topMargin: 20
FluButton{
anchors.top: parent.top
anchors.topMargin: 5
text: qsTr("Custom Content Dialog")
onClicked: {
custom_btn_dialog.open()
}
}
FluButton{
anchors.top: parent.top
anchors.topMargin: 48
text: qsTr("Custom Content Dialog2")
onClicked: {
custom_btn_dialog2.open()
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluContentDialog{
id: dialog
title: qsTr("Friendly Reminder")
message: qsTr("Data is loading, please wait...")
negativeText: qsTr("Unload")
contentDelegate: Component{
Item{
width: parent.width
height: 80
FluProgressRing{
anchors.centerIn: parent
}
}
}
onNegativeClicked: {
showSuccess(qsTr("Click the Cancel Button"))
}
positiveText :qsTr("OK")
onPositiveClicked: {
showSuccess(qsTr("Click the OK Button"))
}
}
dialog.open()'
}
FluContentDialog{
id: custom_btn_dialog
title: qsTr("Friendly Reminder")
message: qsTr("Data is loading, please wait...")
negativeText: qsTr("Unload")
contentDelegate: Component{
Item{
implicitWidth: parent.width
implicitHeight: 80
FluProgressRing{
anchors.centerIn: parent
}
}
}
onNegativeClicked: {
showSuccess(qsTr("Click the Cancel Button"))
}
positiveText: qsTr("OK")
onPositiveClickListener: function(){
showError(qsTr("Test the InfoBar level on top of the Popup"))
}
}
FluContentDialog{
id:custom_btn_dialog2
title: qsTr("Line Chart")
contentDelegate: Component{
Item{
implicitWidth: parent.width
implicitHeight: 300
FluChart{
anchors.fill: parent
chartType: 'line'
chartData: { return {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Line Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
}
}
}
}
}
}
buttonFlags: FluContentDialogType.PositiveButton
positiveText: qsTr("OK")
onPositiveClicked: {
showSuccess(qsTr("Click the OK Button"))
}
}
}

110
example/qml-Qt6/page/T_Expander.qml
View File

@ -1,110 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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: qsTr("Open a radio box")
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: qsTr("Open a sliding text box")
Item{
anchors.fill: parent
Flickable{
id:scrollview
width: parent.width
height: parent.height
contentWidth: width
boundsBehavior: Flickable.StopAtBounds
contentHeight: text_info.height
ScrollBar.vertical: FluScrollBar {}
FluText{
id:text_info
width: scrollview.width
wrapMode: Text.WrapAnywhere
padding: 14
text: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work, the restoration of Han. Today, the empire is still divided in three, and our very survival is threatened. Yet still the officials at court and the soldiers throughout the realm remain loyal to you, your majesty. Because they remember the late emperor, all of them, and they wish to repay his kindness in service to you. This is the moment to extend your divine influence, to honour the memory of the late Emperor and strengthen the morale of your officers. It is not time to listen to bad advice, or close your ears to the suggestions of loyal men.
The court and the administration are as one. Both must be judged by one standard. Those who are loyal and good must get what they deserve, but so must the evil-doers who break the law. This will demonstrate the justice of your rule. There cannot be one law for the court and another for the administration.
Counselors and attendants like Guo Youzhi, Fei Yi, and Dong Yun are all reliable men, loyal of purpose and pure in motive. The late Emperor selected them for office so that they would serve you after his death.These are the men who should be consulted on all palace affairs. Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
The emperors of the Western Han chose their courtiers wisely, and their dynasty flourished. The emperors of the Eastern Han chose poorly, and they doomed the empire to ruin. Whenever the late Emperor discussed this problem with me, he lamented the failings of Emperors Huan and Ling. Advisors like Guo Youzhi, Fei Yi, Chen Zhen, Zhang Yi, and Jiang Wan – these are all men of great integrity and devotion. I encourage you to trust them, your majesty, if the house of Han is to rise again.
I begin as a common man, farming in my fields in Nanyang, doing what I could to survive in an age of chaos. I never had any interest in making a name for myself as a noble. The late Emperor was not ashamed to visit my cottage and seek my advice. Grateful for his regard, I responded to his appeal and threw myself into his service. Now twenty-one years has passed, the late Emperor always appreciated my caution and, in his final days, entrusted me with his cause.
Since that moment, I have been tormented day and night by the fear that I might let him down. That is why I crossed the Lu river at the height of summer, and entered the wastelands beyond. Now the south has been subdued, and our forces are fully armed.I should lead our soldiers to conquer the northern heartland and attempt to remove the hateful traitors, restore the house of Han, and return it to the former capital.This the way I mean to honor my debt to the late Emperor and fulfill my duty to you. Guo Youzhi, Fei Yi, and Dong Yun are the ones who should be making policy decisions and recommendations.
My only desire is to be permitted to drive out the traitors and restore the Han. If I should let you down, punish my offense and report it to the spirit of the late Emperor. If those three advisors should fail in their duties, then they should be punished for their negligence.Your Majesty, consider your course of action carefully. Seek out good advice, and never forget the late Emperor. I depart now on a long expedition, and I will be forever grateful if you heed my advice. Blinded by my own tears, I know not what I write.")
}
}
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluExpander{
headerText: qsTr("Open a radio box")
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: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work...")
}
}
}
}'
}
}

117
example/qml-Qt6/page/T_FlipView.qml
View File

@ -1,117 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("FlipView")
FluArea{
Layout.fillWidth: true
height: 340
paddings: 10
Layout.topMargin: 20
ColumnLayout{
anchors.verticalCenter: parent.verticalCenter
FluText{
text: qsTr("Horizontal 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: qsTr("Vertical 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
}
}
'
}
}

294
example/qml-Qt6/page/T_Home.qml
View File

@ -1,294 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../global"
import "../window"
FluScrollablePage{
launchMode: FluPageType.SingleTask
animDisabled: true
FluentInitalizrWindow{
id:fluent_initalizr
}
ListModel{
id: model_header
ListElement{
icon: "qrc:/example/res/image/ic_home_github.png"
title: qsTr("FluentUI GitHub")
desc: qsTr("The latest FluentUI controls and styles for your applications.")
url: "https://github.com/zhuzichu520/FluentUI"
clicked: function(model){
Qt.openUrlExternally(model.url)
}
}
ListElement{
icon: "qrc:/example/res/image/favicon.ico"
title: qsTr("FluentUI Initalizr")
desc: qsTr("FluentUI Initializr is a Tool that helps you create and customize Fluent UI projects with various options.")
url: "https://github.com/zhuzichu520/FluentUI"
clicked: function(model){
fluent_initalizr.showDialog()
}
}
}
Item{
Layout.fillWidth: true
Layout.preferredHeight: 320
Image {
id: bg
fillMode:Image.PreserveAspectCrop
anchors.fill: parent
verticalAlignment: Qt.AlignTop
sourceSize: Qt.size(960,640)
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
}
}
Component{
id:com_grallery
Item{
id: control
width: 220
height: 240
FluShadow{
radius:5
anchors.fill: item_content
}
FluClip{
id:item_content
radius: [5,5,5,5]
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: 5
color:FluTheme.itemHoverColor
visible: item_mouse.containsMouse
}
Rectangle{
anchors.fill: parent
radius: 5
color:Qt.rgba(0,0,0,0.0)
visible: !item_mouse.containsMouse
}
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: {
model.clicked(model)
}
}
}
}
}
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: com_grallery
}
}
Component{
id:com_item
Item{
property string desc: modelData.extra.desc
width: 320
height: 120
FluArea{
radius: 8
width: 300
height: 100
anchors.centerIn: parent
Rectangle{
anchors.fill: parent
radius: 8
color:{
if(item_mouse.containsMouse){
return FluTheme.itemHoverColor
}
return FluTheme.itemNormalColor
}
}
Image{
id:item_icon
height: 40
width: 40
source: modelData.extra.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: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
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
}
}

48
example/qml-Qt6/page/T_Image.qml
View File

@ -1,48 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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(qsTr("The image failed to load, please reload"))
}
}
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"
}'
}
}

72
example/qml-Qt6/page/T_InfoBar.qml
View File

@ -1,72 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("InfoBar")
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 270
paddings: 10
ColumnLayout{
spacing: 14
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluButton{
text: qsTr("Info")
onClicked: {
showInfo(qsTr("This is an InfoBar in the Info Style"))
}
}
FluButton{
text: qsTr("Warning")
onClicked: {
showWarning(qsTr("This is an InfoBar in the Warning Style"))
}
}
FluButton{
text:"Error"
onClicked: {
showError(qsTr("This is an InfoBar in the Error Style"))
}
}
FluButton{
text:"Success"
onClicked: {
showSuccess(qsTr("This is an InfoBar in the Success Style"))
}
}
FluButton{
text: qsTr("InfoBar that needs to be turned off manually")
onClicked: {
showInfo(qsTr("This is an InfoBar in the Info Style"),0,qsTr("Manual shutdown is supported"))
}
}
FluButton{
text:"Loading"
onClicked: {
showLoading()
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'showInfo(qsTr("This is an InfoBar in the Info Style"))
showWarning(qsTr("This is an InfoBar in the Warning Style"))
showError(qsTr("This is an InfoBar in the Error Style"))
showSuccess(qsTr("This is an InfoBar in the Success Style"))'
}
}

171
example/qml-Qt6/page/T_Menu.qml
View File

@ -1,171 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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(qsTr("Search"))
}
}
Action {
text: qsTr("Disable")
enabled:false
onTriggered: {
showError(qsTr("Disable"))
}
}
FluMenuSeparator { }
Action { text: qsTr("Check");checkable: true;checked: true}
FluMenu{
title: qsTr("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: qsTr("Menu")
}
FluButton{
text: qsTr("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: qsTr("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: qsTr("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
View File

@ -1,186 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
property string password: ""
property var loginPageRegister: registerForWindowResult("/login")
title: qsTr("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: qsTr("<font color='red'>Standard</font> mode window，a new window is created every time")
}
FluButton{
text: qsTr("Create Window")
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: qsTr("<font color='red'>SingleTask</font> mode window，If a window exists, this activates the window")
textFormat: Text.RichText
}
FluButton{
text: qsTr("Create Window")
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: qsTr("<font color='red'>SingleInstance</font> mode window，If the window exists, destroy the window and create a new window")
}
FluButton{
text: qsTr("Create Window")
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: qsTr("Create the window without carrying any parameters")
}
FluButton{
text: qsTr("Create Window")
onClicked: {
FluApp.navigate("/about")
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluButton{
text: qsTr("Create Window")
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: qsTr("Create a window with the parameter username: zhuzichu")
}
FluButton{
text: qsTr("Create Window")
onClicked: {
loginPageRegister.launch({username:"zhuzichu"})
}
}
FluText{
text:qsTr("Login Window Returned Password - >")+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: qsTr("Create Window")
onClicked: {
loginPageRegister.launch({username:"zhuzichu"})
}
}
'
}
}

560
example/qml-Qt6/page/T_Network.qml
View File

@ -1,560 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import Qt.labs.platform
import "../component"
FluContentPage{
id:root
title: qsTr("Network")
FluNetworkCallable{
id:callable
onStart: {
showLoading()
}
onFinish: {
hideLoading()
}
onError:
(status,errorString,result)=>{
console.debug(status+";"+errorString+";"+result)
}
onCache:
(result)=>{
text_info.text = result
}
onSuccess:
(result)=>{
text_info.text = result
}
}
Flickable{
id:layout_flick
width: 200
clip: true
anchors{
top: parent.top
topMargin: 20
bottom: parent.bottom
left: parent.left
}
boundsBehavior: Flickable.StopAtBounds
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: {
text_info.text = ""
FluNetwork.get("https://httpbingo.org/get")
.addQuery("name","孙悟空")
.addQuery("age",500)
.addQuery("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Head"
onClicked: {
text_info.text = ""
FluNetwork.head("https://httpbingo.org/head")
.addQuery("name","孙悟空")
.addQuery("age",500)
.addQuery("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Post Body"
onClicked: {
text_info.text = ""
FluNetwork.postBody("https://httpbingo.org/post")
.setBody("花果山水帘洞美猴王齐天大圣孙悟空")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Post Form"
onClicked: {
text_info.text = ""
FluNetwork.postForm("https://httpbingo.org/post")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Post JSON"
onClicked: {
text_info.text = ""
FluNetwork.postJson("https://httpbingo.org/post")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Post JSON Array"
onClicked: {
text_info.text = ""
FluNetwork.postJsonArray("https://httpbingo.org/post")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Put Body"
onClicked: {
text_info.text = ""
FluNetwork.putBody("https://httpbingo.org/put")
.setBody("花果山水帘洞美猴王齐天大圣孙悟空")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Put Form"
onClicked: {
text_info.text = ""
FluNetwork.putForm("https://httpbingo.org/put")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Put JSON"
onClicked: {
text_info.text = ""
FluNetwork.putJson("https://httpbingo.org/put")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Put JSON Array"
onClicked: {
text_info.text = ""
FluNetwork.putJsonArray("https://httpbingo.org/put")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Patch Body"
onClicked: {
text_info.text = ""
FluNetwork.patchBody("https://httpbingo.org/patch")
.setBody("花果山水帘洞美猴王齐天大圣孙悟空")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Patch Form"
onClicked: {
text_info.text = ""
FluNetwork.patchForm("https://httpbingo.org/patch")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Patch JSON"
onClicked: {
text_info.text = ""
FluNetwork.patchJson("https://httpbingo.org/patch")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Patch JSON Array"
onClicked: {
text_info.text = ""
FluNetwork.patchJsonArray("https://httpbingo.org/patch")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Delete Body"
onClicked: {
text_info.text = ""
FluNetwork.deleteBody("https://httpbingo.org/delete")
.setBody("花果山水帘洞美猴王齐天大圣孙悟空")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Delete Form"
onClicked: {
text_info.text = ""
FluNetwork.deleteForm("https://httpbingo.org/delete")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Delete JSON"
onClicked: {
text_info.text = ""
FluNetwork.deleteJson("https://httpbingo.org/delete")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Delete JSON Array"
onClicked: {
text_info.text = ""
FluNetwork.deleteJsonArray("https://httpbingo.org/delete")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Open Log"
onClicked: {
text_info.text = ""
FluNetwork.postJson("https://httpbingo.org/post")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.openLog(true)
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Custom Header"
onClicked: {
text_info.text = ""
FluNetwork.postJson("https://httpbingo.org/post")
.addHeader("os","PC")
.addHeader("version","1.0.0")
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "RequestFailedReadCache"
onClicked: {
text_info.text = ""
FluNetwork.postJson("https://httpbingo.org/post")
.setCacheMode(FluNetworkType.RequestFailedReadCache)
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.add("cacheMode","RequestFailedReadCache")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "IfNoneCacheRequest"
onClicked: {
text_info.text = ""
FluNetwork.postJson("https://httpbingo.org/post")
.setCacheMode(FluNetworkType.IfNoneCacheRequest)
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.add("cacheMode","IfNoneCacheRequest")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "FirstCacheThenRequest"
onClicked: {
text_info.text = ""
FluNetwork.postJson("https://httpbingo.org/post")
.setCacheMode(FluNetworkType.FirstCacheThenRequest)
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.add("cacheMode","FirstCacheThenRequest")
.bind(root)
.go(callable)
}
}
FluButton{
implicitWidth: parent.width
implicitHeight: 36
text: "Timeout And Retry"
onClicked: {
text_info.text = ""
FluNetwork.postJson("https://httpbingo.org/post")
.setTimeout(5000)
.setRetry(3)
.add("name","孙悟空")
.add("age",500)
.add("address","花果山水帘洞")
.add("timeout","5000")
.add("retry","3")
.bind(root)
.go(callable)
}
}
FluProgressButton{
id:btn_upload
implicitWidth: parent.width
implicitHeight: 36
text: "Upload File"
onClicked: {
file_dialog.open()
}
}
FluProgressButton{
id:btn_download
implicitWidth: parent.width
implicitHeight: 36
text: "Download File"
onClicked: {
folder_dialog.showDialog(function(path){
FluNetwork.get("http://vjs.zencdn.net/v/oceans.mp4")
.toDownload(path)
.bind(root)
.go(callable_download_file)
})
}
}
FluProgressButton{
id:btn_download_breakpoint
implicitWidth: parent.width
implicitHeight: 36
text: "Breakpoint Download File"
onClicked: {
folder_dialog.showDialog(function(path){
FluNetwork.get("http://vjs.zencdn.net/v/oceans.mp4")
.toDownload(path,true)
.bind(root)
.go(callable_breakpoint_download_file)
})
}
}
}
}
FluNetworkCallable{
id:callable_upload_file
onStart: {
btn_upload.disabled = true
}
onFinish: {
btn_upload.disabled = false
}
onError:
(status,errorString,result)=>{
btn_upload.progress = 0
text_info.text = result
console.debug(status+";"+errorString+";"+result)
}
onSuccess:
(result)=>{
text_info.text = result
}
onUploadProgress:
(sent,total)=>{
btn_upload.progress = sent/total
}
}
FluNetworkCallable{
id:callable_download_file
onStart: {
btn_download.progress = 0
btn_download.disabled = true
}
onFinish: {
btn_download.disabled = false
}
onError:
(status,errorString,result)=>{
btn_download.progress = 0
showError(errorString)
console.debug(status+";"+errorString+";"+result)
}
onSuccess:
(result)=>{
showSuccess(result)
}
onDownloadProgress:
(recv,total)=>{
btn_download.progress = recv/total
}
}
FluNetworkCallable{
id:callable_breakpoint_download_file
onStart: {
btn_download_breakpoint.progress = 0
btn_download_breakpoint.disabled = true
}
onFinish: {
btn_download_breakpoint.disabled = false
}
onError:
(status,errorString,result)=>{
btn_download_breakpoint.progress = 0
showError(errorString)
console.debug(status+";"+errorString+";"+result)
}
onSuccess:
(result)=>{
showSuccess(result)
}
onDownloadProgress:
(recv,total)=>{
btn_download_breakpoint.progress = recv/total
}
}
FileDialog {
id: file_dialog
onAccepted: {
FluNetwork.postForm("https://httpbingo.org/post")
.setRetry(1)//只请求一次
.add("accessToken","12345678")
.addFile("file",FluTools.toLocalPath(file_dialog.currentFile))
.bind(root)
.go(callable_upload_file)
}
}
FileDialog {
property var onSelectListener
id: folder_dialog
folder: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
currentFile: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]+"/oceans.mp4"
fileMode: FileDialog.SaveFile
onAccepted: {
folder_dialog.onSelectListener(FluTools.toLocalPath(folder_dialog.currentFile))
}
function showDialog(listener){
folder_dialog.onSelectListener = listener
folder_dialog.open()
}
}
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
}
}
}
}

49
example/qml-Qt6/page/T_Pagination.qml
View File

@ -1,49 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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
}'
}
}

82
example/qml-Qt6/page/T_Pivot.qml
View File

@ -1,82 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Pivot")
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 400
paddings: 10
FluPivot{
anchors.fill: parent
currentIndex: 2
FluPivotItem{
title: qsTr("All")
contentItem:FluText{
text: qsTr("All emails go here.")
}
}
FluPivotItem{
title: qsTr("Unread")
contentItem: FluText{
text: qsTr("Unread emails go here.")
}
}
FluPivotItem{
title: qsTr("Flagged")
contentItem: FluText{
text: qsTr("Flagged emails go here.")
}
}
FluPivotItem{
title: qsTr("Urgent")
contentItem: FluText{
text: qsTr("Urgent emails go here.")
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluPivot{
anchors.fill: parent
FluPivotItem:{
text: qsTr("All")
contentItem: FluText{
text: qsTr("All emails go here.")
}
}
FluPivotItem:{
text: qsTr("Unread")
contentItem: FluText{
text: qsTr("Unread emails go here.")
}
}
FluPivotItem:{
text: qsTr("Flagged")
contentItem: FluText{
text: qsTr("Flagged emails go here.")
}
}
FluPivotItem:{
text: qsTr("Urgent")
contentItem: FluText{
text: qsTr("Urgent emails go here.")
}
}
}
'
}
}

103
example/qml-Qt6/page/T_Progress.qml
View File

@ -1,103 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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
}
'
}
}

102
example/qml-Qt6/page/T_QRCode.qml
View File

@ -1,102 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("QRCode")
FluQRCode{
id:qrcode
Layout.topMargin: 20
size:slider_size.value
text:text_box.text
color:color_picker.current
bgColor: bgcolor_picker.current
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:"会磨刀的小猪"
Layout.preferredWidth: 240
}
}
RowLayout{
spacing: 10
Layout.topMargin: 10
FluText{
text:"color:"
Layout.alignment: Qt.AlignVCenter
}
FluColorPicker{
id:color_picker
current: Qt.rgba(0,0,0,1)
}
}
RowLayout{
spacing: 10
Layout.topMargin: 10
FluText{
text:"bgColor:"
Layout.alignment: Qt.AlignVCenter
}
FluColorPicker{
id:bgcolor_picker
current: 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
View File

@ -1,101 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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: qsTr("Right")
}
FluRadioButton{
disabled: radio_button_switch.checked
text: qsTr("Left")
textRight: false
}
}
FluToggleSwitch{
id: radio_button_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("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: qsTr("Radio Button_1")
}
FluRadioButton{
disabled: radio_button_switch2.checked
text: qsTr("Radio Button_2")
}
FluRadioButton{
disabled: radio_button_switch2.checked
text: qsTr("Radio Button_3")
}
}
FluToggleSwitch{
id: radio_button_switch2
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("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
View File

@ -1,35 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage {
title: qsTr("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{
}'
}
}

74
example/qml-Qt6/page/T_Rectangle.qml
View File

@ -1,74 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Rectangle")
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 80
paddings: 10
Column{
spacing: 15
anchors{
left: parent.left
verticalCenter: parent.verticalCenter
}
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]
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluRectangle{
radius: [25,25,25,25]
width: 50
height: 50
}'
}
}

14
example/qml-Qt6/page/T_RemoteLoader.qml
View File

@ -1,14 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluPage{
launchMode: FluPageType.SingleTop
FluRemoteLoader{
anchors.fill: parent
source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
}
}

205
example/qml-Qt6/page/T_Settings.qml
View File

@ -1,205 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../global"
import "../component"
import "../viewmodel"
FluScrollablePage{
title: qsTr("Settings")
SettingsViewModel{
id:viewmodel_settings
}
FluEvent{
id:event_checkupdate_finish
name: "checkUpdateFinish"
onTriggered: {
btn_checkupdate.loading = false
}
}
Component.onCompleted: {
FluEventBus.registerEvent(event_checkupdate_finish)
}
Component.onDestruction: {
FluEventBus.unRegisterEvent(event_checkupdate_finish)
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 60
paddings: 10
Row{
spacing: 20
anchors.verticalCenter: parent.verticalCenter
FluText{
text: "%1 v%2".arg(qsTr("Current Version")).arg(AppInfo.version)
font: FluTextStyle.Body
anchors.verticalCenter: parent.verticalCenter
}
FluLoadingButton{
id: btn_checkupdate
text: qsTr("Check for Updates")
anchors.verticalCenter: parent.verticalCenter
onClicked: {
loading = true
FluEventBus.post("checkUpdate")
}
}
}
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 50
paddings: 10
FluCheckBox{
text: qsTr("Use System AppBar")
checked: FluApp.useSystemAppBar
anchors.verticalCenter: parent.verticalCenter
onClicked: {
FluApp.useSystemAppBar = !FluApp.useSystemAppBar
dialog_restart.open()
}
}
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 50
paddings: 10
FluCheckBox{
text:qsTr("Fits AppBar Windows")
checked: window.fitsAppBarWindows
anchors.verticalCenter: parent.verticalCenter
onClicked: {
window.fitsAppBarWindows = !window.fitsAppBarWindows
}
}
}
FluContentDialog{
id: dialog_restart
title: qsTr("Friendly Reminder")
message: qsTr("This action requires a restart of the program to take effect, is it restarted?")
buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
negativeText: qsTr("Cancel")
positiveText: qsTr("OK")
onPositiveClicked: {
FluApp.exit(931)
}
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 128
paddings: 10
ColumnLayout{
spacing: 5
anchors{
top: parent.top
left: parent.left
}
FluText{
text: qsTr("Dark Mode")
font: FluTextStyle.BodyStrong
Layout.bottomMargin: 4
}
Repeater{
model: [{title:qsTr("System"),mode:FluThemeType.System},{title:qsTr("Light"),mode:FluThemeType.Light},{title:qsTr("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:qsTr("Navigation View Display Mode")
font: FluTextStyle.BodyStrong
Layout.bottomMargin: 4
}
Repeater{
model: [{title:qsTr("Open"),mode:FluNavigationViewType.Open},{title:qsTr("Compact"),mode:FluNavigationViewType.Compact},{title:qsTr("Minimal"),mode:FluNavigationViewType.Minimal},{title:qsTr("Auto"),mode:FluNavigationViewType.Auto}]
delegate: FluRadioButton{
checked : viewmodel_settings.displayMode===modelData.mode
text:modelData.title
clickListener:function(){
viewmodel_settings.displayMode = modelData.mode
}
}
}
}
}
ListModel{
id:model_language
ListElement{
name:"en"
}
ListElement{
name:"zh"
}
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 80
paddings: 10
ColumnLayout{
spacing: 10
anchors{
top: parent.top
left: parent.left
}
FluText{
text:qsTr("Language")
font: FluTextStyle.BodyStrong
Layout.bottomMargin: 4
}
Flow{
spacing: 5
Repeater{
model: TranslateHelper.languages
delegate: FluRadioButton{
checked: TranslateHelper.current === modelData
text:modelData
clickListener:function(){
TranslateHelper.current = modelData
dialog_restart.open()
}
}
}
}
}
}
}

30
example/qml-Qt6/page/T_ShortcutPicker.qml
View File

@ -1,30 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("ShortcutPicker")
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 100
paddings: 10
FluShortcutPicker{
anchors.verticalCenter: parent.verticalCenter
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluShortcutPicker{
}'
}
}

59
example/qml-Qt6/page/T_Slider.qml
View File

@ -1,59 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Slider")
FluArea{
Layout.fillWidth: true
Layout.preferredHeight: 200
Layout.topMargin: 20
paddings: 10
Row{
spacing: 30
FluSlider{
}
FluSlider{
orientation: Qt.Vertical
anchors.verticalCenter: parent.verticalCenter
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluSlider{
value:50
}'
}
FluArea{
Layout.fillWidth: true
Layout.preferredHeight: 200
Layout.topMargin: 20
paddings: 10
Row{
spacing: 30
FluRangeSlider{
}
FluRangeSlider{
orientation: Qt.Vertical
anchors.verticalCenter: parent.verticalCenter
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluRangeSlider{
orientation: Qt.Vertical
}'
}
}

84
example/qml-Qt6/page/T_SplitLayout.qml
View File

@ -1,84 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluContentPage{
title: qsTr("SplitLayout")
RowLayout{
id:layout_dropdown
anchors{
top: parent.top
topMargin: 20
}
FluText{
text:"orientation:"
}
FluDropDownButton{
id:btn_orientation
Layout.preferredWidth: 120
text:"Horizontal"
FluMenuItem{
text:"Horizontal"
onClicked: {
btn_orientation.text = text
split_layout.orientation = Qt.Horizontal
}
}
FluMenuItem{
text:"Vertical"
onClicked: {
btn_orientation.text = text
split_layout.orientation = Qt.Vertical
}
}
}
}
FluSplitLayout {
id:split_layout
anchors{
top: layout_dropdown.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
topMargin: 8
}
orientation: Qt.Horizontal
Item {
clip: true
implicitWidth: 200
implicitHeight: 200
SplitView.maximumWidth: 400
SplitView.maximumHeight: 400
FluText {
text: "Page 1"
anchors.centerIn: parent
}
}
Item {
clip: true
id: centerItem
SplitView.minimumWidth: 50
SplitView.minimumHeight: 50
SplitView.fillWidth: true
SplitView.fillHeight: true
FluText {
text: "Page 2"
anchors.centerIn: parent
}
}
Item {
clip: true
implicitWidth: 200
implicitHeight: 200
FluText {
text: "Page 3"
anchors.centerIn: parent
}
}
}
}

58
example/qml-Qt6/page/T_StaggeredLayout.qml
View File

@ -1,58 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI 1.0
import "../component"
FluContentPage{
title: qsTr("StaggeredLayout")
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
ListModel{
id:list_model
Component.onCompleted: {
for(var i=0;i<=100;i++){
var item = {}
item.color = colors[rand(0,7)]
item.height = rand(100,300)
append(item)
}
}
}
Flickable{
id: scroll
anchors.fill: parent
anchors.topMargin: 20
boundsBehavior:Flickable.StopAtBounds
contentHeight: staggered_view.implicitHeight
clip: true
ScrollBar.vertical: FluScrollBar {}
FluStaggeredLayout{
id:staggered_view
width: parent.width
itemWidth: 160
model:list_model
delegate: Rectangle{
height: model.height
color:model.color.normal
FluText{
color:"#FFFFFF"
text:model.index
font.bold: true
font.pixelSize: 18
anchors.centerIn: parent
}
}
}
}
function rand(minNum, maxNum){
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
}
}

90
example/qml-Qt6/page/T_StatusLayout.qml
View File

@ -1,90 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("StatusLayout")
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 = FluStatusLayoutType.Loading
}
}
FluMenuItem{
text:"Empty"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusLayoutType.Empty
}
}
FluMenuItem{
text:"Error"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusLayoutType.Error
}
}
FluMenuItem{
text:"Success"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusLayoutType.Success
}
}
}
}
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 10
height: 380
paddings: 10
FluStatusLayout{
id:status_view
anchors.fill: parent
loadingText: qsTr("Loading...")
emptyText: qsTr("Empty")
errorText: qsTr("The page went wrong...")
errorButtonText: qsTr("Reload")
onErrorClicked:{
showError("Click Reload")
}
Rectangle {
anchors.fill: parent
color:FluTheme.primaryColor
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluStatusLayout{
anchors.fill: parent
statusMode: FluStatusLayoutType.Loading
Rectangle{
anchors.fill: parent
color:FluTheme.primaryColor
}
}'
}
}

129
example/qml-Qt6/page/T_TabView.qml
View File

@ -1,129 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
title: qsTr("TabView")
Component{
id:com_page
Rectangle{
anchors.fill: parent
color: argument.normal
}
}
function newTab(){
tab_view.appendTab("qrc:/example/res/image/favicon.ico",qsTr("Document ")+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)])
}
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:"Never"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabViewType.Never
}
}
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)
}
}
'
}
}

589
example/qml-Qt6/page/T_TableView.qml
View File

@ -1,589 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluContentPage{
id:root
title: qsTr("TableView")
signal checkBoxChanged
property var dataSource : []
property int sortType: 0
property bool seletedAll: true
property string nameKeyword: ""
onNameKeywordChanged: {
table_view.filter(function(item){
if(item.name.includes(nameKeyword)){
return true
}
return false
})
}
Component.onCompleted: {
loadData(1,1000)
}
onCheckBoxChanged: {
for(var i =0;i< table_view.rows ;i++){
if(false === table_view.getRow(i).checkbox.options.checked){
root.seletedAll = false
return
}
}
root.seletedAll = true
}
onSortTypeChanged: {
table_view.closeEditor()
if(sortType === 0){
table_view.sort()
}else if(sortType === 1){
table_view.sort(
(l, r) =>{
var lage = Number(l.age)
var rage = Number(r.age)
if(lage === rage){
return l._key>r._key
}
return lage>rage
});
}else if(sortType === 2){
table_view.sort(
(l, r) => {
var lage = Number(l.age)
var rage = Number(r.age)
if(lage === rage){
return l._key>r._key
}
return lage<rage
});
}
}
FluContentDialog{
id:custom_update_dialog
property var text
property var onAccpetListener
title: qsTr("Modify the column name")
negativeText: qsTr("Cancel")
contentDelegate: Component{
Item{
implicitWidth: parent.width
implicitHeight: 60
FluTextBox{
id:textbox_text
anchors.centerIn: parent
onTextChanged: {
custom_update_dialog.text = textbox_text.text
}
}
Component.onCompleted: {
textbox_text.text = custom_update_dialog.text
textbox_text.forceActiveFocus()
}
}
}
positiveText: qsTr("OK")
onPositiveClicked:{
if(custom_update_dialog.onAccpetListener){
custom_update_dialog.onAccpetListener(custom_update_dialog.text)
}
}
function showDialog(text,listener){
custom_update_dialog.text = text
custom_update_dialog.onAccpetListener = listener
custom_update_dialog.open()
}
}
FluMenu{
id:pop_filter
width: 200
height: 89
contentItem: Item{
onVisibleChanged: {
if(visible){
name_filter_text.text = root.nameKeyword
name_filter_text.cursorPosition = name_filter_text.text.length
name_filter_text.forceActiveFocus()
}
}
FluTextBox{
id:name_filter_text
anchors{
left: parent.left
right: parent.right
top: parent.top
leftMargin: 10
rightMargin: 10
topMargin: 10
}
iconSource: FluentIcons.Search
}
FluButton{
text: qsTr("Search")
anchors{
bottom: parent.bottom
right: parent.right
bottomMargin: 10
rightMargin: 10
}
onClicked: {
root.nameKeyword = name_filter_text.text
pop_filter.close()
}
}
}
function showPopup(){
table_view.closeEditor()
pop_filter.popup()
}
}
Component{
id:com_checbox
Item{
FluCheckBox{
anchors.centerIn: parent
checked: true === options.checked
enableAnimation: false
clickListener: function(){
var obj = table_view.getRow(row)
obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
table_view.setRow(row,obj)
checkBoxChanged()
}
}
}
}
Component{
id:com_column_filter_name
Item{
FluText{
text: qsTr("Name")
anchors.centerIn: parent
}
FluIconButton{
width: 20
height: 20
iconSize: 12
verticalPadding:0
horizontalPadding:0
iconSource: FluentIcons.Filter
iconColor: {
if("" !== root.nameKeyword){
return FluTheme.primaryColor
}
return FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
}
anchors{
right: parent.right
rightMargin: 3
verticalCenter: parent.verticalCenter
}
onClicked: {
pop_filter.showPopup()
}
}
}
}
Component{
id:com_action
Item{
RowLayout{
anchors.centerIn: parent
FluButton{
text: qsTr("Delete")
onClicked: {
table_view.closeEditor()
table_view.removeRow(row)
}
}
FluFilledButton{
text: qsTr("Edit")
onClicked: {
var obj = table_view.getRow(row)
obj.name = "12345"
table_view.setRow(row,obj)
showSuccess(JSON.stringify(obj))
}
}
}
}
}
Component{
id:com_column_checbox
Item{
RowLayout{
anchors.centerIn: parent
FluText{
text: qsTr("Select All")
Layout.alignment: Qt.AlignVCenter
}
FluCheckBox{
checked: true === root.seletedAll
enableAnimation: false
Layout.alignment: Qt.AlignVCenter
clickListener: function(){
root.seletedAll = !root.seletedAll
var checked = root.seletedAll
itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
for(var i =0;i< table_view.rows ;i++){
var rowData = table_view.getRow(i)
rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
table_view.setRow(i,rowData)
}
}
}
}
}
}
Component{
id:com_combobox
FluComboBox {
anchors.fill: parent
focus: true
editText: 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 === display)
selectAll()
}
onCommit: {
editTextChaged(editText)
tableView.closeEditor()
}
}
}
Component{
id:com_avatar
Item{
FluClip{
anchors.centerIn: parent
width: 40
height: 40
radius: [20,20,20,20]
Image{
anchors.fill: parent
source: {
if(options && options.avatar){
return options.avatar
}
return ""
}
sourceSize: Qt.size(80,80)
}
}
}
}
Component{
id:com_column_update_title
Item{
FluText{
id:text_title
text: {
if(options.title){
return options.title
}
return ""
}
anchors.fill: parent
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
elide: Text.ElideRight
}
MouseArea{
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
custom_update_dialog.showDialog(options.title,function(text){
itemModel.display = table_view.customItem(com_column_update_title,{"title":text})
})
}
}
}
}
Component{
id:com_column_sort_age
Item{
FluText{
text: qsTr("Age")
anchors.centerIn: parent
}
ColumnLayout{
spacing: 0
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
rightMargin: 4
}
FluIconButton{
Layout.preferredWidth: 20
Layout.preferredHeight: 15
iconSize: 12
verticalPadding:0
horizontalPadding:0
iconSource: FluentIcons.ChevronUp
iconColor: {
if(1 === root.sortType){
return FluTheme.primaryColor
}
return FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
}
onClicked: {
if(root.sortType === 1){
root.sortType = 0
return
}
root.sortType = 1
}
}
FluIconButton{
Layout.preferredWidth: 20
Layout.preferredHeight: 15
iconSize: 12
verticalPadding:0
horizontalPadding:0
iconSource: FluentIcons.ChevronDown
iconColor: {
if(2 === root.sortType){
return FluTheme.primaryColor
}
return FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
}
onClicked: {
if(root.sortType === 2){
root.sortType = 0
return
}
root.sortType = 2
}
}
}
}
}
FluArea{
id:layout_controls
anchors{
left: parent.left
right: parent.right
top: parent.top
topMargin: 20
}
height: 60
Row{
spacing: 5
anchors{
left: parent.left
leftMargin: 10
verticalCenter: parent.verticalCenter
}
FluButton{
text: qsTr("Clear All")
onClicked: {
table_view.dataSource = []
}
}
FluButton{
text: qsTr("Delete Selection")
onClicked: {
var data = []
var rows = []
for (var i = 0; i < table_view.rows; i++) {
var item = table_view.getRow(i);
rows.push(item)
if (!item.checkbox.options.checked) {
data.push(item);
}
}
var sourceModel = table_view.sourceModel;
for (i = 0; i < sourceModel.rowCount; i++) {
var sourceItem = sourceModel.getRow(i);
const foundItem = rows.find(item=> item._key === sourceItem._key)
if (!foundItem) {
data.push(sourceItem);
}
}
table_view.dataSource = data
}
}
FluButton{
text: qsTr("Add a row of Data")
onClicked: {
table_view.appendRow(genTestObject())
}
}
}
}
FluTableView{
id:table_view
anchors{
left: parent.left
right: parent.right
top: layout_controls.bottom
bottom: gagination.top
}
anchors.topMargin: 5
onRowsChanged: {
root.checkBoxChanged()
}
columnSource:[
{
title: table_view.customItem(com_column_checbox,{checked:true}),
dataIndex: 'checkbox',
width:100,
minimumWidth:100,
maximumWidth:100
},
{
title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}),
dataIndex: 'avatar',
width:100
},
{
title: table_view.customItem(com_column_filter_name,{title:qsTr("Name")}),
dataIndex: 'name',
readOnly:true
},
{
title: table_view.customItem(com_column_sort_age,{sort:0}),
dataIndex: 'age',
editDelegate:com_combobox,
width:100,
minimumWidth:100,
maximumWidth:100
},
{
title: qsTr("Address"),
dataIndex: 'address',
width:200,
minimumWidth:100,
maximumWidth:250
},
{
title: qsTr("Nickname"),
dataIndex: 'nickname',
width:100,
minimumWidth:80,
maximumWidth:200
},
{
title: qsTr("Long String"),
dataIndex: 'longstring',
width:200,
minimumWidth:100,
maximumWidth:300
},
{
title: qsTr("Options"),
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
previousText: qsTr("<Previous")
nextText: qsTr("Next>")
onRequestPage:
(page,count)=> {
table_view.closeEditor()
loadData(page,count)
table_view.resetPosition()
}
}
function genTestObject(){
var ages = ["100", "300", "500", "1000"];
function getRandomAge() {
var randomIndex = Math.floor(Math.random() * ages.length);
return ages[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];
}
var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
function getAvatar(){
var randomIndex = Math.floor(Math.random() * avatars.length);
return avatars[randomIndex];
}
return {
checkbox: table_view.customItem(com_checbox,{checked:root.seletedAll}),
avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
name: getRandomName(),
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
action: table_view.customItem(com_action),
_minimumHeight:50,
_key:FluTools.uuid()
}
}
function loadData(page,count){
root.seletedAll = true
const dataSource = []
for(var i=0;i<count;i++){
dataSource.push(genTestObject())
}
root.dataSource = dataSource
table_view.dataSource = root.dataSource
}
}

32
example/qml-Qt6/page/T_Text.qml
View File

@ -1,32 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Text")
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 60
paddings: 10
FluCopyableText{
text: qsTr("This is a text that can be copied")
anchors.verticalCenter: parent.verticalCenter
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluCopyableText{
text: qsTr("This is a text that can be copied")
}'
}
}

203
example/qml-Qt6/page/T_TextBox.qml
View File

@ -1,203 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "../viewmodel"
FluScrollablePage{
title: qsTr("TextBox")
TextBoxViewModel{
id:viewModel
}
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluTextBox{
placeholderText: qsTr("Single-line Input Box")
disabled: text_box_switch.checked
cleanEnabled: true
text: viewModel.text1
onTextChanged: {
viewModel.text1 = text
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
FluToggleSwitch{
id: text_box_switch
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
text: qsTr("Disabled")
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluTextBox{
placeholderText: qsTr("Single-line Input Box")
}'
}
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluPasswordBox{
placeholderText: qsTr("Please enter your password")
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: qsTr("Disabled")
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluPasswordBox{
placeholderText: qsTr("Please enter your password")
}'
}
FluArea{
Layout.fillWidth: true
height: 36+multiine_textbox.height
paddings: 10
Layout.topMargin: 20
FluMultilineTextBox{
id: multiine_textbox
placeholderText: qsTr("Multi-line Input Box")
text:viewModel.text2
onTextChanged: {
viewModel.text2 = text
}
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: qsTr("Disabled")
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluMultilineTextBox{
placeholderText: qsTr("Multi-line Input Box")
}'
}
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluAutoSuggestBox{
placeholderText: qsTr("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: qsTr("Disabled")
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluAutoSuggestBox{
placeholderText: qsTr("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: qsTr("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;
}
}

136
example/qml-Qt6/page/T_Theme.qml
View File

@ -1,136 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
id: root
title: qsTr("Theme")
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
Layout.preferredHeight: 340
paddings: 10
ColumnLayout{
spacing:0
anchors{
left: parent.left
}
FluText{
text: qsTr("Theme colors")
Layout.topMargin: 10
}
RowLayout{
Layout.topMargin: 5
Repeater{
model: root.colorData
delegate: Rectangle{
width: 42
height: 42
radius: 4
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
border.color: modelData.darker
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium
iconSize: 15
visible: modelData === FluTheme.accentColor
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.accentColor = modelData
}
}
}
}
}
Row{
Layout.topMargin: 10
spacing: 10
FluText{
text: qsTr("Customize the Theme Color")
anchors.verticalCenter: parent.verticalCenter
}
FluColorPicker{
id:color_picker
current: FluTheme.accentColor.normal
onAccepted: {
FluTheme.accentColor = FluColors.createAccentColor(current)
}
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium
iconSize: 15
visible: {
for(var i =0 ;i< root.colorData.length; i++){
if(root.colorData[i] === FluTheme.accentColor){
return false
}
}
return true
}
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
}
}
}
FluText{
text: qsTr("Dark Mode")
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: qsTr("Native Text")
Layout.topMargin: 20
}
FluToggleSwitch{
Layout.topMargin: 5
checked: FluTheme.nativeText
onClicked: {
FluTheme.nativeText = !FluTheme.nativeText
}
}
FluText{
text: qsTr("Open Animation")
Layout.topMargin: 20
}
FluToggleSwitch{
Layout.topMargin: 5
checked: FluTheme.enableAnimation
onClicked: {
FluTheme.enableAnimation = !FluTheme.enableAnimation
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluTheme.accentColor = FluColors.Orange
FluTheme.dark = true
FluTheme.nativeText = true'
}
}

92
example/qml-Qt6/page/T_TimePicker.qml
View File

@ -1,92 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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: qsTr("hourFormat=FluTimePickerType.H")
}
FluTimePicker{
current: new Date()
amText: qsTr("AM")
pmText: qsTr("PM")
hourText: qsTr("Hour")
minuteText: qsTr("Minute")
cancelText: qsTr("Cancel")
okText: qsTr("OK")
onAccepted: {
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: qsTr("hourFormat=FluTimePickerType.HH")
}
FluTimePicker{
hourFormat:FluTimePickerType.HH
amText: qsTr("AM")
pmText: qsTr("PM")
hourText: qsTr("Hour")
minuteText: qsTr("Minute")
cancelText: qsTr("Cancel")
okText: qsTr("OK")
onAccepted: {
showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluTimePicker{
hourFormat:FluTimePickerType.HH
}'
}
}

171
example/qml-Qt6/page/T_Timeline.qml
View File

@ -1,171 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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:"2021-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"
Layout.preferredWidth: 240
}
FluFilledButton{
text: qsTr("Append")
onClicked: {
list_model.append({text:text_box.text})
}
}
FluFilledButton{
text: qsTr("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
View File

@ -1,51 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("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: qsTr("Right")
}
FluToggleSwitch{
disabled: toggle_switch.checked
text: qsTr("Left")
textRight: false
}
}
FluToggleSwitch{
id: toggle_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text: qsTr("Disabled")
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluToggleSwitch{
text:"Text"
}'
}
}

103
example/qml-Qt6/page/T_Tooltip.qml
View File

@ -1,103 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Tooltip")
FluText{
Layout.topMargin: 20
text: qsTr("Hover over Tultip and it pops up")
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 68
paddings: 10
Column{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluText{
text: qsTr("Text properties of FluIconButton support the Tooltip pop-up window by default")
}
FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast
iconSize: 15
text: qsTr("Delete")
onClicked:{
showSuccess(qsTr("Click IconButton"))
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast
iconSize: 15
text: qsTr("Delete")
onClicked:{
showSuccess(qsTr("Click IconButton"))
}
}
'
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 68
paddings: 10
Column{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluText{
text: qsTr("Add a Tooltip pop-up to a Button")
}
FluButton{
id:button_1
text: qsTr("Delete")
onClicked:{
showSuccess(qsTr("Click 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: qsTr("Delete")
FluTooltip{
visible: button_1.hovered
text:button_1.text
delay: 1000
}
onClicked:{
showSuccess(qsTr("Click Button"))
}
}'
}
}

80
example/qml-Qt6/page/T_Tour.qml
View File

@ -1,80 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluScrollablePage{
title: qsTr("Tour")
FluTour{
id:tour
steps:[
{title:qsTr("Upload File"),description: qsTr("Put your files here."),target:()=>btn_upload},
{title:qsTr("Save"),description: qsTr("Save your changes."),target:()=>btn_save},
{title:qsTr("Other Actions"),description: qsTr("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: qsTr("Begin Tour")
onClicked: {
tour.open()
}
}
Row{
spacing: 20
anchors{
top: parent.top
topMargin: 60
}
FluButton{
id: btn_upload
text: qsTr("Upload")
onClicked: {
showInfo(qsTr("Upload"))
}
}
FluFilledButton{
id: btn_save
text: qsTr("Save")
onClicked: {
showInfo(qsTr("Save"))
}
}
FluIconButton{
id: btn_more
iconSource: FluentIcons.More
onClicked: {
showInfo(qsTr("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}
]
}'
}
}

131
example/qml-Qt6/page/T_TreeView.qml
View File

@ -1,131 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
FluContentPage {
title: qsTr("TreeView")
function treeData(){
const dig = (path = '0', level = 4) => {
const list = [];
for (let i = 0; i < 6; i += 1) {
const key = `${path}-${i}`;
const treeNode = {
title: key,
key,
};
if (level > 0) {
treeNode.children = dig(key, level - 1);
}
list.push(treeNode);
}
return list;
};
return dig();
}
Column{
id: layout_column
spacing: 12
width: 300
anchors{
topMargin: 20
top:parent.top
left: parent.left
leftMargin: 10
bottom:parent.bottom
bottomMargin: 20
}
FluText{
text: qsTr("Total %1 data, %2 data currently displayed").arg(tree_view.count()).arg(tree_view.visibleCount())
}
FluText{
text: qsTr("A total of %1 data items are selected").arg(tree_view.selectionModel().length)
}
RowLayout{
spacing: 10
FluText{
text: "cellHeight:"
Layout.alignment: Qt.AlignVCenter
}
FluSlider{
id: slider_cell_height
value: 30
from: 30
to:100
}
}
RowLayout{
spacing: 10
FluText{
text: "depthPadding:"
Layout.alignment: Qt.AlignVCenter
}
FluSlider{
id: slider_depth_padding
value: 30
from: 30
to:100
}
}
FluToggleSwitch{
id: switch_showline
text:"showLine"
checked: false
}
FluToggleSwitch{
id: switch_draggable
text:"draggable"
checked: false
}
FluToggleSwitch{
id: switch_checkable
text:"checkable"
checked: false
}
FluButton{
text: "all expand"
onClicked: {
tree_view.allExpand()
}
}
FluButton{
text: "all collapse"
onClicked: {
tree_view.allCollapse()
}
}
}
FluArea{
anchors{
left: layout_column.right
top: parent.top
bottom: parent.bottom
right: parent.right
rightMargin: 5
topMargin: 5
bottomMargin: 5
}
FluShadow{}
FluTreeView{
id:tree_view
anchors.fill: parent
cellHeight: slider_cell_height.value
draggable:switch_draggable.checked
showLine: switch_showline.checked
checkable:switch_checkable.checked
depthPadding: slider_depth_padding.value
Component.onCompleted: {
var data = treeData()
dataSource = data
}
}
}
}

84
example/qml-Qt6/page/T_Typography.qml
View File

@ -1,84 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI
FluContentPage {
property real textScale: 1
title: qsTr("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
}
}
}
}

131
example/qml-Qt6/page/T_Watermark.qml
View File

@ -1,131 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluContentPage{
title: qsTr("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: "会磨刀的小猪"
Layout.preferredWidth: 240
}
}
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
current: Qt.rgba(0,0,0,0.1)
}
}
}
FluWatermark{
id: water_mark
anchors.fill: parent
text:text_box.text
textColor: color_picker.current
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)
}
}
}

14
example/qml-Qt6/viewmodel/SettingsViewModel.qml
View File

@ -1,14 +0,0 @@
import QtQuick
import FluentUI
FluViewModel{
objectName: "SettingsViewModel"
scope: FluViewModelType.Application
property int displayMode
onInitData: {
displayMode = FluNavigationViewType.Auto
}
}

8
example/qml-Qt6/viewmodel/TextBoxViewModel.qml
View File

@ -1,8 +0,0 @@
import QtQuick
import FluentUI
FluViewModel {
objectName: "TextBoxView"
property string text1
property string text2
}

165
example/qml-Qt6/window/AboutWindow.qml
View File

@ -1,165 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import "../component"
FluWindow {
id:window
title:"关于"
width: 600
height: 580
fixSize: true
launchMode: FluWindowType.SingleTask
ColumnLayout{
anchors{
top: parent.top
left: parent.left
right: parent.right
}
spacing: 5
RowLayout{
Layout.topMargin: 15
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.leftMargin: 15
FluText{
text:"作者："
}
FluText{
text:"朱子楚"
Layout.alignment: Qt.AlignBottom
}
}
RowLayout{
spacing: 14
Layout.leftMargin: 15
FluText{
text:"微信号："
}
FluText{
text:"FluentUI"
Layout.alignment: Qt.AlignBottom
}
FluText{
text:"(有啥问题可能不会马上回，但发了红包必须立马回......)"
}
}
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，只要时间充足我就会解决的！！"
}
}
}
}

79
example/qml-Qt6/window/CrashWindow.qml
View File

@ -1,79 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import Qt.labs.platform
import "../component"
FluWindow {
id:window
title: qsTr("Friendly Reminder")
width: 300
height: 400
fixSize: true
showMinimize: false
property string crashFilePath
Component.onCompleted: {
window.stayTop = true
}
onInitArgument:
(argument)=>{
crashFilePath = argument.crashFilePath
}
Image{
width: 540/2
height: 285/2
anchors{
horizontalCenter: parent.horizontalCenter
top: parent.top
topMargin: 40
}
source: "qrc:/example/res/image/ic_crash.png"
}
FluText{
id:text_info
anchors{
top: parent.top
topMargin: 240
left: parent.left
right: parent.right
leftMargin: 10
rightMargin: 10
}
wrapMode: Text.WrapAnywhere
text: qsTr("We apologize for the inconvenience caused by an unexpected error")
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
RowLayout{
anchors{
horizontalCenter: parent.horizontalCenter
bottom: parent.bottom
bottomMargin: 20
}
FluButton{
text: qsTr("Report Logs")
onClicked: {
FluTools.showFileInFolder(crashFilePath)
}
}
Item{
width: 30
height: 1
}
FluFilledButton{
text: qsTr("Restart Program")
onClicked: {
FluApp.exit(931)
}
}
}
}

113
example/qml-Qt6/window/FluentInitalizrWindow.qml
View File

@ -1,113 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import Qt.labs.platform
import "../component"
FluWindowDialog {
id:window
title:qsTr("FluentUI Initalizr")
width: 600
height: 400
contentDelegate:Component{
Item{
Connections{
target: InitalizrHelper
function onError(message){
showError(message)
}
function onSuccess(path){
FluTools.showFileInFolder(path+"/CMakeLists.txt")
window.close()
}
}
FluText{
id:text_title
text:qsTr("FluentUI Initalizr")
font: FluTextStyle.Title
anchors{
left: parent.left
top: parent.top
leftMargin: 20
topMargin: 20
}
}
Column{
spacing: 14
anchors{
left: parent.left
top: text_title.bottom
leftMargin: 20
topMargin: 20
}
FluTextBox{
id:text_box_name
width: 180
placeholderText: qsTr("Name")
focus: true
}
Row{
spacing: 8
FluTextBox{
id:text_box_path
width: 300
placeholderText: qsTr("Create In")
anchors.verticalCenter: parent.verticalCenter
}
FluButton{
text:qsTr("Browse")
anchors.verticalCenter: parent.verticalCenter
onClicked: {
folder_dialog.open()
}
}
}
}
FolderDialog{
id:folder_dialog
onAccepted: {
text_box_path.text = FluTools.toLocalPath(currentFolder)
}
}
Rectangle{
id:layout_actions
width: parent.width
height: 60
anchors.bottom: parent.bottom
color: FluTheme.backgroundColor
Row{
height: parent.height
spacing: 20
anchors{
right: parent.right
rightMargin: 20
}
FluButton{
text:qsTr("Cancel")
width: 120
anchors.verticalCenter: parent.verticalCenter
onClicked: {
window.close()
}
}
FluFilledButton{
text:qsTr("Create")
width: 120
anchors.verticalCenter: parent.verticalCenter
onClicked: {
InitalizrHelper.generate(text_box_name.text,text_box_path.text)
}
}
}
}
}
}
}

97
example/qml-Qt6/window/HotloadWindow.qml
View File

@ -1,97 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import example
import "../component"
FluWindow {
id:window
title: qsTr("Hot Loader")
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: FluStatusLayoutType.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: qsTr("Drag in a qml file")
font.pixelSize: 26
anchors.centerIn: parent
visible: !loader.itemLodaer().item && loader.statusMode === FluStatusLayoutType.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
}
var url = getUrlByEvent(event)
if(url === ""){
event.accepted = false
return
}
var fileExtension = url.substring(url.lastIndexOf(".") + 1)
if (fileExtension !== "qml") {
event.accepted = false
return
}
return true
}
onDropped:
(event)=>{
var url = getUrlByEvent(event)
if(url !== ""){
loader.source = url
watcher.path = url
loader.reload()
}
}
}
}
function getUrlByEvent(event){
var url = ""
if (event.urls.length === 0) {
url = "file:///"+event.getDataAsString("text/plain")
}else{
url = event.urls[0].toString()
}
return url
}
}

59
example/qml-Qt6/window/LoginWindow.qml
View File

@ -1,59 +0,0 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI
import "../component"
FluWindow {
id: window
title: qsTr("Login")
width: 400
height: 400
fixSize: true
modality: Qt.ApplicationModal
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: qsTr("Please enter the account")
Layout.preferredWidth: 260
Layout.alignment: Qt.AlignHCenter
}
FluTextBox{
id: textbox_password
Layout.topMargin: 20
Layout.preferredWidth: 260
placeholderText: qsTr("Please enter your password")
echoMode:TextInput.Password
Layout.alignment: Qt.AlignHCenter
}
FluFilledButton{
text: qsTr("Login")
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: 20
onClicked:{
if(textbox_password.text === ""){
showError(qsTr("Please feel free to enter a password"))
return
}
onResult({password:textbox_password.text})
window.close()
}
}
}
}

395
example/qml-Qt6/window/MainWindow.qml
View File

@ -1,395 +0,0 @@
import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.platform
import FluentUI
import example
import "../component"
import "../global"
import "../viewmodel"
FluWindow {
id:window
title: "FluentUI"
width: 1000
height: 680
minimumWidth: 520
minimumHeight: 200
launchMode: FluWindowType.SingleTask
fitsAppBarWindows: true
appBar: FluAppBar {
height: 30
showDark: true
darkClickListener:(button)=>handleDarkChanged(button)
closeClickListener: ()=>{dialog_close.open()}
z:7
}
SettingsViewModel{
id:viewmodel_settings
}
FluEvent{
id:event_checkupdate
name: "checkUpdate"
onTriggered: {
checkUpdate(false)
}
}
onFirstVisible: {
timer_tour_delay.restart()
}
Timer{
id:timer_tour_delay
interval: 200
onTriggered: {
tour.open()
}
}
Component.onCompleted: {
checkUpdate(true)
FluEventBus.registerEvent(event_checkupdate)
}
Component.onDestruction: {
FluEventBus.unRegisterEvent(event_checkupdate)
}
SystemTrayIcon {
id:system_tray
visible: true
icon.source: "qrc:/example/res/image/favicon.ico"
tooltip: "FluentUI"
menu: Menu {
MenuItem {
text: "退出"
onTriggered: {
FluApp.exit()
}
}
}
onActivated:
(reason)=>{
if(reason === SystemTrayIcon.Trigger){
window.show()
window.raise()
window.requestActivate()
}
}
}
Timer{
id: timer_window_hide_delay
interval: 150
onTriggered: {
window.hide()
}
}
FluContentDialog{
id: dialog_close
title: qsTr("Quit")
message: qsTr("Are you sure you want to exit the program?")
negativeText: qsTr("Minimize")
buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
onNegativeClicked: {
system_tray.showMessage(qsTr("Friendly Reminder"),qsTr("FluentUI is hidden from the tray, click on the tray to activate the window again"));
timer_window_hide_delay.restart()
}
positiveText: qsTr("Quit")
neutralText: qsTr("Cancel")
onPositiveClicked:{
FluApp.exit(0)
}
}
Component{
id: nav_item_right_menu
FluMenu{
width: 186
FluMenuItem{
text: qsTr("Open in Separate Window")
font.pixelSize: 12
onClicked: {
FluApp.navigate("/pageWindow",{title:modelData.title,url:modelData.url})
}
}
}
}
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
Row{
id:layout_back_buttons
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()
}
}
Component.onCompleted: {
appBar.setHitTestVisible(layout_back_buttons)
}
}
FluRemoteLoader{
id:loader
lazy: true
anchors.fill: parent
source: "https://zhu-zichu.gitee.io/Qt_168_LieflatPage.qml"
}
}
front: Item{
id:page_front
visible: flipable.flipAngle !== 180
anchors.fill: flipable
FluNavigationView{
property int clickCount: 0
id:nav_view
width: parent.width
height: parent.height
z:999
//Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
// pageMode: FluNavigationViewType.Stack
//NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存，可以配合FluViewModel保存页面数据（推荐）
pageMode: FluNavigationViewType.NoStack
items: ItemsOriginal
footerItems:ItemsFooter
topPadding:{
if(window.useSystemAppBar){
return 0
}
return FluTools.isMacos() ? 20 : 0
}
displayMode:viewmodel_settings.displayMode
logo: "qrc:/example/res/image/favicon.ico"
title:"FluentUI"
onLogoClicked:{
clickCount += 1
showSuccess("%1:%2".arg(qsTr("Click Time")).arg(clickCount))
if(clickCount === 5){
loader.reload()
flipable.flipped = true
clickCount = 0
}
}
autoSuggestBox:FluAutoSuggestBox{
iconSource: FluentIcons.Search
items: ItemsOriginal.getSearchData()
placeholderText: qsTr("Search")
onItemClicked:
(data)=>{
ItemsOriginal.startPageByItem(data)
}
}
Component.onCompleted: {
ItemsOriginal.navigationView = nav_view
ItemsOriginal.paneItemMenu = nav_item_right_menu
ItemsFooter.navigationView = nav_view
ItemsFooter.paneItemMenu = nav_item_right_menu
appBar.setHitTestVisible(nav_view.buttonMenu)
appBar.setHitTestVisible(nav_view.buttonBack)
appBar.setHitTestVisible(nav_view.imageLogo)
setCurrentIndex(0)
}
}
}
}
Component{
id:com_reveal
CircularReveal{
id:reveal
target:window.contentItem
anchors.fill: parent
onAnimationFinished:{
//动画结束后释放资源
loader_reveal.sourceComponent = undefined
}
onImageChanged: {
changeDark()
}
}
}
FluLoader{
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(!FluTheme.enableAnimation || window.fitsAppBarWindows === false){
changeDark()
}else{
if(loader_reveal.sourceComponent){
return
}
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
finishText: qsTr("Finish")
nextText: qsTr("Next")
previousText: qsTr("Previous")
steps:{
var data = []
if(!window.useSystemAppBar){
data.push({title:qsTr("Dark Mode"),description: qsTr("Here you can switch to night mode."),target:()=>appBar.buttonDark})
}
data.push({title:qsTr("Hide Easter eggs"),description: qsTr("Try a few more clicks!!"),target:()=>nav_view.imageLogo})
return data
}
}
FpsItem{
id:fps_item
}
FluText{
text: "fps %1".arg(fps_item.fps)
opacity: 0.3
anchors{
bottom: parent.bottom
right: parent.right
bottomMargin: 5
rightMargin: 5
}
}
FluContentDialog{
property string newVerson
property string body
id: dialog_update
title: qsTr("Upgrade Tips")
message:qsTr("FluentUI is currently up to date ")+ newVerson +qsTr(" -- The current app version") +AppInfo.version+qsTr(" \nNow go and download the new version？\n\nUpdated content: \n")+body
buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
negativeText: qsTr("Cancel")
positiveText: qsTr("OK")
onPositiveClicked:{
Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/releases/latest")
}
}
FluNetworkCallable{
id:callable
property bool silent: true
onStart: {
console.debug("satrt check update...")
}
onFinish: {
console.debug("check update finish")
FluEventBus.post("checkUpdateFinish");
}
onSuccess:
(result)=>{
var data = JSON.parse(result)
console.debug("current version "+AppInfo.version)
console.debug("new version "+data.tag_name)
if(data.tag_name !== AppInfo.version){
dialog_update.newVerson = data.tag_name
dialog_update.body = data.body
dialog_update.open()
}else{
if(!silent){
showInfo(qsTr("The current version is already the latest"))
}
}
}
onError:
(status,errorString)=>{
if(!silent){
showError(qsTr("The network is abnormal"))
}
console.debug(status+";"+errorString)
}
}
function checkUpdate(silent){
callable.silent = silent
FluNetwork.get("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
.go(callable)
}
}

25
example/qml-Qt6/window/PageWindow.qml
View File

@ -1,25 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import example
import "../component"
FluWindow {
id:window
width: 800
height: 600
minimumWidth: 520
minimumHeight: 200
launchMode: FluWindowType.SingleInstance
onInitArgument:
(arg)=>{
window.title = arg.title
loader.setSource( arg.url,{animDisabled:true})
}
FluLoader{
id: loader
anchors.fill: parent
}
}

35
example/qml-Qt6/window/SingleInstanceWindow.qml
View File

@ -1,35 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import "../component"
FluWindow {
id: window
title: qsTr("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: qsTr("I'm a SingleInstance window, and if I exist, I'll destroy the previous window and create a new one")
}
}

21
example/qml-Qt6/window/SingleTaskWindow.qml
View File

@ -1,21 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import "../component"
FluWindow {
id: window
title: qsTr("SingleTask")
width: 500
height: 600
fixSize: true
launchMode: FluWindowType.SingleTask
FluText{
anchors.centerIn: parent
text: qsTr("I'm a SingleTask mode window, and if I exist, I activate the window")
}
}

43
example/qml-Qt6/window/StandardWindow.qml
View File

@ -1,43 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import "../component"
FluWindow {
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: qsTr("I'm a Standard mode window, and every time I create a new window")
}
}

1
example/qml/window/MainWindow.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.15
import QtQuick.Window 2.15 import QtQuick.Window 2.15
import QtQuick.Controls 2.15 import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import QtQml 2.15
import Qt.labs.platform 1.1 import Qt.labs.platform 1.1
import FluentUI 1.0 import FluentUI 1.0
import example 1.0 import example 1.0

13
example/res/template/src/CMakeLists.txt.in
View File

@ -84,9 +84,9 @@ if (CMAKE_BUILD_TYPE MATCHES "Release")
add_custom_target(Script-DeployRelease add_custom_target(Script-DeployRelease
COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/%1 -qmldir=${CMAKE_CURRENT_LIST_DIR} COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME} -qmldir=${CMAKE_CURRENT_LIST_DIR}
COMMENT "Deploying Qt Dependencies After Build........." COMMENT "MacOs Deploying Qt Dependencies After Build........."
SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/README.md SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
) )
endif() endif()
@ -95,10 +95,11 @@ if (CMAKE_BUILD_TYPE MATCHES "Release")
add_custom_target(Script-DeployRelease add_custom_target(Script-DeployRelease
COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/%1.exe -qmldir=${CMAKE_CURRENT_LIST_DIR} COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe -qmldir=${CMAKE_CURRENT_LIST_DIR}
COMMENT "Deploying Qt Dependencies After Build........." COMMENT "Windows Deploying Qt Dependencies After Build........."
SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/README.md SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
) )
endif() endif()
endif() endif()

18
example/res/template/src/README.md.in Normal file
View File

@ -0,0 +1,18 @@
# FluentUI 脚手架开发说明
## 代码说明
文件编码格式请用utf-8不带bom，代码中最好不要含有中文（包括注释），中文可能会改变文件格式导致编译失败，还会出现乱码，显示中文请用国际化，c++中用tr函数，qml中用qsTr函数
### 脚本说明
1. **Script-UpdateTranslations**
用于更新ts与qm文件，当你的代码添加了tr或者qsTr函数后，执行这个脚本会更新ts文件，然后编写翻译后，再执行这个脚本，qm文件会更新生效
2. **Script-DeployRelease**
执行Qt的windeployqt或macdeployqt命令，这个脚本只在windows与macos才有，linux不支持

8
src/CMakeLists.txt
View File

@ -13,7 +13,7 @@ set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON) set(CMAKE_CXX_STANDARD_REQUIRED ON)
#设置版本号 #设置版本号
add_definitions(-DFLUENTUI_VERSION=1,7,2,0) add_definitions(-DFLUENTUI_VERSION=1,7,3,0)
if (FLUENTUI_BUILD_STATIC_LIB) if (FLUENTUI_BUILD_STATIC_LIB)
add_definitions(-DFLUENTUI_BUILD_STATIC_LIB) add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
@ -170,9 +170,9 @@ endif()
#链接库 #链接库
target_link_libraries(${PROJECT_NAME} PUBLIC target_link_libraries(${PROJECT_NAME} PUBLIC
Qt${QT_VERSION_MAJOR}::CorePrivate Qt${QT_VERSION_MAJOR}::Core
Qt${QT_VERSION_MAJOR}::QuickPrivate Qt${QT_VERSION_MAJOR}::Quick
Qt${QT_VERSION_MAJOR}::QmlPrivate Qt${QT_VERSION_MAJOR}::Qml
) )
#安装 #安装

16
src/FluTheme.cpp
View File

@ -1,14 +1,7 @@
#include "FluTheme.h" #include "FluTheme.h"
#include <QGuiApplication> #include <QGuiApplication>
#if (QT_VERSION >= QT_VERSION_CHECK(6, 5, 0))
#include <QStyleHints>
#elif ((QT_VERSION >= QT_VERSION_CHECK(6, 2, 1)))
#include <QtGui/qpa/qplatformtheme.h>
#include <QtGui/private/qguiapplication_p.h>
#else
#include <QPalette> #include <QPalette>
#endif
#include "Def.h" #include "Def.h"
#include "FluColors.h" #include "FluColors.h"
@ -71,18 +64,9 @@ QJsonArray FluTheme::awesomeList(const QString& keyword){
} }
bool FluTheme::systemDark(){ bool FluTheme::systemDark(){
#if (QT_VERSION >= QT_VERSION_CHECK(6, 5, 0))
return (QGuiApplication::styleHints()->colorScheme() == Qt::ColorScheme::Dark);
#elif ((QT_VERSION >= QT_VERSION_CHECK(6, 2, 1)))
if (const QPlatformTheme * const theme = QGuiApplicationPrivate::platformTheme()) {
return (theme->appearance() == QPlatformTheme::Appearance::Dark);
}
return false;
#else
QPalette palette = qApp->palette(); QPalette palette = qApp->palette();
QColor color = palette.color(QPalette::Window).rgb(); QColor color = palette.color(QPalette::Window).rgb();
return !(color.red() * 0.2126 + color.green() * 0.7152 + color.blue() * 0.0722 > 255 / 2); return !(color.red() * 0.2126 + color.green() * 0.7152 + color.blue() * 0.0722 > 255 / 2);
#endif
} }
bool FluTheme::dark(){ bool FluTheme::dark(){

41
src/FluentUI/Controls/FluAcrylic.qml Normal file
View File

@ -0,0 +1,41 @@
import QtQuick
import Qt5Compat.GraphicalEffects
import FluentUI
Item {
id: control
property color tintColor: Qt.rgba(1, 1, 1, 1)
property real tintOpacity: 0.65
property real luminosity: 0.01
property real noiseOpacity: 0.02
property alias target: effect_source.sourceItem
property int blurRadius: 32
property rect targetRect: Qt.rect(control.x, control.y, control.width,
control.height)
ShaderEffectSource {
id: effect_source
anchors.fill: parent
visible: false
sourceRect: control.targetRect
}
FastBlur {
id: fast_blur
anchors.fill: parent
source: effect_source
radius: control.blurRadius
}
Rectangle {
anchors.fill: parent
color: Qt.rgba(1, 1, 1, luminosity)
}
Rectangle {
anchors.fill: parent
color: Qt.rgba(tintColor.r, tintColor.g, tintColor.b, tintOpacity)
}
Image {
anchors.fill: parent
source: "../Image/noise.png"
fillMode: Image.Tile
opacity: control.noiseOpacity
}
}

347
src/FluentUI/Controls/FluAppBar.qml Normal file
View File

@ -0,0 +1,347 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Window
import QtQuick.Layouts
import FluentUI
Rectangle{
property string title: ""
property string darkText : qsTr("Dark")
property string lightText : qsTr("Light")
property string minimizeText : qsTr("Minimize")
property string restoreText : qsTr("Restore")
property string maximizeText : qsTr("Maximize")
property string closeText : qsTr("Close")
property string stayTopText : qsTr("Sticky on Top")
property string stayTopCancelText : qsTr("Sticky on Top cancelled")
property color textColor: FluTheme.dark ? "#FFFFFF" : "#000000"
property color minimizeNormalColor: FluTheme.itemNormalColor
property color minimizeHoverColor: FluTheme.itemHoverColor
property color minimizePressColor: FluTheme.itemPressColor
property color maximizeNormalColor: FluTheme.itemNormalColor
property color maximizeHoverColor: FluTheme.itemHoverColor
property color maximizePressColor: FluTheme.itemPressColor
property color closeNormalColor: Qt.rgba(0,0,0,0)
property color closeHoverColor: Qt.rgba(251/255,115/255,115/255,1)
property color closePressColor: Qt.rgba(251/255,115/255,115/255,0.8)
property bool showDark: false
property bool showClose: true
property bool showMinimize: true
property bool showMaximize: true
property bool showStayTop: true
property bool titleVisible: true
property url icon
property int iconSize: 20
property bool isMac: FluTools.isMacos()
property color borerlessColor : FluTheme.primaryColor
property bool systemMoveEnable: true
property var maxClickListener : function(){
if(FluTools.isMacos()){
if (d.win.visibility === Window.FullScreen)
d.win.showNormal()
else
d.win.showFullScreen()
}else{
if (d.win.visibility === Window.Maximized)
d.win.showNormal()
else
d.win.showMaximized()
d.hoverMaxBtn = false
}
}
property var minClickListener: function(){
if(d.win.transientParent != null){
d.win.transientParent.showMinimized()
}else{
d.win.showMinimized()
}
}
property var closeClickListener : function(){
d.win.close()
}
property var stayTopClickListener: function(){
if(d.win instanceof FluWindow){
d.win.stayTop = !d.win.stayTop
}
}
property var darkClickListener: function(){
if(FluTheme.dark){
FluTheme.darkMode = FluThemeType.Light
}else{
FluTheme.darkMode = FluThemeType.Dark
}
}
property var systemMenuListener: function(){
if(d.win instanceof FluWindow){
d.win.showSystemMenu()
}
}
property alias buttonStayTop: btn_stay_top
property alias buttonMinimize: btn_minimize
property alias buttonMaximize: btn_maximize
property alias buttonClose: btn_close
property alias buttonDark: btn_dark
id:control
color: Qt.rgba(0,0,0,0)
height: visible ? 30 : 0
opacity: visible
z: 65535
Item{
id:d
property var hitTestList: []
property bool hoverMaxBtn: false
property var win: Window.window
property bool stayTop: {
if(d.win instanceof FluWindow){
return d.win.stayTop
}
return false
}
property bool isRestore: win && Window.Maximized === win.visibility
property bool resizable: win && !(win.height === win.maximumHeight && win.height === win.minimumHeight && win.width === win.maximumWidth && win.width === win.minimumWidth)
function containsPointToItem(point,item){
var pos = item.mapToGlobal(0,0)
var rect = Qt.rect(pos.x,pos.y,item.width,item.height)
if(point.x>rect.x && point.x<(rect.x+rect.width) && point.y>rect.y && point.y<(rect.y+rect.height)){
return true
}
return false
}
}
MouseArea{
id:mouse_app_bar
anchors.fill: parent
onPositionChanged:
(mouse)=>{
if(systemMoveEnable){
d.win.startSystemMove()
}
}
onDoubleClicked:
(mouse)=>{
if(systemMoveEnable && d.resizable && Qt.LeftButton){
btn_maximize.clicked()
}
}
acceptedButtons: Qt.LeftButton|Qt.RightButton
onClicked:
(mouse)=>{
if (systemMoveEnable && mouse.button === Qt.RightButton){
control.systemMenuListener()
}
}
}
Row{
anchors{
verticalCenter: parent.verticalCenter
left: isMac ? undefined : parent.left
leftMargin: isMac ? undefined : 10
horizontalCenter: isMac ? parent.horizontalCenter : undefined
}
spacing: 10
Image{
width: control.iconSize
height: control.iconSize
visible: status === Image.Ready ? true : false
source: control.icon
anchors.verticalCenter: parent.verticalCenter
}
FluText {
text: title
visible: control.titleVisible
color:control.textColor
anchors.verticalCenter: parent.verticalCenter
}
}
Component{
id:com_mac_buttons
RowLayout{
FluImageButton{
Layout.preferredHeight: 12
Layout.preferredWidth: 12
normalImage: "../Image/btn_close_normal.png"
hoveredImage: "../Image/btn_close_hovered.png"
pushedImage: "../Image/btn_close_pushed.png"
visible: showClose
onClicked: closeClickListener()
}
FluImageButton{
Layout.preferredHeight: 12
Layout.preferredWidth: 12
normalImage: "../Image/btn_min_normal.png"
hoveredImage: "../Image/btn_min_hovered.png"
pushedImage: "../Image/btn_min_pushed.png"
onClicked: minClickListener()
visible: showMinimize
}
FluImageButton{
Layout.preferredHeight: 12
Layout.preferredWidth: 12
normalImage: "../Image/btn_max_normal.png"
hoveredImage: "../Image/btn_max_hovered.png"
pushedImage: "../Image/btn_max_pushed.png"
onClicked: maxClickListener()
visible: d.resizable && showMaximize
}
}
}
FluLoader{
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 10
}
sourceComponent: isMac ? com_mac_buttons : undefined
}
RowLayout{
id:layout_row
anchors.right: parent.right
height: control.height
spacing: 0
Component.onCompleted: {
setHitTestVisible(layout_row)
}
FluIconButton{
id:btn_dark
Layout.preferredWidth: 40
Layout.preferredHeight: 30
padding: 0
verticalPadding: 0
horizontalPadding: 0
rightPadding: 2
iconSource: FluTheme.dark ? FluentIcons.Brightness : FluentIcons.QuietHours
Layout.alignment: Qt.AlignVCenter
iconSize: 15
visible: showDark
text: FluTheme.dark ? control.lightText : control.darkText
radius: 0
iconColor:control.textColor
onClicked:()=> darkClickListener(btn_dark)
}
FluIconButton{
id:btn_stay_top
Layout.preferredWidth: 40
Layout.preferredHeight: 30
padding: 0
verticalPadding: 0
horizontalPadding: 0
iconSource : FluentIcons.Pinned
Layout.alignment: Qt.AlignVCenter
iconSize: 14
visible: {
if(!(d.win instanceof FluWindow)){
return false
}
return showStayTop
}
text:d.stayTop ? control.stayTopCancelText : control.stayTopText
radius: 0
iconColor: d.stayTop ? FluTheme.primaryColor : control.textColor
onClicked: stayTopClickListener()
}
FluIconButton{
id:btn_minimize
Layout.preferredWidth: 40
Layout.preferredHeight: 30
padding: 0
verticalPadding: 0
horizontalPadding: 0
iconSource : FluentIcons.ChromeMinimize
Layout.alignment: Qt.AlignVCenter
iconSize: 11
text:minimizeText
radius: 0
visible: !isMac && showMinimize
iconColor: control.textColor
color: {
if(pressed){
return minimizePressColor
}
return hovered ? minimizeHoverColor : minimizeNormalColor
}
onClicked: minClickListener()
}
FluIconButton{
id:btn_maximize
Layout.preferredWidth: 40
Layout.preferredHeight: 30
padding: 0
verticalPadding: 0
horizontalPadding: 0
iconSource : d.isRestore ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
color: {
if(down){
return maximizePressColor
}
if(FluTools.isWindows11OrGreater()){
return d.hoverMaxBtn ? maximizeHoverColor : maximizeNormalColor
}
return hovered ? maximizeHoverColor : maximizeNormalColor
}
Layout.alignment: Qt.AlignVCenter
visible: d.resizable && !isMac && showMaximize
radius: 0
iconColor: control.textColor
text:d.isRestore?restoreText:maximizeText
iconSize: 11
onClicked: maxClickListener()
}
FluIconButton{
id:btn_close
Layout.preferredWidth: 40
Layout.preferredHeight: 30
padding: 0
verticalPadding: 0
horizontalPadding: 0
iconSource : FluentIcons.ChromeClose
Layout.alignment: Qt.AlignVCenter
text:closeText
visible: !isMac && showClose
radius: 0
iconSize: 10
iconColor: hovered ? Qt.rgba(1,1,1,1) : control.textColor
color:{
if(pressed){
return closePressColor
}
return hovered ? closeHoverColor : closeNormalColor
}
onClicked: closeClickListener()
}
}
function _maximizeButtonHover(){
var hover = false
if(btn_maximize.visible && FluTools.isWindows11OrGreater() && d.resizable){
if(d.containsPointToItem(FluTools.cursorPos(),btn_maximize)){
hover = true
}else{
if(btn_maximize.down){
btn_maximize.down = false
}
}
}
d.hoverMaxBtn = hover
return hover;
}
function _appBarHover(){
var cursorPos = FluTools.cursorPos()
for(var i =0 ;i< d.hitTestList.length; i++){
var item = d.hitTestList[i]
if(item.visible){
if(d.containsPointToItem(cursorPos,item)){
return false
}
}
}
if(d.containsPointToItem(cursorPos,control)){
return true
}
return false
}
function setHitTestVisible(id){
d.hitTestList.push(id)
}
}

28
src/FluentUI/Controls/FluArea.qml Normal file
View File

@ -0,0 +1,28 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Window
import FluentUI
Rectangle {
default property alias contentData : layout_content.data
property int paddings : 0
property int leftPadding : 0
property int rightPadding : 0
property int topPadding : 0
property int bottomPadding : 0
id:control
radius: 4
color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.width: 1
implicitHeight: height
implicitWidth: width
Item {
id: layout_content
anchors.fill: parent
anchors.leftMargin: Math.max(paddings,leftPadding)
anchors.rightMargin: Math.max(paddings,rightPadding)
anchors.topMargin: Math.max(paddings,topPadding)
anchors.bottomMargin: Math.max(paddings,bottomPadding)
}
}

139
src/FluentUI/Controls/FluAutoSuggestBox.qml Normal file
View File

@ -0,0 +1,139 @@
import QtQuick
import QtQuick.Controls
import FluentUI
FluTextBox{
property var items:[]
property string emptyText: qsTr("No results found")
property int autoSuggestBoxReplacement: FluentIcons.Search
property var filter: function(item){
if(item.title.indexOf(control.text)!==-1){
return true
}
return false
}
signal itemClicked(var data)
id:control
Component.onCompleted: {
d.loadData()
}
Item{
id:d
property bool flagVisible: true
property var window : Window.window
function handleClick(modelData){
control_popup.visible = false
control.itemClicked(modelData)
d.updateText(modelData.title)
}
function updateText(text){
d.flagVisible = false
control.text = text
d.flagVisible = true
}
function loadData(){
var result = []
if(items==null){
list_view.model = result
return
}
items.map(function(item){
if(control.filter(item)){
result.push(item)
}
})
list_view.model = result
}
}
onActiveFocusChanged: {
if(!activeFocus){
control_popup.visible = false
}
}
Popup{
id:control_popup
y:control.height
focus: false
padding: 0
enter: Transition {
NumberAnimation {
property: "opacity"
from:0
to:1
duration: FluTheme.enableAnimation ? 83 : 0
}
}
contentItem: FluRectangle{
radius: [4,4,4,4]
FluShadow{
radius: 4
}
color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
ListView{
id:list_view
anchors.fill: parent
clip: true
boundsBehavior: ListView.StopAtBounds
ScrollBar.vertical: FluScrollBar {}
header: Item{
width: control.width
height: visible ? 38 : 0
visible: list_view.count === 0
FluText{
text:emptyText
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 10
}
}
}
delegate:FluControl{
id:item_control
height: 38
width: control.width
onClicked:{
d.handleClick(modelData)
}
background: Rectangle{
FluFocusRectangle{
visible: item_control.activeFocus
radius:4
}
color: {
if(hovered){
return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
}
return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
}
}
contentItem: FluText{
text:modelData.title
leftPadding: 10
rightPadding: 10
verticalAlignment : Qt.AlignVCenter
}
}
}
}
background: Item{
id:container
implicitWidth: control.width
implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
}
}
onTextChanged: {
d.loadData()
if(d.flagVisible){
var pos = control.mapToItem(null, 0, 0)
if(d.window.height>pos.y+control.height+container.implicitHeight){
control_popup.y = control.height
} else if(pos.y>container.implicitHeight){
control_popup.y = -container.implicitHeight
} else {
control_popup.y = d.window.height-(pos.y+container.implicitHeight)
}
control_popup.visible = true
}
}
}

79
src/FluentUI/Controls/FluBadge.qml Normal file
View File

@ -0,0 +1,79 @@
import QtQuick
import QtQuick.Controls
import FluentUI
Rectangle{
property bool isDot: false
property bool showZero: false
property int count: 0
property bool topRight: false
id:control
color:Qt.rgba(255/255,77/255,79/255,1)
width: {
if(isDot)
return 10
if(count<10){
return 20
}else if(count<100){
return 30
}
return 40
}
height: {
if(isDot)
return 10
return 20
}
radius: {
if(isDot)
return 5
return 10
}
border.width: 1
border.color: Qt.rgba(1,1,1,1)
anchors{
right: {
if(parent && topRight)
return parent.right
return undefined
}
top: {
if(parent && topRight)
return parent.top
return undefined
}
rightMargin: {
if(parent && topRight){
if(isDot){
return -2.5
}
return -(control.width/2)
}
return 0
}
topMargin: {
if(parent && topRight){
if(isDot){
return -2.5
}
return -10
}
return 0
}
}
visible: {
if(showZero)
return true
return count!==0
}
FluText{
anchors.centerIn: parent
color: Qt.rgba(1,1,1,1)
visible: !isDot
text:{
if(count<100)
return count
return count+"+"
}
}
}

92
src/FluentUI/Controls/FluBreadcrumbBar.qml Normal file
View File

@ -0,0 +1,92 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
Item {
property int textSize: 15
property string separator: "/"
property var items: []
property int spacing: 5
signal clickItem(var model)
id:control
implicitWidth: 300
height: 30
onItemsChanged: {
list_model.clear()
list_model.append(items)
}
ListModel{
id:list_model
}
ListView{
id:list_view
width: parent.width
height: 30
orientation: ListView.Horizontal
model: list_model
clip: true
spacing : control.spacing
boundsBehavior: ListView.StopAtBounds
remove: Transition {
NumberAnimation {
properties: "opacity"
from: 1
to: 0
duration: FluTheme.enableAnimation ? 83 : 1
}
}
add: Transition {
NumberAnimation {
properties: "opacity"
from: 0
to: 1
duration: FluTheme.enableAnimation ? 83 : 1
}
}
delegate: Item{
height: item_layout.height
width: item_layout.width
RowLayout{
id:item_layout
spacing: list_view.spacing
height: list_view.height
FluText{
text:model.title
Layout.alignment: Qt.AlignVCenter
color: {
if(item_mouse.pressed){
return FluTheme.dark ? Qt.rgba(150/255,150/255,150/235,1) : Qt.rgba(134/255,134/255,134/235,1)
}
if(item_mouse.containsMouse){
return FluTheme.dark ? Qt.rgba(204/255,204/255,204/235,1) : Qt.rgba(92/255,92/255,92/235,1)
}
return FluTheme.dark ? Qt.rgba(255/255,255/255,255/235,1) : Qt.rgba(26/255,26/255,26/235,1)
}
MouseArea{
id:item_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
control.clickItem(model)
}
}
}
FluText{
text:control.separator
font.pixelSize: control.textSize
visible: list_view.count-1 !== index
Layout.alignment: Qt.AlignVCenter
}
}
}
}
function remove(index,count){
list_model.remove(index,count)
}
function count(){
return list_model.count
}
}

65
src/FluentUI/Controls/FluButton.qml Normal file
View File

@ -0,0 +1,65 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import FluentUI
Button {
property bool disabled: false
property string contentDescription: ""
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
property color textColor: {
if(FluTheme.dark){
if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(pressed){
return Qt.rgba(162/255,162/255,162/255,1)
}
return Qt.rgba(1,1,1,1)
}else{
if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(pressed){
return Qt.rgba(96/255,96/255,96/255,1)
}
return Qt.rgba(0,0,0,1)
}
}
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
id: control
enabled: !disabled
verticalPadding: 0
horizontalPadding:12
font:FluTextStyle.Body
focusPolicy:Qt.TabFocus
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: 1
radius: 4
color:{
if(!enabled){
return disableColor
}
return hovered ? hoverColor :normalColor
}
FluFocusRectangle{
visible: control.activeFocus
radius:4
}
}
contentItem: FluText {
text: control.text
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font: control.font
color: control.textColor
}
}

661
src/FluentUI/Controls/FluCalendarPicker.qml Normal file
View File

@ -0,0 +1,661 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
Rectangle {
property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property string text: qsTr("Pick a date")
property date from: new Date(1924, 0, 1)
property date to: new Date(2124, 11, 31)
property var current
signal accepted()
id:control
color: {
if(mouse_area.containsMouse){
return hoverColor
}
return normalColor
}
height: 30
width: 120
radius: 4
border.width: 1
border.color: dividerColor
MouseArea{
id:mouse_area
hoverEnabled: true
anchors.fill: parent
onClicked: {
popup.showPopup()
}
}
CalendarModel {
id:calender_model
from: control.from
to: control.to
}
Item{
id:d
property var window : Window.window
property date displayDate: {
if(control.current){
return control.current
}
return new Date()
}
property date toDay : new Date()
property int pageIndex: 0
signal nextButton
signal previousButton
property point yearRing : Qt.point(0,0)
}
FluText{
id:text_date
anchors{
left: parent.left
right: parent.right
rightMargin: 30
top: parent.top
bottom: parent.bottom
}
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text:{
if(control.current){
return control.current.toLocaleDateString(FluApp.locale,"yyyy/M/d")
}
return control.text
}
}
FluIcon{
iconSource: FluentIcons.Calendar
iconSize: 14
iconColor: text_date.color
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 12
}
}
Menu{
id:popup
height: container.height
width: container.width
modal: true
Overlay.modal: Item {}
enter: Transition {
reversible: true
NumberAnimation {
property: "opacity"
from:0
to:1
duration: FluTheme.enableAnimation ? 83 : 0
}
}
exit:Transition {
NumberAnimation {
property: "opacity"
from:1
to:0
duration: FluTheme.enableAnimation ? 83 : 0
}
}
contentItem: Item{
clip: true
FluArea{
id:container
width: 300
height: 360
ColumnLayout {
anchors.fill: parent
spacing: 0
Item{
Layout.fillWidth: true
Layout.preferredHeight: 50
RowLayout{
anchors.fill: parent
spacing: 10
Item{
Layout.leftMargin: parent.spacing
Layout.fillWidth: true
Layout.fillHeight: true
FluTextButton{
width: parent.width
anchors.centerIn: parent
contentItem: FluText {
text: d.displayDate.toLocaleString(FluApp.locale, "MMMM yyyy")
verticalAlignment: Text.AlignVCenter
}
visible: d.pageIndex === 0
onClicked: {
d.pageIndex = 1
}
}
FluTextButton{
width: parent.width
anchors.centerIn: parent
contentItem: FluText {
text: d.displayDate.toLocaleString(FluApp.locale, "yyyy")
verticalAlignment: Text.AlignVCenter
}
visible: d.pageIndex === 1
onClicked: {
d.pageIndex = 2
}
}
FluTextButton{
width: parent.width
anchors.centerIn: parent
contentItem: FluText {
text: "%1-%2".arg(d.yearRing.x).arg(d.yearRing.y)
verticalAlignment: Text.AlignVCenter
textColor: FluTheme.fontTertiaryColor
}
visible: d.pageIndex === 2
}
}
FluIconButton{
id:icon_up
iconSource: FluentIcons.CaretUpSolid8
iconSize: 10
onClicked: {
d.previousButton()
}
}
FluIconButton{
id:icon_down
iconSource: FluentIcons.CaretDownSolid8
iconSize: 10
Layout.rightMargin: parent.spacing
onClicked: {
d.nextButton()
}
}
}
FluDivider{
width: parent.width
height: 1
anchors.bottom: parent.bottom
}
}
Item{
Layout.fillWidth: true
Layout.fillHeight: true
StackView{
id:stack_view
anchors.fill: parent
initialItem: com_page_one
replaceEnter : Transition{
OpacityAnimator{
from: 0
to: 1
duration: 88
}
ScaleAnimator{
from: 0.5
to: 1
duration: 167
easing.type: Easing.OutCubic
}
}
replaceExit : Transition{
OpacityAnimator{
from: 1
to: 0
duration: 88
}
ScaleAnimator{
from: 1.0
to: 0.5
duration: 167
easing.type: Easing.OutCubic
}
}
}
Connections{
target: d
function onPageIndexChanged(){
if(d.pageIndex === 0){
stack_view.replace(com_page_one)
}
if(d.pageIndex === 1){
stack_view.replace(com_page_two)
}
if(d.pageIndex === 2){
stack_view.replace(com_page_three)
}
}
}
Component{
id:com_page_three
GridView{
id:grid_view
cellHeight: 75
cellWidth: 75
clip: true
boundsBehavior: GridView.StopAtBounds
ScrollBar.vertical: FluScrollBar {}
model: {
var fromYear = calender_model.from.getFullYear()
var toYear = calender_model.to.getFullYear()
return toYear-fromYear+1
}
highlightRangeMode: GridView.StrictlyEnforceRange
onCurrentIndexChanged:{
var year = currentIndex + calender_model.from.getFullYear()
var start = Math.ceil(year / 10) * 10
var end = start+10
d.yearRing = Qt.point(start,end)
}
highlightMoveDuration: 100
Component.onCompleted: {
grid_view.highlightMoveDuration = 0
currentIndex = d.displayDate.getFullYear()-calender_model.from.getFullYear()
timer_delay.restart()
}
Connections{
target: d
function onNextButton(){
grid_view.currentIndex = Math.min(grid_view.currentIndex+16,grid_view.count-1)
}
function onPreviousButton(){
grid_view.currentIndex = Math.max(grid_view.currentIndex-16,0)
}
}
Timer{
id:timer_delay
interval: 100
onTriggered: {
grid_view.highlightMoveDuration = 100
}
}
currentIndex: -1
delegate: Item{
property int year : calender_model.from.getFullYear()+modelData
property bool toYear: year === d.toDay.getFullYear()
implicitHeight: 75
implicitWidth: 75
FluControl{
id:control_delegate
width: 60
height: 60
anchors.centerIn: parent
Rectangle{
width: 48
height: 48
radius: width/2
color: {
if(toYear){
if(control_delegate.pressed){
return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2)
}
if(control_delegate.hovered){
return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.1) : Qt.lighter(FluTheme.primaryColor,1.1)
}
return FluTheme.primaryColor
}else{
if(control_delegate.pressed){
return FluTheme.itemPressColor
}
if(control_delegate.hovered){
return FluTheme.itemHoverColor
}
return FluColors.Transparent
}
}
anchors.centerIn: parent
}
FluText{
text: year
anchors.centerIn: parent
opacity: {
if(year >= d.yearRing.x && year <= d.yearRing.y){
return 1
}
if(control_delegate.hovered){
return 1
}
return 0.3
}
color: {
if(toYear){
return FluColors.White
}
if(control_delegate.pressed){
return FluTheme.dark ? FluColors.Grey100 : FluColors.Grey100
}
if(control_delegate.hovered){
return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
}
return FluTheme.dark ? FluColors.White : FluColors.Grey220
}
}
onClicked: {
d.displayDate = new Date(year,0,1)
d.pageIndex = 1
}
}
}
}
}
Component{
id:com_page_two
ListView{
id:listview
ScrollBar.vertical: FluScrollBar {}
highlightRangeMode: ListView.StrictlyEnforceRange
clip: true
boundsBehavior: ListView.StopAtBounds
spacing: 0
highlightMoveDuration: 100
model: {
var fromYear = calender_model.from.getFullYear()
var toYear = calender_model.to.getFullYear()
var yearsArray = []
for (var i = fromYear; i <= toYear; i++) {
yearsArray.push(i)
}
return yearsArray
}
currentIndex: -1
onCurrentIndexChanged:{
var year = model[currentIndex]
var month = d.displayDate.getMonth()
d.displayDate = new Date(year,month,1)
}
Connections{
target: d
function onNextButton(){
listview.currentIndex = Math.min(listview.currentIndex+1,listview.count-1)
}
function onPreviousButton(){
listview.currentIndex = Math.max(listview.currentIndex-1,0)
}
}
Component.onCompleted: {
listview.highlightMoveDuration = 0
currentIndex = model.indexOf(d.displayDate.getFullYear())
timer_delay.restart()
}
Timer{
id:timer_delay
interval: 100
onTriggered: {
listview.highlightMoveDuration = 100
}
}
delegate: Item{
id:layout_congrol
property int year : modelData
width: listview.width
height: 75*3
GridView{
anchors.fill: parent
cellHeight: 75
cellWidth: 75
clip: true
interactive: false
boundsBehavior: GridView.StopAtBounds
model: 12
delegate: Item{
property int month : modelData
property bool toMonth: layout_congrol.year === d.toDay.getFullYear() && month === d.toDay.getMonth()
implicitHeight: 75
implicitWidth: 75
FluControl{
id:control_delegate
width: 60
height: 60
anchors.centerIn: parent
Rectangle{
width: 48
height: 48
radius: width/2
color: {
if(toMonth){
if(control_delegate.pressed){
return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2)
}
if(control_delegate.hovered){
return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.1) : Qt.lighter(FluTheme.primaryColor,1.1)
}
return FluTheme.primaryColor
}else{
if(control_delegate.pressed){
return FluTheme.itemPressColor
}
if(control_delegate.hovered){
return FluTheme.itemHoverColor
}
return FluColors.Transparent
}
}
anchors.centerIn: parent
}
FluText{
text: new Date(layout_congrol.year,month).toLocaleString(FluApp.locale, "MMMM")
anchors.centerIn: parent
opacity: {
if(layout_congrol.year === d.displayDate.getFullYear()){
return 1
}
if(control_delegate.hovered){
return 1
}
return 0.3
}
color: {
if(toMonth){
return FluColors.White
}
if(control_delegate.pressed){
return FluTheme.dark ? FluColors.Grey100 : FluColors.Grey100
}
if(control_delegate.hovered){
return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
}
return FluTheme.dark ? FluColors.White : FluColors.Grey220
}
}
onClicked: {
d.displayDate = new Date(layout_congrol.year,month)
d.pageIndex = 0
}
}
}
}
}
}
}
Component{
id:com_page_one
ColumnLayout {
DayOfWeekRow {
id: dayOfWeekRow
locale: FluApp.locale
font.bold: false
delegate: Label {
text: model.shortName
font: dayOfWeekRow.font
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
Layout.column: 1
Layout.fillWidth: true
}
ListView{
id:listview
property bool isCompleted: false
Layout.fillWidth: true
Layout.fillHeight: true
highlightRangeMode: ListView.StrictlyEnforceRange
clip: true
boundsBehavior: ListView.StopAtBounds
spacing: 0
highlightMoveDuration: 100
currentIndex: -1
ScrollBar.vertical: FluScrollBar {}
onCurrentIndexChanged:{
if(isCompleted){
var month = calender_model.monthAt(currentIndex)
var year = calender_model.yearAt(currentIndex)
d.displayDate = new Date(year,month,1)
}
}
Component.onCompleted: {
listview.model = calender_model
listview.highlightMoveDuration = 0
currentIndex = calender_model.indexOf(d.displayDate)
timer_delay.restart()
isCompleted = true
}
Timer{
id:timer_delay
interval: 100
onTriggered: {
listview.highlightMoveDuration = 100
}
}
Connections{
target: d
function onNextButton(){
listview.currentIndex = Math.min(listview.currentIndex+1,listview.count-1)
}
function onPreviousButton(){
listview.currentIndex = Math.max(listview.currentIndex-1,0)
}
}
delegate: MonthGrid {
id: grid
width: listview.width
height: listview.height
month: model.month
year: model.year
spacing: 0
locale: FluApp.locale
delegate: FluControl {
required property bool today
required property int year
required property int month
required property int day
required property int visibleMonth
id: control_delegate
visibleMonth: grid.month
implicitHeight: 40
implicitWidth: 40
Rectangle{
width: 34
height: 34
radius: width/2
color: {
if(today){
if(control_delegate.pressed){
return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2)
}
if(control_delegate.hovered){
return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.1) : Qt.lighter(FluTheme.primaryColor,1.1)
}
return FluTheme.primaryColor
}else{
if(control_delegate.pressed){
return FluTheme.itemPressColor
}
if(control_delegate.hovered){
return FluTheme.itemHoverColor
}
return FluColors.Transparent
}
}
anchors.centerIn: parent
}
Rectangle{
width: 40
height: 40
border.width: 1
anchors.centerIn: parent
radius: width/2
border.color: FluTheme.primaryColor
color: FluColors.Transparent
visible: {
if(control.current){
var y = control.current.getFullYear()
var m = control.current.getMonth()
var d = control.current.getDate()
if(y === year && m === month && d === day){
return true
}
return false
}
return false
}
}
FluText{
text: day
opacity: {
if(month === grid.month){
return 1
}
if(control_delegate.hovered){
return 1
}
return 0.3
}
anchors.centerIn: parent
color: {
if(today){
return FluColors.White
}
if(control_delegate.pressed){
return FluTheme.dark ? FluColors.Grey100 : FluColors.Grey100
}
if(control_delegate.hovered){
return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
}
return FluTheme.dark ? FluColors.White : FluColors.Grey220
}
}
onClicked: {
control.current = new Date(year,month,day)
control.accepted()
popup.close()
}
}
background: Item {
x: grid.leftPadding
y: grid.topPadding
width: grid.availableWidth
height: grid.availableHeight
}
}
}
}
}
}
}
}
}
background: Item{
FluShadow{
radius: 5
}
}
function showPopup() {
var pos = control.mapToItem(null, 0, 0)
if(d.window.height>pos.y+control.height+container.height){
popup.y = control.height
} else if(pos.y>container.height){
popup.y = -container.height
} else {
popup.y = d.window.height-(pos.y+container.height)
}
popup.x = -(popup.width-control.width)/2
popup.open()
}
}
}

206
src/FluentUI/Controls/FluCarousel.qml Normal file
View File

@ -0,0 +1,206 @@
import QtQuick
import QtQuick.Controls
import FluentUI
Item {
property bool autoPlay: true
property int loopTime: 2000
property var model
property Component delegate
property bool showIndicator: true
property int indicatorGravity : Qt.AlignBottom | Qt.AlignHCenter
property int indicatorMarginLeft: 0
property int indicatorMarginRight: 0
property int indicatorMarginTop: 0
property int indicatorMarginBottom: 20
property int indicatorSpacing: 10
property alias indicatorAnchors: layout_indicator.anchors
property Component indicatorDelegate : com_indicator
id:control
width: 400
height: 300
ListModel{
id:content_model
}
QtObject{
id:d
property bool flagXChanged: true
property bool isAnimEnable: control.autoPlay && list_view.count>3
function setData(data){
if(!data){
return
}
content_model.clear()
content_model.append(data[data.length-1])
content_model.append(data)
content_model.append(data[0])
list_view.highlightMoveDuration = 0
list_view.currentIndex = 1
list_view.highlightMoveDuration = 250
if(d.isAnimEnable){
timer_run.restart()
}
}
}
ListView{
id:list_view
anchors.fill: parent
snapMode: ListView.SnapOneItem
clip: true
boundsBehavior: ListView.StopAtBounds
model:content_model
maximumFlickVelocity: 4 * (list_view.orientation === Qt.Horizontal ? width : height)
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 0
Component.onCompleted: {
d.setData(control.model)
}
interactive: list_view.count>3
Connections{
target: control
function onModelChanged(){
d.setData(control.model)
}
}
orientation : ListView.Horizontal
delegate: Item{
id:item_control
width: ListView.view.width
height: ListView.view.height
property int displayIndex: {
if(index === 0)
return content_model.count-3
if(index === content_model.count-1)
return 0
return index-1
}
FluLoader{
property int displayIndex : item_control.displayIndex
property var model: list_view.model.get(index)
anchors.fill: parent
sourceComponent: {
if(model){
return control.delegate
}
return undefined
}
}
}
onMovementEnded:{
currentIndex = list_view.contentX/list_view.width
if(currentIndex === 0){
currentIndex = list_view.count-2
}else if(currentIndex === list_view.count-1){
currentIndex = 1
}
d.flagXChanged = false
timer_run.restart()
}
onMovementStarted: {
d.flagXChanged = true
timer_run.stop()
}
onContentXChanged: {
if(d.flagXChanged){
var maxX = Math.min(list_view.width*(currentIndex+1),list_view.count*list_view.width)
var minY = Math.max(0,(list_view.width*(currentIndex-1)))
if(contentX>=maxX){
contentX = maxX
}
if(contentX<=minY){
contentX = minY
}
}
}
}
Component{
id:com_indicator
Rectangle{
width: 8
height: 8
radius: 4
FluShadow{
radius: 4
}
scale: checked ? 1.2 : 1
color: checked ? FluTheme.primaryColor : Qt.rgba(1,1,1,0.7)
border.width: mouse_item.containsMouse ? 1 : 0
border.color: FluTheme.primaryColor
MouseArea{
id:mouse_item
hoverEnabled: true
anchors.fill: parent
onClicked: {
changedIndex(realIndex)
}
}
}
}
Row{
id:layout_indicator
spacing: control.indicatorSpacing
anchors{
horizontalCenter:(indicatorGravity & Qt.AlignHCenter) ? parent.horizontalCenter : undefined
verticalCenter: (indicatorGravity & Qt.AlignVCenter) ? parent.verticalCenter : undefined
bottom: (indicatorGravity & Qt.AlignBottom) ? parent.bottom : undefined
top: (indicatorGravity & Qt.AlignTop) ? parent.top : undefined
left: (indicatorGravity & Qt.AlignLeft) ? parent.left : undefined
right: (indicatorGravity & Qt.AlignRight) ? parent.right : undefined
bottomMargin: control.indicatorMarginBottom
leftMargin: control.indicatorMarginBottom
rightMargin: control.indicatorMarginBottom
topMargin: control.indicatorMarginBottom
}
visible: showIndicator
Repeater{
id:repeater_indicator
model: list_view.count
FluLoader{
property int displayIndex: {
if(index === 0)
return list_view.count-3
if(index === list_view.count-1)
return 0
return index-1
}
property int realIndex: index
property bool checked: list_view.currentIndex === index
sourceComponent: {
if(index===0 || index===list_view.count-1)
return undefined
return control.indicatorDelegate
}
}
}
}
Timer{
id:timer_anim
interval: 250
onTriggered: {
list_view.highlightMoveDuration = 0
if(list_view.currentIndex === list_view.count-1){
list_view.currentIndex = 1
}
}
}
Timer{
id:timer_run
interval: control.loopTime
repeat: d.isAnimEnable
onTriggered: {
list_view.highlightMoveDuration = 250
list_view.currentIndex = list_view.currentIndex+1
timer_anim.start()
}
}
function changedIndex(index){
d.flagXChanged = true
timer_run.stop()
list_view.currentIndex = index
d.flagXChanged = false
if(d.isAnimEnable){
timer_run.restart()
}
}
}

117
src/FluentUI/Controls/FluChart.qml Normal file
View File

@ -0,0 +1,117 @@
import QtQuick
import "./../JS/Chart.js" as Chart
Canvas {
id: control
property string chartType
property var chartData
property var chartOptions
property double chartAnimationProgress: 0.1
property int animationEasingType: Easing.InOutExpo
property double animationDuration: 300
property alias animationRunning: chartAnimator.running
signal animationFinished()
function animateToNewData()
{
chartAnimationProgress = 0.1;
d.jsChart.update();
chartAnimator.restart();
}
QtObject{
id:d
property var jsChart: undefined
property var memorizedContext
property var memorizedData
property var memorizedOptions
}
MouseArea {
id: event
anchors.fill: control
hoverEnabled: true
enabled: true
property var handler: undefined
property QtObject mouseEvent: QtObject {
property int left: 0
property int top: 0
property int x: 0
property int y: 0
property int clientX: 0
property int clientY: 0
property string type: ""
property var target
}
function submitEvent(mouse, type) {
mouseEvent.type = type
mouseEvent.clientX = mouse ? mouse.x : 0;
mouseEvent.clientY = mouse ? mouse.y : 0;
mouseEvent.x = mouse ? mouse.x : 0;
mouseEvent.y = mouse ? mouse.y : 0;
mouseEvent.left = 0;
mouseEvent.top = 0;
mouseEvent.target = control;
if(handler) {
handler(mouseEvent);
}
control.requestPaint();
}
onClicked:
(mouse)=> {
submitEvent(mouse, "click");
}
onPositionChanged:
(mouse)=> {
submitEvent(mouse, "mousemove");
}
onExited: {
submitEvent(undefined, "mouseout");
}
onEntered: {
submitEvent(undefined, "mouseenter");
}
onPressed:
(mouse)=> {
submitEvent(mouse, "mousedown");
}
onReleased:
(mouse)=> {
submitEvent(mouse, "mouseup");
}
}
PropertyAnimation {
id: chartAnimator
target: control
property: "chartAnimationProgress"
alwaysRunToEnd: true
to: 1
duration: control.animationDuration
easing.type: control.animationEasingType
onFinished: {
control.animationFinished();
}
}
onChartAnimationProgressChanged: {
control.requestPaint();
}
onPaint: {
if(control.getContext('2d') !== null && d.memorizedContext !== control.getContext('2d') || d.memorizedData !== control.chartData || d.memorizedOptions !== control.chartOptions) {
var ctx = control.getContext('2d');
d.jsChart = Chart.build(ctx, {type: control.chartType,data: control.chartData,options: control.chartOptions});
d.memorizedData = control.chartData ;
d.memorizedContext = control.getContext('2d');
d.memorizedOptions = control.chartOptions;
d.jsChart.bindEvents(function(newHandler) {event.handler = newHandler;});
chartAnimator.start();
}
d.jsChart.draw(chartAnimationProgress);
}
onWidthChanged: {
if(d.jsChart) {
d.jsChart.resize();
}
}
onHeightChanged: {
if(d.jsChart) {
d.jsChart.resize();
}
}
}

138
src/FluentUI/Controls/FluCheckBox.qml Normal file
View File

@ -0,0 +1,138 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
Button {
property bool disabled: false
property string contentDescription: ""
property color borderNormalColor: FluTheme.dark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
property color bordercheckedColor: FluTheme.primaryColor
property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color borderPressedColor: FluTheme.dark ? Qt.rgba(90/255,90/255,90/255,1) : Qt.rgba(191/255,191/255,191/255,1)
property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
property color checkedColor: FluTheme.primaryColor
property color hoverColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(236/255,236/255,236/255,1)
property color checkedHoverColor: FluTheme.dark ? Qt.darker(checkedColor,1.15) : Qt.lighter(checkedColor,1.15)
property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3)
property color checkedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
property real size: 18
property alias textColor: btn_text.textColor
property bool textRight: true
property real textSpacing: 6
property bool enableAnimation: FluTheme.enableAnimation
property var clickListener : function(){
checked = !checked
}
property bool indeterminate : false
id:control
enabled: !disabled
onClicked: clickListener()
onCheckableChanged: {
if(checkable){
checkable = false
}
}
background: Item{
FluFocusRectangle{
radius: 4
visible: control.activeFocus
}
}
horizontalPadding:0
verticalPadding: 0
padding: 0
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
focusPolicy:Qt.TabFocus
contentItem: RowLayout{
spacing: control.textSpacing
layoutDirection:control.textRight ? Qt.LeftToRight : Qt.RightToLeft
Rectangle{
width: control.size
height: control.size
radius: 4
border.color: {
if(!enabled){
return borderDisableColor
}
if(checked){
return bordercheckedColor
}
if(pressed){
return borderPressedColor
}
if(hovered){
return borderHoverColor
}
return borderNormalColor
}
border.width: 1
color: {
if(checked){
if(!enabled){
return checkedDisableColor
}
if(pressed){
return checkedPreesedColor
}
if(hovered){
return checkedHoverColor
}
return checkedColor
}
if(!enabled){
return disableColor
}
if(hovered){
return hoverColor
}
return normalColor
}
Behavior on color {
enabled: control.enableAnimation
ColorAnimation{
duration: 83
}
}
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.CheckboxIndeterminate
iconSize: 14
visible: indeterminate
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {
enabled: control.enableAnimation
NumberAnimation{
duration: 83
}
}
}
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium
iconSize: 14
visible: checked && !indeterminate
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {
enabled: control.enableAnimation
NumberAnimation{
duration: 83
}
}
}
}
FluText{
id:btn_text
text: control.text
Layout.alignment: Qt.AlignVCenter
visible: text !== ""
}
}
}

20
src/FluentUI/Controls/FluClip.qml Normal file
View File

@ -0,0 +1,20 @@
import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
import FluentUI
FluRectangle {
id:control
color: "#00000000"
layer.enabled: !FluTools.isSoftware()
layer.textureSize: Qt.size(control.width*2*Math.ceil(Screen.devicePixelRatio),control.height*2*Math.ceil(Screen.devicePixelRatio))
layer.effect: OpacityMask{
maskSource: ShaderEffectSource{
sourceItem: FluRectangle{
radius: control.radius
width: control.width
height: control.height
}
}
}
}

589
src/FluentUI/Controls/FluColorPicker.qml Normal file
View File

@ -0,0 +1,589 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
Button{
id:control
width: 36
height: 36
implicitWidth: width
implicitHeight: height
property color current : Qt.rgba(1,1,1,1)
signal accepted()
property int colorHandleRadius: 8
property string cancelText: "取消"
property string okText: "确定"
property string titleText: "颜色选择器"
property string editText: "编辑颜色"
property string redText: "红色"
property string greenText: "绿色"
property string blueText: "蓝色"
property string opacityText: "透明度"
background:
Rectangle{
id:layout_color
radius: 5
color:"#00000000"
border.color: {
if(hovered)
return FluTheme.primaryColor
return FluTheme.dark ? Qt.rgba(100/255,100/255,100/255,1) : Qt.rgba(200/255,200/255,200/255,1)
}
border.width: 1
Rectangle{
anchors.fill: parent
anchors.margins: 4
radius: 5
color: control.current
}
}
contentItem: Item{}
onClicked: {
color_dialog.open()
}
FluPopup{
id:color_dialog
implicitWidth: 326
implicitHeight: 560
closePolicy: Popup.CloseOnEscape
Rectangle{
id:layout_actions
width: parent.width
height: 60
radius: 5
z:999
anchors.bottom: parent.bottom
color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
RowLayout{
anchors
{
centerIn: parent
margins: spacing
fill: parent
}
spacing: 10
Item{
Layout.fillWidth: true
Layout.fillHeight: true
FluButton{
text: control.cancelText
width: parent.width
anchors.centerIn: parent
onClicked: {
color_dialog.close()
}
}
}
Item{
Layout.fillWidth: true
Layout.fillHeight: true
FluFilledButton{
text: control.okText
width: parent.width
anchors.centerIn: parent
onClicked: {
current = layout_color_hue.colorValue
control.accepted()
color_dialog.close()
}
}
}
}
}
contentItem: Flickable{
implicitWidth: parent.width
implicitHeight: Math.min(layout_content.height,560,color_dialog.height)
boundsBehavior:Flickable.StopAtBounds
contentHeight: layout_content.height + 70
contentWidth: width
clip: true
ScrollBar.vertical: FluScrollBar {}
Item{
id: layout_content
width: parent.width
height: childrenRect.height
FluText{
id: text_titile
font: FluTextStyle.Subtitle
text: control.titleText
anchors{
left: parent.left
top: parent.top
leftMargin: 20
topMargin: 20
}
}
Item{
id: layout_sb
width: 200
height: 200
anchors{
left: parent.left
top: text_titile.bottom
leftMargin: 12
}
FluClip{
id: layout_color_hue
property color colorValue
property real xPercent: pickerCursor.x/width
property real yPercent: pickerCursor.y/height
property real blackPercent: blackCursor.x/(layout_black.width-12)
property real opacityPercent: opacityCursor.x/(layout_opacity.width-12)
property color opacityColor:{
var c = blackColor
c = Qt.rgba(c.r,c.g,c.b,opacityPercent)
return c
}
onOpacityColorChanged: {
layout_color_hue.colorValue = opacityColor
updateColorText(opacityColor)
}
function updateColorText(color){
text_box_r.text = String(Math.floor(color.r*255))
text_box_g.text = String(Math.floor(color.g*255))
text_box_b.text = String(Math.floor(color.b*255))
text_box_a.text = String(Math.floor(color.a*100))
var colorString = color.toString().slice(1)
if(color.a===1){
colorString = "FF"+colorString
}
text_box_color.text = colorString.toUpperCase()
}
property color blackColor: {
var c = whiteColor
c = Qt.rgba(c.r*blackPercent,c.g*blackPercent,c.b*blackPercent,1)
return c
}
property color hueColor: {
var v = 1.0-xPercent
var c
if(0.0 <= v && v < 0.16) {
c = Qt.rgba(1.0, 0.0, v/0.16, 1.0)
} else if(0.16 <= v && v < 0.33) {
c = Qt.rgba(1.0 - (v-0.16)/0.17, 0.0, 1.0, 1.0)
} else if(0.33 <= v && v < 0.5) {
c = Qt.rgba(0.0, ((v-0.33)/0.17), 1.0, 1.0)
} else if(0.5 <= v && v < 0.76) {
c = Qt.rgba(0.0, 1.0, 1.0 - (v-0.5)/0.26, 1.0)
} else if(0.76 <= v && v < 0.85) {
c = Qt.rgba((v-0.76)/0.09, 1.0, 0.0, 1.0)
} else if(0.85 <= v && v <= 1.0) {
c = Qt.rgba(1.0, 1.0 - (v-0.85)/0.15, 0.0, 1.0)
} else {
c = Qt.rgba(1.0,0.0,0.0,1.0)
}
return c
}
property color whiteColor: {
var c = hueColor
c = Qt.rgba((1-c.r)*yPercent+c.r,(1-c.g)*yPercent+c.g,(1-c.b)*yPercent+c.b,1.0)
return c
}
function updateColor(){
var r = Number(text_box_r.text)/255
var g = Number(text_box_g.text)/255
var b = Number(text_box_b.text)/255
var opacityPercent = Number(text_box_a.text)/100
var blackPercent = Math.max(r,g,b)
r = r/blackPercent
g = g/blackPercent
b = b/blackPercent
var yPercent = Math.min(r,g,b)
if(r === g && r === b){
r = 1
b = 1
g = 1
}else{
r = (yPercent-r)/(yPercent-1)
g = (yPercent-g)/(yPercent-1)
b = (yPercent-b)/(yPercent-1)
}
var xPercent
if (r === 1.0 && g === 0.0 && b <= 1.0) {
if(b===0.0){
xPercent = 0
}else{
xPercent = 1.0 - b * 0.16
}
} else if (r <= 1.0 && g === 0.0 && b === 1.0) {
xPercent = 1.0 - (1.0 - r) * 0.17 - 0.16
} else if (r === 0.0 && g <= 1.0 && b === 1.0) {
xPercent = 1.0 - (g * 0.17 + 0.33)
} else if (r === 0.0 && g === 1.0 && b <= 1.0) {
xPercent = 1.0 - (1.0 - b) * 0.26 - 0.5
} else if (r <= 1.0 && g === 1.0 && b === 0.0) {
xPercent = 1.0 - (r * 0.09 + 0.76)
} else if (r === 1.0 && g <= 1.0 && b === 0.0) {
xPercent = 1.0 - (1.0 - g) * 0.15 - 0.85
} else {
xPercent = 0
}
pickerCursor.x = xPercent * width
pickerCursor.y = yPercent * height
blackCursor.x = blackPercent * (layout_black.width-12)
opacityCursor.x = opacityPercent * (layout_opacity.width-12)
}
radius: [4,4,4,4]
x: colorHandleRadius
y: colorHandleRadius
width: parent.width - 2 * colorHandleRadius
height: parent.height - 2 * colorHandleRadius
Rectangle {
anchors.fill: parent
gradient: Gradient {
orientation: Gradient.Horizontal
GradientStop { position: 0.0; color: "#FF0000" }
GradientStop { position: 0.16; color: "#FFFF00" }
GradientStop { position: 0.33; color: "#00FF00" }
GradientStop { position: 0.5; color: "#00FFFF" }
GradientStop { position: 0.76; color: "#0000FF" }
GradientStop { position: 0.85; color: "#FF00FF" }
GradientStop { position: 1.0; color: "#FF0000" }
}
}
Rectangle {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 1.0; color: "#FFFFFFFF" }
GradientStop { position: 0.0; color: "#00000000" }
}
}
Rectangle{
radius: 4
anchors.fill: parent
border.width: 1
border.color: FluTheme.dividerColor
color:"#00000000"
}
}
Item {
id: pickerCursor
Rectangle {
width: colorHandleRadius*2; height: colorHandleRadius*2
radius: colorHandleRadius
border.color: "black"; border.width: 2
color: "transparent"
Rectangle {
anchors.fill: parent; anchors.margins: 2;
border.color: "white"; border.width: 2
radius: width/2
color: "transparent"
}
}
}
MouseArea {
anchors.fill: parent
x: colorHandleRadius
y: colorHandleRadius
preventStealing: true
function handleMouse(mouse) {
if (mouse.buttons & Qt.LeftButton) {
pickerCursor.x = Math.max(0,Math.min(mouse.x - colorHandleRadius,width-2*colorHandleRadius));
pickerCursor.y = Math.max(0,Math.min(mouse.y - colorHandleRadius,height-2*colorHandleRadius));
}
}
onPositionChanged:(mouse)=> handleMouse(mouse)
onPressed:(mouse)=> handleMouse(mouse)
}
}
FluClip{
width: 40
height: 200
anchors{
top: layout_sb.top
bottom: layout_sb.bottom
left: layout_sb.right
topMargin: colorHandleRadius
bottomMargin: colorHandleRadius
leftMargin: 4
}
radius: [4,4,4,4]
Grid {
padding: 0
id:target_grid_color
anchors.fill: parent
rows: height/5+1
columns: width/5+1
Repeater {
model: (target_grid_color.columns-1)*(target_grid_color.rows-1)
Rectangle {
width: 6
height: 6
color: (model.index%2 == 0) ? "gray" : "white"
}
}
}
Rectangle{
anchors.fill: parent
color:layout_color_hue.colorValue
radius: 4
border.width: 1
border.color: FluTheme.dividerColor
}
}
Column{
id:layout_slider_bar
spacing: 8
anchors{
left: parent.left
leftMargin: 18
right: parent.right
rightMargin: 18
top: layout_sb.bottom
topMargin: 10
}
Rectangle{
id:layout_black
radius: 6
height: 12
width:parent.width
gradient: Gradient {
orientation:Gradient.Horizontal
GradientStop { position: 0.0; color: "#FF000000" }
GradientStop { position: 1.0; color: layout_color_hue.hueColor }
}
Item {
id:blackCursor
x:layout_black.width-12
Rectangle {
width: 12
height: 12
radius: 6
border.color: "black"
border.width: 2
color: "transparent"
Rectangle {
anchors.fill: parent
anchors.margins: 2
border.color: "white"
border.width: 2
radius: width/2
color: "transparent"
}
}
}
MouseArea {
anchors.fill: parent
preventStealing: true
function handleMouse(mouse) {
if (mouse.buttons & Qt.LeftButton) {
blackCursor.x = Math.max(0,Math.min(mouse.x - 6,width-2*6));
blackCursor.y = 0
}
}
onPositionChanged:(mouse)=> handleMouse(mouse)
onPressed:(mouse)=> handleMouse(mouse)
}
}
FluClip{
id:layout_opacity
height: 12
width:parent.width
radius: [6,6,6,6]
Grid {
id:grid_opacity
anchors.fill: parent
rows: height/4
columns: width/4+1
clip: true
Repeater {
model: grid_opacity.columns*grid_opacity.rows
Rectangle {
width: 4
height: 4
color: (model.index%2 == 0) ? "gray" : "white"
}
}
}
MouseArea{
anchors.fill: parent
onClicked: {
console.debug(grid_opacity.columns,grid_opacity.rows)
}
}
Rectangle{
anchors.fill: parent
gradient: Gradient {
orientation:Gradient.Horizontal
GradientStop { position: 0.0; color: "#00000000" }
GradientStop { position: 1.0; color: layout_color_hue.blackColor }
}
}
Item {
id:opacityCursor
x:layout_opacity.width-12
Rectangle {
width: 12
height: 12
radius: 6
border.color: "black"
border.width: 2
color: "transparent"
Rectangle {
anchors.fill: parent
anchors.margins: 2
border.color: "white"
border.width: 2
radius: width/2
color: "transparent"
}
}
}
MouseArea {
id:mouse_opacity
anchors.fill: parent
preventStealing: true
function handleMouse(mouse) {
if (mouse.buttons & Qt.LeftButton) {
opacityCursor.x = Math.max(0,Math.min(mouse.x - 6,width-2*6));
opacityCursor.y = 0
}
}
onPositionChanged:(mouse)=> handleMouse(mouse)
onPressed:(mouse)=> handleMouse(mouse)
}
}
}
Column{
anchors{
left: parent.left
leftMargin: 20
top: layout_slider_bar.bottom
topMargin: 10
right: parent.right
rightMargin: 20
}
spacing: 5
Item{
width: parent.width
height: text_box_color.height
FluText{
text: control.editText
anchors{
verticalCenter: parent.verticalCenter
left:parent.left
}
}
FluTextBox{
id:text_box_color
width: 136
validator: RegularExpressionValidator {
regularExpression: /^[0-9A-F]{8}$/
}
anchors{
right: parent.right
}
leftPadding: 20
FluText{
text:"#"
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 5
}
}
onTextEdited: {
if(text!==""){
var colorString = text_box_color.text.padStart(8,"0")
var c = Qt.rgba(
parseInt(colorString.substring(2, 4), 16) / 255,
parseInt(colorString.substring(4, 6), 16) / 255,
parseInt(colorString.substring(6, 8), 16) / 255,
parseInt(colorString.substring(0, 2), 16) / 255)
layout_color_hue.colorValue = c
}
}
}
}
Row{
spacing: 10
FluTextBox{
id:text_box_r
width: 120
validator: RegularExpressionValidator {
regularExpression: /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/
}
onTextEdited: {
if(text!==""){
layout_color_hue.updateColor()
}
}
}
FluText{
text: control.redText
anchors.verticalCenter: parent.verticalCenter
}
}
Row{
spacing: 10
FluTextBox{
id:text_box_g
width: 120
validator: RegularExpressionValidator {
regularExpression: /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/
}
onTextEdited: {
if(text!==""){
layout_color_hue.updateColor()
}
}
}
FluText{
text: control.greenText
anchors.verticalCenter: parent.verticalCenter
}
}
Row{
spacing: 10
FluTextBox{
id:text_box_b
width: 120
validator: RegularExpressionValidator {
regularExpression: /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/
}
onTextEdited: {
if(text!==""){
layout_color_hue.updateColor()
}
}
}
FluText{
text: control.blueText
anchors.verticalCenter: parent.verticalCenter
}
}
Row{
spacing: 10
FluTextBox{
id:text_box_a
width: 120
validator: RegularExpressionValidator {
regularExpression: /^(100|[1-9]?\d)$/
}
FluText{
id:text_opacity
text:"%"
anchors.verticalCenter: parent.verticalCenter
x:Math.min(text_box_a.implicitWidth,text_box_a.width)-38
}
onTextEdited: {
if(text!==""){
opacityCursor.x = Number(text)/100 * (layout_opacity.width-12)
}
}
}
FluText{
text: control.opacityText
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
}
}
}

146
src/FluentUI/Controls/FluComboBox.qml Normal file
View File

@ -0,0 +1,146 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import FluentUI
import QtQuick.Templates as T
T.ComboBox {
id: control
signal commit(string text)
property bool disabled: false
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
font: FluTextStyle.Body
leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
enabled: !disabled
delegate: FluItemDelegate {
width: ListView.view.width
text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
palette.text: control.palette.text
font: control.font
palette.highlightedText: control.palette.highlightedText
highlighted: control.highlightedIndex === index
hoverEnabled: control.hoverEnabled
}
focusPolicy:Qt.TabFocus
indicator: FluIcon {
x: control.mirrored ? control.padding : control.width - width - control.padding
y: control.topPadding + (control.availableHeight - height) / 2
width: 28
iconSource:FluentIcons.ChevronDown
iconSize: 15
opacity: enabled ? 1 : 0.3
}
contentItem: T.TextField {
property bool disabled: !control.editable
leftPadding: !control.mirrored ? 10 : control.editable && activeFocus ? 3 : 1
rightPadding: control.mirrored ? 10 : control.editable && activeFocus ? 3 : 1
topPadding: 6 - control.padding
bottomPadding: 6 - control.padding
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectedTextColor: color
text: control.editable ? control.editText : control.displayText
enabled: control.editable
autoScroll: control.editable
font:control.font
readOnly: control.down
color: {
if(control.disabled) {
return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
}
return FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
}
inputMethodHints: control.inputMethodHints
validator: control.validator
selectByMouse: true
verticalAlignment: Text.AlignVCenter
leftInset:1
topInset:1
bottomInset:1
rightInset:1
background: FluTextBoxBackground{
borderWidth: 0
inputItem: contentItem
}
Component.onCompleted: {
forceActiveFocus()
}
Keys.onEnterPressed: (event)=> handleCommit(event)
Keys.onReturnPressed:(event)=> handleCommit(event)
function handleCommit(event){
control.commit(control.editText)
accepted()
}
}
background: Rectangle {
implicitWidth: 140
implicitHeight: 32
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: 1
visible: !control.flat || control.down
radius: 4
FluFocusRectangle{
visible: control.visualFocus
radius:4
anchors.margins: -2
}
color:{
if(disabled){
return disableColor
}
return hovered ? hoverColor :normalColor
}
}
popup: T.Popup {
y: control.height
width: control.width
height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
topMargin: 6
bottomMargin: 6
modal: true
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.delegateModel
currentIndex: control.highlightedIndex
highlightMoveDuration: 0
boundsMovement: Flickable.StopAtBounds
T.ScrollIndicator.vertical: ScrollIndicator { }
}
enter: Transition {
NumberAnimation {
property: "opacity"
from:0
to:1
duration: FluTheme.enableAnimation ? 83 : 0
}
}
exit:Transition {
NumberAnimation {
property: "opacity"
from:1
to:0
duration: FluTheme.enableAnimation ? 83 : 0
}
}
background:Rectangle{
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1)
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.width: 1
radius: 5
FluShadow{
radius: 5
}
}
}
}

163
src/FluentUI/Controls/FluContentDialog.qml Normal file
View File

@ -0,0 +1,163 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Window
import FluentUI
FluPopup {
id: control
property string title: ""
property string message: ""
property string neutralText: qsTr("Close")
property string negativeText: qsTr("Cancel")
property string positiveText: qsTr("OK")
property int messageTextFormart: Text.AutoText
property int delayTime: 100
property int buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
property var contentDelegate: Component{
Item{
}
}
property var onNeutralClickListener
property var onNegativeClickListener
property var onPositiveClickListener
signal neutralClicked
signal negativeClicked
signal positiveClicked
implicitWidth: 400
implicitHeight: layout_content.height
focus: true
Component{
id:com_message
Flickable{
id:sroll_message
contentHeight: text_message.height
contentWidth: width
clip: true
boundsBehavior:Flickable.StopAtBounds
width: parent.width
height: message === "" ? 0 : Math.min(text_message.height,300)
ScrollBar.vertical: FluScrollBar {}
FluText{
id:text_message
font: FluTextStyle.Body
wrapMode: Text.WrapAnywhere
text:message
width: parent.width
topPadding: 4
leftPadding: 20
rightPadding: 20
bottomPadding: 4
}
}
}
Rectangle {
id:layout_content
width: parent.width
height: layout_column.childrenRect.height
color: 'transparent'
radius:5
ColumnLayout{
id:layout_column
width: parent.width
FluText{
id:text_title
font: FluTextStyle.Title
text:title
topPadding: 20
leftPadding: 20
rightPadding: 20
wrapMode: Text.WrapAnywhere
}
FluLoader{
sourceComponent: com_message
Layout.fillWidth: true
Layout.preferredHeight: status===Loader.Ready ? item.height : 0
}
FluLoader{
sourceComponent:control.visible ? control.contentDelegate : undefined
Layout.fillWidth: true
onStatusChanged: {
if(status===Loader.Ready){
Layout.preferredHeight = item.implicitHeight
}else{
Layout.preferredHeight = 0
}
}
}
Rectangle{
id:layout_actions
Layout.fillWidth: true
Layout.preferredHeight: 60
radius: 5
color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
RowLayout{
anchors
{
centerIn: parent
margins: spacing
fill: parent
}
spacing: 10
Item{
Layout.fillWidth: true
Layout.fillHeight: true
FluButton{
id:neutral_btn
visible: control.buttonFlags&FluContentDialogType.NeutralButton
text: neutralText
width: parent.width
anchors.centerIn: parent
onClicked: {
if(control.onNeutralClickListener){
control.onNeutralClickListener()
}else{
neutralClicked()
control.close()
}
}
}
}
Item{
Layout.fillWidth: true
Layout.fillHeight: true
FluButton{
id:negative_btn
visible: control.buttonFlags&FluContentDialogType.NegativeButton
width: parent.width
anchors.centerIn: parent
text: negativeText
onClicked: {
if(control.onNegativeClickListener){
control.onNegativeClickListener()
}else{
negativeClicked()
control.close()
}
}
}
}
Item{
Layout.fillWidth: true
Layout.fillHeight: true
FluFilledButton{
id:positive_btn
visible: control.buttonFlags&FluContentDialogType.PositiveButton
text: positiveText
width: parent.width
anchors.centerIn: parent
onClicked: {
if(control.onPositiveClickListener){
control.onPositiveClickListener()
}else{
positiveClicked()
control.close()
}
}
}
}
}
}
}
}
}

60
src/FluentUI/Controls/FluContentPage.qml Normal file
View File

@ -0,0 +1,60 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
FluPage {
property alias title: text_title.text
default property alias content: container.data
property int leftPadding: 10
property int topPadding: 0
property int rightPadding: 10
property int bottomPadding: 10
property alias color: status_view.color
property alias statusMode: status_view.statusMode
property alias loadingText: status_view.loadingText
property alias emptyText:status_view.emptyText
property alias errorText:status_view.errorText
property alias errorButtonText:status_view.errorButtonText
property alias loadingItem :status_view.loadingItem
property alias emptyItem : status_view.emptyItem
property alias errorItem :status_view.errorItem
signal errorClicked
id:control
FluText{
id:text_title
visible: text !== ""
height: visible ? contentHeight : 0
font: FluTextStyle.Title
anchors{
top: parent.top
topMargin: control.topPadding
left: parent.left
right: parent.right
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
}
FluStatusLayout{
id:status_view
color: "#00000000"
statusMode: FluStatusLayoutType.Success
onErrorClicked: control.errorClicked()
anchors{
left: parent.left
right: parent.right
top: text_title.bottom
bottom: parent.bottom
leftMargin: control.leftPadding
rightMargin: control.rightPadding
bottomMargin: control.bottomPadding
}
Item{
clip: true
id:container
anchors.fill: parent
}
}
}

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