Compare commits

...

72 Commits

Author SHA1 Message Date
0610f63f26 update 2023-06-26 19:59:28 +08:00
d741b3eb4f update 2023-06-26 18:20:01 +08:00
cb7d2097f2 update 2023-06-26 18:12:58 +08:00
dff77d3d4f update 2023-06-26 11:43:49 +08:00
6d0834c653 update 2023-06-25 23:39:23 +08:00
059a1b17cc update 2023-06-25 23:17:44 +08:00
e1096b8e22 update 2023-06-25 19:01:22 +08:00
cd577c5599 update 2023-06-25 11:44:13 +08:00
d43532986a update 2023-06-25 11:30:25 +08:00
4c9e576072 update 2023-06-25 10:13:50 +08:00
b254064e26 Merge pull request #168 from mentalfl0w/dev
Fix qt_standard_project_setup for Qt 6.2 and below.
2023-06-25 09:03:12 +08:00
ffd8072826 Fix qt_standard_project_setup for Qt 6.2 and below. 2023-06-24 21:57:00 +08:00
9a1db0b230 update 2023-06-24 11:56:32 +08:00
9786e69fc2 update 2023-06-24 10:27:28 +08:00
82be3b12e3 update 2023-06-21 17:17:25 +08:00
1c0f5acaf8 update 2023-06-21 16:12:07 +08:00
243f8aa248 update 2023-06-21 11:47:05 +08:00
cbb8c3122b update 2023-06-21 00:43:05 +08:00
9f2c58306c update 2023-06-20 19:18:18 +08:00
adc3558e02 update .gitignore 2023-06-20 19:02:18 +08:00
98d73eb6cb update 2023-06-20 18:32:10 +08:00
b442696f92 update 2023-06-20 18:02:15 +08:00
82f606dd65 update 2023-06-20 12:53:32 +08:00
4efb91084a update 2023-06-19 18:08:49 +08:00
103dbe9d56 update 2023-06-19 17:50:54 +08:00
b829fa572f update 2023-06-19 09:52:19 +08:00
d2c5cc779b update 2023-06-19 09:50:11 +08:00
5acf664492 Merge branch 'main' of https://github.com/zhuzichu520/FluentUI 2023-06-19 09:12:59 +08:00
75d226947f update 2023-06-18 23:54:39 +08:00
752ff3c4f2 update 2023-06-18 13:56:30 +08:00
e591c483d5 Merge branch 'main' of https://github.com/zhuzichu520/FluentUI 2023-06-16 17:17:25 +08:00
fdff068752 update 2023-06-16 17:17:21 +08:00
24f28d8945 update 2023-06-16 12:45:57 +08:00
ed51143e9b update 2023-06-16 12:25:50 +08:00
9d94bc65d5 Merge branch 'main' of https://github.com/zhuzichu520/FluentUI 2023-06-16 09:30:33 +08:00
7bfa9f0191 update 2023-06-16 09:30:21 +08:00
6db144c751 Update README.md 2023-06-15 15:58:56 +08:00
a574cd9230 update 2023-06-15 15:01:33 +08:00
8c45c125e6 update 2023-06-15 14:46:32 +08:00
aab4802d7e update 2023-06-15 07:39:45 +08:00
441c1ab03c update 2023-06-15 00:42:07 +08:00
91f4f508cc update 2023-06-15 00:21:54 +08:00
94f8047508 update 2023-06-14 19:29:23 +08:00
d926a84f72 update 2023-06-14 00:04:37 +08:00
c07011408c update 2023-06-13 23:57:52 +08:00
4f9ec6abf2 update 2023-06-13 22:24:22 +08:00
c3b3dc904e update 2023-06-13 22:00:15 +08:00
2a5acb45a1 update 2023-06-13 20:13:49 +08:00
d29580f8f2 update 2023-06-13 18:17:40 +08:00
fd0ddbf5aa update 2023-06-13 11:48:29 +08:00
ac602c5afa update 2023-06-13 10:26:14 +08:00
8dbfcfd994 Merge pull request #157 from mentalfl0w/dev
Fix FluNavigationView push function in Standard mode.
2023-06-13 09:20:58 +08:00
c5ce34cbc3 Fix FluNavigationView push function in Standard mode. 2023-06-12 22:41:58 +08:00
a4d04499bc update 2023-06-12 18:03:25 +08:00
47b0c71f95 update 2023-06-12 17:36:36 +08:00
e651b731cf update 2023-06-12 17:04:35 +08:00
31bdea8d44 update 2023-06-12 16:46:02 +08:00
2fbc5696f7 update 2023-06-12 10:53:35 +08:00
f2ea9a19a1 update 2023-06-11 21:48:43 +08:00
aee97c2aab update 2023-06-11 21:44:54 +08:00
05b41f3383 update 2023-06-10 22:46:17 +08:00
b3ca045936 update 2023-06-10 11:11:28 +08:00
18205851f6 update 2023-06-10 11:01:36 +08:00
221361369e update 2023-06-09 18:15:09 +08:00
cf730bc769 update 2023-06-09 09:29:28 +08:00
49029164ff update 2023-06-08 23:19:38 +08:00
6da4a2e10e fix bub 2023-06-08 17:44:32 +08:00
021745c366 update version 2023-06-08 17:16:08 +08:00
2cfd5b3ab2 update 2023-06-08 17:05:52 +08:00
2c7d556042 update 2023-06-08 17:00:43 +08:00
609df92f8c update 2023-06-08 14:51:13 +08:00
ca57b16521 update 2023-06-08 14:32:04 +08:00
219 changed files with 2426 additions and 1852 deletions

View File

@ -23,7 +23,7 @@ jobs:
matrix:
os: [windows-2019]
include:
- qt_ver: 6.5.0
- qt_ver: 6.5.0
qt_arch: win64_msvc2019_64
msvc_arch: x64
qt_arch_install: msvc2019_64

View File

@ -1,7 +1,22 @@
cmake_minimum_required(VERSION 3.16)
cmake_minimum_required(VERSION 3.20)
project(FluentUI VERSION 0.1 LANGUAGES CXX)
option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
option(FLUENTUI_BUILD_FRAMELESSHEPLER "Build FramelessHelper." ON)
add_subdirectory(src)
add_subdirectory(example)
add_subdirectory(framelesshelper)
if (FLUENTUI_BUILD_EXAMPLES)
add_subdirectory(example)
endif ()
if (FLUENTUI_BUILD_FRAMELESSHEPLER)
add_definitions(-DFRAMELESSHELPER_CORE_NO_DEBUG_OUTPUT)
add_definitions(-DFRAMELESSHELPER_QUICK_NO_DEBUG_OUTPUT)
add_subdirectory(framelesshelper)
endif ()
message("------------------------ FluentUI ------------------------")
message("Build FluentUI demo applications.: ${FLUENTUI_BUILD_EXAMPLES}")
message("Build FramelessHelper.: ${FLUENTUI_BUILD_FRAMELESSHEPLER}")

View File

@ -115,5 +115,9 @@ View more [`here`](doc/md/all_components.md)!
This FluentUI library currently licensed under [MIT License](./License)
## Star History
[![Star History Chart](https://api.star-history.com/svg?repos=zhuzichu520/FluentUI&type=Date)](https://star-history.com/#zhuzichu520/FluentUI&Date)
## ⚡ Visitor count
![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)

0
doc/preview/demo_content_dialog.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
doc/preview/demo_filledbtn.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

0
doc/preview/demo_icon.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

0
doc/preview/demo_infobar.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

0
doc/preview/demo_large.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 192 KiB

After

Width:  |  Height:  |  Size: 192 KiB

0
doc/preview/demo_multiline_textbox.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

0
doc/preview/demo_progress_bar_ring.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

0
doc/preview/demo_radiobtn.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

0
doc/preview/demo_rectangle.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

0
doc/preview/demo_slider.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 997 B

After

Width:  |  Height:  |  Size: 997 B

0
doc/preview/demo_standardbtn.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

0
doc/preview/demo_textbox.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

0
doc/preview/demo_textbtn.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

0
doc/preview/demo_toggle_switch.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
doc/preview/demo_tooltip.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

0
doc/preview/demo_tree_view.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
doc/preview/qt_creator_project.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 61 KiB

View File

@ -1,9 +1,8 @@
cmake_minimum_required(VERSION 3.16)
cmake_minimum_required(VERSION 3.20)
project(example VERSION 0.1 LANGUAGES CXX)
#配置通用编译
set(CMAKE_AUTOMOC ON)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
if(APPLE)
set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
@ -20,9 +19,17 @@ endif()
file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
#设置版本号
add_definitions(-DVERSION=1,3,2,0)
add_definitions(-DVERSION=1,3,6,2)
find_package(Qt6 REQUIRED COMPONENTS Quick REQUIRED)
find_package(Qt6 REQUIRED COMPONENTS Quick)
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()
#遍历所有Cpp文件
file(GLOB_RECURSE CPP_FILES *.cpp *.h)
@ -101,4 +108,6 @@ target_link_libraries(example PRIVATE
#安装
install(TARGETS example
BUNDLE DESTINATION .
LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR})
LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

View File

@ -5,7 +5,8 @@ import QtQuick.Layouts
import FluentUI
Window {
id:app
id: app
flags: Qt.SplashScreen
Component.onCompleted: {
FluApp.init(app)
FluTheme.darkMode = FluDarkMode.System
@ -13,7 +14,6 @@ Window {
"/":"qrc:/example/qml/window/MainWindow.qml",
"/about":"qrc:/example/qml/window/AboutWindow.qml",
"/login":"qrc:/example/qml/window/LoginWindow.qml",
"/media":"qrc:/example/qml/window/MediaWindow.qml",
"/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
"/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
"/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"

View File

@ -26,11 +26,6 @@ FluExpander{
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.width: 1
Behavior on color{
ColorAnimation {
duration: 300
}
}
}
}
@ -134,7 +129,11 @@ FluExpander{
"FluPasswordBox",
"FluBreadcrumbBar",
"FluCopyableText",
"FluAcrylic"
"FluAcrylic",
"FluRemoteLoader",
"FluMenuBar",
"FluPagination",
"FluRadioButtons"
];
code = code.replace(/\n/g, "<br>");
code = code.replace(/ /g, "&nbsp;");

View File

@ -39,15 +39,15 @@ FluWindow {
id:framless_helper
onReady: {
setTitleBarItem(title_bar)
framless_helper.moveWindowToDesktopCenter()
moveWindowToDesktopCenter()
setHitTestVisible(title_bar.minimizeButton())
setHitTestVisible(title_bar.maximizeButton())
setHitTestVisible(title_bar.closeButton())
framless_helper.setWindowFixedSize(fixSize)
setWindowFixedSize(fixSize)
title_bar.maximizeButton.visible = !fixSize
if (blurBehindWindowEnabled)
window.backgroundVisible = false
window.visible = true
window.show()
}
}
Connections{

View File

@ -8,16 +8,17 @@ FluObject{
property var navigationView
FluPaneItem{
id:item_home
count: 9
title:lang.home
infoBadge:FluBadge{
count: item_home.count
}
icon:FluentIcons.Home
// cusIcon: Image{
// anchors.centerIn: parent
// source: FluTheme.dark ? "qrc:/example/res/svg/home_dark.svg" : "qrc:/example/res/svg/home.svg"
// sourceSize: Qt.size(30,30)
// width: 18
// height: 18
// }
onTap:{
if(navigationView.getCurrentUrl()){
item_home.count = 0
}
navigationView.push("qrc:/example/qml/page/T_Home.qml")
}
}
@ -26,17 +27,30 @@ FluObject{
title:lang.basic_input
icon:FluentIcons.CheckboxComposite
FluPaneItem{
id:item_buttons
count: 99
infoBadge:FluBadge{
count: item_buttons.count
}
title:"Buttons"
image:"qrc:/example/res/image/control/Button.png"
recentlyUpdated:true
desc:"A control that responds to user input and raisesa Click event."
onTap:{
item_buttons.count = 0
navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
}
}
FluPaneItem{
id:item_text
title:"Text"
count: 5
infoBadge:FluBadge{
count: item_text.count
color: Qt.rgba(82/255,196/255,26/255,1)
}
onTap:{
item_text.count = 0
navigationView.push("qrc:/example/qml/page/T_Text.qml")
}
}
@ -58,6 +72,12 @@ FluObject{
navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
}
}
FluPaneItem{
title:"RadioButton"
onTap:{
navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
}
}
FluPaneItem{
title:"ToggleSwitch"
onTap:{
@ -167,8 +187,15 @@ FluObject{
}
}
FluPaneItem{
id:item_combobox
title:"ComboBox"
count: 9
infoBadge:FluBadge{
count: item_combobox.count
color: Qt.rgba(250/255,173/255,20/255,1)
}
onTap:{
item_combobox.count = 0
navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
}
}
@ -231,6 +258,12 @@ FluObject{
navigationView.push("qrc:/example/qml/page/T_TableView.qml")
}
}
FluPaneItem{
title:"Pagination"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
}
}
FluPaneItem{
title:"MultiWindow"
onTap:{
@ -279,16 +312,19 @@ FluObject{
}
FluPaneItemExpander{
title:lang.media
icon:FluentIcons.Media
title:lang.other
icon:FluentIcons.Shop
FluPaneItem{
title:"MediaPlayer"
image:"qrc:/example/res/image/control/MediaPlayerElement.png"
recentlyAdded:true
order:0
desc:"A control to display video and image content."
id:item_other
title:"RemoteLoader"
count: 99
infoBadge:FluBadge{
count: item_other.count
color: Qt.rgba(82/255,196/255,26/255,1)
}
onTap:{
navigationView.push("qrc:/example/qml/page/T_MediaPlayer.qml")
item_other.count = 0
navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
}
}
}

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -58,6 +58,7 @@ FluScrollablePage{
width: 100
height: 100
anchors.centerIn: parent
}
}'
}

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -33,6 +33,8 @@ FluScrollablePage{
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
topRight: true
showZero: true
count:0
}
}
@ -43,6 +45,8 @@ FluScrollablePage{
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
topRight: true
showZero: true
count:5
}
}
@ -52,6 +56,8 @@ FluScrollablePage{
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
topRight: true
showZero: true
count:50
}
}
@ -61,6 +67,8 @@ FluScrollablePage{
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
topRight: true
showZero: true
count:100
}
}
@ -70,6 +78,8 @@ FluScrollablePage{
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
topRight: true
showZero: true
isDot:true
}
}
@ -79,6 +89,8 @@ FluScrollablePage{
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)
}
@ -89,6 +101,8 @@ FluScrollablePage{
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)
}

View File

@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -4,7 +4,7 @@ import QtQuick.Window
import QtQuick.Controls
import QtQuick.Controls.Basic
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -210,20 +210,21 @@ FluScrollablePage{
verticalCenter: parent.verticalCenter
left: parent.left
}
items:[
FluMenuItem{
text:"Menu_1"
},
FluMenuItem{
text:"Menu_2"
},
FluMenuItem{
text:"Menu_3"
},
FluMenuItem{
text:"Menu_4"
FluMenuItem{
text:"Menu_1"
}
FluMenuItem{
text:"Menu_2"
}
FluMenuItem{
text:"Menu_3"
}
FluMenuItem{
text:"Menu_4"
onClicked: {
console.debug(parent.height)
}
]
}
}
FluToggleSwitch{
id:drop_down_button_switch
@ -261,24 +262,23 @@ FluScrollablePage{
height: 100
paddings: 10
Layout.topMargin: 20
ColumnLayout{
FluRadioButtons{
spacing: 8
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
Repeater{
id:repeater
property int selecIndex : 0
model: 3
delegate: FluRadioButton{
checked : repeater.selecIndex===index
disabled:radio_button_switch.checked
text:"Radio Button_"+index
clickListener:function(){
repeater.selecIndex = index
}
}
FluRadioButton{
disabled:radio_button_switch.checked
text:"Radio Button_1"
}
FluRadioButton{
disabled:radio_button_switch.checked
text:"Radio Button_2"
}
FluRadioButton{
disabled:radio_button_switch.checked
text:"Radio Button_3"
}
}
FluToggleSwitch{

View File

@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -22,7 +22,12 @@ FluScrollablePage{
}
FluCheckBox{
disabled: check_box_switch.checked
text:"Text"
text:"Right"
}
FluCheckBox{
disabled: check_box_switch.checked
text:"Left"
textRight: false
}
}
FluToggleSwitch{

View File

@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -28,10 +28,6 @@ FluScrollablePage{
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
onAccepted: {
if (find(editText) === -1)
model_1.append({text: editText})
}
}
}
}

View File

@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -23,6 +23,9 @@ FluScrollablePage{
text:"showYear=true"
}
FluDatePicker{
onCurrentChanged: {
showSuccess(current.toLocaleDateString())
}
}
}
}
@ -50,7 +53,9 @@ FluScrollablePage{
FluDatePicker{
showYear:false
onCurrentChanged: {
showSuccess(current.toLocaleDateString())
}
}
}
}

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -27,7 +27,7 @@ FluScrollablePage{
Layout.topMargin: 20
Item{
anchors.fill: parent
ColumnLayout{
FluRadioButtons{
spacing: 8
anchors{
top: parent.top
@ -35,17 +35,14 @@ FluScrollablePage{
topMargin: 15
leftMargin: 15
}
Repeater{
id:repeater
property int selecIndex : 0
model: 3
delegate: FluRadioButton{
checked : repeater.selecIndex===index
text:"Radio Button_"+index
clickListener:function() {
repeater.selecIndex = index
}
}
FluRadioButton{
text:"Radio Button_1"
}
FluRadioButton{
text:"Radio Button_2"
}
FluRadioButton{
text:"Radio Button_3"
}
}
}

View File

@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -2,11 +2,13 @@ import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import "qrc:///example/qml/global/"
import "qrc:///example/qml/global"
import FluentUI
FluScrollablePage{
pageMode: FluNavigationView.SingleTask
ListModel{
id:model_header
ListElement{
@ -15,7 +17,6 @@ FluScrollablePage{
desc:"The latest FluentUI controls and styles for your applications."
url:"https://github.com/zhuzichu520/FluentUI"
}
}
Item{

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -1,62 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
FluScrollablePage{
title:"MediaPlayer"
onVisibleChanged: {
if(visible){
player.play()
}else{
player.pause()
}
}
FluArea{
Layout.fillWidth: true
height: 320
Layout.topMargin: 20
paddings: 10
ColumnLayout{
anchors{
verticalCenter: parent.verticalCenter
left:parent.left
}
FluMediaPlayer{
id:player
source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluMediaPlayer{
id:player
source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
}
'
}
FluArea{
Layout.fillWidth: true
height: 68
Layout.topMargin: 20
paddings: 10
FluButton{
text:"跳转到视频播放器窗口"
anchors.verticalCenter: parent.verticalCenter
onClicked:{
FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"})
}
}
}
}

View File

@ -3,12 +3,42 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
title:"Menu"
FluMenu {
id:menu
title: qsTr("File")
Action { text: qsTr("New...")}
Action { text: qsTr("Open...") }
Action { text: qsTr("Save") }
FluMenuSeparator { }
Action {
text: qsTr("Quit")
onTriggered: {
showError("Quit")
}
}
Action {
text: qsTr("Disable")
enabled:false
onTriggered: {
showError("Disable")
}
}
FluMenuSeparator { }
Action { text: qsTr("Check");checkable: true;checked: true}
FluMenu{
title: "Save As..."
Action { text: qsTr("Doc") }
Action { text: qsTr("PDF") }
}
}
FluArea{
Layout.fillWidth: true
height: 100
@ -22,28 +52,19 @@ FluScrollablePage{
left:parent.left
}
FluText{
text:"Menu"
}
FluButton{
text:"左击菜单"
text:"Show Menu Popup"
Layout.topMargin: 20
onClicked:{
menu.popup()
}
}
FluButton{
text:"右击菜单"
Layout.topMargin: 20
onClicked: {
showSuccess("请按鼠标右击")
}
MouseArea{
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: {
menu.popup()
}
}
}
}
}
@ -69,20 +90,78 @@ menu.popup()
'
}
FluMenu{
id:menu
FluMenuItem{
text:"删除"
onClicked: {
showError("删除")
FluArea{
Layout.fillWidth: true
height: 100
paddings: 10
Layout.topMargin: 20
Column{
spacing: 15
anchors{
verticalCenter: parent.verticalCenter
left:parent.left
}
}
FluMenuItem{
text:"修改"
onClicked: {
showInfo("修改")
FluText{
text:"MenuBar"
}
FluMenuBar {
id:menu_bar
FluMenu {
title: qsTr("File")
Action { text: qsTr("New...") }
Action { text: qsTr("Open...") }
Action { text: qsTr("Save") }
FluMenuSeparator { }
Action { text: qsTr("Quit") }
Action {
text: qsTr("Disable")
enabled:false
}
FluMenu{
title: "Save As..."
Action { text: qsTr("Doc") }
Action { text: qsTr("PDF") }
}
}
FluMenu {
title: qsTr("Edit")
Action { text: qsTr("Cut") }
Action { text: qsTr("Copy") }
Action { text: qsTr("Paste") }
}
FluMenu {
title: qsTr("Help")
Action { text: qsTr("About") }
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluMenuBar{
id:menu
FluMenu:{
title:"File"
Action { text: qsTr("New...") }
}
FluMenu:{
title:"Edit"
Action { text: qsTr("Cut") }
Action { text: qsTr("Copy") }
Action { text: qsTr("Paste") }
}
}
menu.popup()
'
}
}

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -0,0 +1,49 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import "qrc:///example/qml/component"
import FluentUI
FluScrollablePage{
title:"Pagination"
FluArea{
Layout.fillWidth: true
height: 200
paddings: 10
Layout.topMargin: 20
ColumnLayout{
spacing: 20
anchors.verticalCenter: parent.verticalCenter
FluPagination{
pageCurrent: 1
pageButtonCount: 5
itemCount: 5000
}
FluPagination{
pageCurrent: 2
itemCount: 5000
pageButtonCount: 7
}
FluPagination{
pageCurrent: 3
itemCount: 5000
pageButtonCount: 9
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluPagination{
pageCurrent: 1
itemCount: 1000
pageButtonCount: 9
}'
}
}

View File

@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -33,10 +33,13 @@ FluScrollablePage{
indeterminate: false
}
FluSlider{
value:50
onValueChanged:{
progress_bar.progress = value/100
progress_ring.progress = value/100
var progress = value/100
progress_bar.progress = progress
progress_ring.progress = progress
}
Component.onCompleted: {
value = 50
}
}
}

View File

@ -0,0 +1,101 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "qrc:///example/qml/component"
FluScrollablePage{
title:"RadioButton"
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
Row{
spacing: 30
anchors.verticalCenter: parent.verticalCenter
FluRadioButton{
disabled: radio_button_switch.checked
}
FluRadioButton{
disabled: radio_button_switch.checked
text:"Right"
}
FluRadioButton{
disabled: radio_button_switch.checked
text:"Left"
textRight: false
}
}
FluToggleSwitch{
id:radio_button_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluRadioButton{
text:"Text"
}'
}
FluArea{
Layout.fillWidth: true
height: 100
paddings: 10
Layout.topMargin: 20
FluRadioButtons{
spacing: 8
anchors.verticalCenter: parent.verticalCenter
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluRadioButton{
disabled: radio_button_switch2.checked
text:"Radio Button_1"
}
FluRadioButton{
disabled: radio_button_switch2.checked
text:"Radio Button_2"
}
FluRadioButton{
disabled: radio_button_switch2.checked
text:"Radio Button_3"
}
}
FluToggleSwitch{
id:radio_button_switch2
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluRadioButtons{
spacing: 8
FluRadioButton{
text:"Radio Button_1"
}
FluRadioButton{
text:"Radio Button_2"
}
FluRadioButton{
text:"Radio Button_3"
}
}'
}
}

View File

@ -3,38 +3,33 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
FluScrollablePage {
title:"RatingControl"
title: "RatingControl"
FluArea{
FluArea {
Layout.fillWidth: true
height: 100
paddings: 10
Layout.topMargin: 20
Column{
Column {
spacing: 10
anchors.verticalCenter: parent.verticalCenter
FluRatingControl{
}
FluRatingControl{
number:10
FluRatingControl {}
FluRatingControl {
number: 10
}
}
}
CodeExpander{
CodeExpander {
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluRatingControl{
code: 'FluRatingControl{
}'
}
}

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -0,0 +1,12 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "qrc:///example/qml/component"
FluRemoteLoader{
property int pageMode: FluNavigationView.SingleTop
property string url: ''
source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
}

View File

@ -3,8 +3,8 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "qrc:///example/qml/global/"
import "../component"
import "qrc:///example/qml/global"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -13,11 +13,11 @@ FluScrollablePage{
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 136
height: 128
paddings: 10
ColumnLayout{
spacing: 10
spacing: 5
anchors{
top: parent.top
left: parent.left
@ -43,16 +43,15 @@ FluScrollablePage{
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 168
height: 160
paddings: 10
ColumnLayout{
spacing: 10
spacing: 5
anchors{
top: parent.top
left: parent.left
}
FluText{
text:lang.navigation_view_display_mode
font: FluTextStyle.BodyStrong

View File

@ -2,7 +2,7 @@ import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import "../component"
import "qrc:///example/qml/component"
import FluentUI
FluScrollablePage{
@ -15,7 +15,6 @@ FluScrollablePage{
paddings: 10
Layout.topMargin: 20
FluSlider{
value: 50
anchors.verticalCenter: parent.verticalCenter
}
}
@ -27,17 +26,14 @@ FluScrollablePage{
}'
}
FluArea{
Layout.fillWidth: true
height: 200
paddings: 10
Layout.topMargin: 20
FluSlider{
value: 50
vertical:true
orientation: Qt.Vertical
anchors.left: parent.left
anchors.leftMargin: 20
anchors.verticalCenter: parent.verticalCenter
}
}
@ -45,7 +41,7 @@ FluScrollablePage{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluSlider{
vertical:true
orientation: Qt.Vertical
value:50
}'
}

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -21,36 +21,34 @@ FluScrollablePage{
id:btn_status_mode
Layout.preferredWidth: 140
text:"Loading"
items:[
FluMenuItem{
text:"Loading"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Loading
}
},
FluMenuItem{
text:"Empty"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Empty
}
},
FluMenuItem{
text:"Error"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Error
}
},
FluMenuItem{
text:"Success"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Success
}
FluMenuItem{
text:"Loading"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Loading
}
]
}
FluMenuItem{
text:"Empty"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Empty
}
}
FluMenuItem{
text:"Error"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Error
}
}
FluMenuItem{
text:"Success"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Success
}
}
}
}
}

View File

@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -40,57 +40,53 @@ FluScrollablePage{
id:btn_tab_width_behavior
Layout.preferredWidth: 140
text:"Equal"
items:[
FluMenuItem{
text:"Equal"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.Equal
}
},
FluMenuItem{
text:"SizeToContent"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.SizeToContent
}
},
FluMenuItem{
text:"Compact"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.Compact
}
FluMenuItem{
text:"Equal"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.Equal
}
]
}
FluMenuItem{
text:"SizeToContent"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.SizeToContent
}
}
FluMenuItem{
text:"Compact"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.Compact
}
}
}
FluDropDownButton{
id:btn_close_button_visibility
text:"Always"
Layout.preferredWidth: 120
items:[
FluMenuItem{
text:"Nerver"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.Nerver
}
},
FluMenuItem{
text:"Always"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.Always
}
},
FluMenuItem{
text:"OnHover"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.OnHover
}
FluMenuItem{
text:"Nerver"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.Nerver
}
]
}
FluMenuItem{
text:"Always"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.Always
}
}
FluMenuItem{
text:"OnHover"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.OnHover
}
}
}
}
}

View File

@ -3,143 +3,137 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
FluContentPage{
title:"TableView"
Component.onCompleted: {
const columns = [
{
title: '姓名',
dataIndex: 'name',
width:100
},
{
title: '年龄',
dataIndex: 'age',
width:100
},
{
title: '住址',
dataIndex: 'address',
width:200
},
{
title: '别名',
dataIndex: 'nickname',
width:100
},
{
title: '操作',
dataIndex: 'action',
width:120
},
];
table_view.columns = columns
loadData(1,10)
}
FluTableView{
id:table_view
Layout.fillWidth: true
Layout.topMargin: 20
pageCurrent:1
pageCount:10
itemCount: 1000
onRequestPage:
(page,count)=> {
loadData(page,count)
}
}
Component{
id:com_action
Item{
Row{
anchors.centerIn: parent
spacing: 10
FluFilledButton{
text:"编辑"
horizontalPadding: 6
onClicked:{
showSuccess(JSON.stringify(dataObject))
}
}
FluFilledButton{
text:"删除"
horizontalPadding: 6
onClicked:{
showError(JSON.stringify(dataObject))
}
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: 10
code:'FluTableView{
id:table_view
Layout.fillWidth: true
Layout.topMargin: 20
pageCurrent:1
pageCount:10
itemCount: 1000
onRequestPage:
(page,count)=> {
loadData(page,count)
}
Component.onCompleted: {
const columns = [
{
title: "姓名",
dataIndex: "name",
width:100
},
{
title: "年龄",
dataIndex: "age",
width:100
},
{
title: "住址",
dataIndex: "address",
width:200
},
{
title: "别名",
dataIndex: "nickname",
width:100
}
];
table_view.columns = columns
const dataSource = [
{
name: "孙悟空”,
age: 500,
address:"钟灵毓秀的花果山,如神仙仙境的水帘洞",
nickname:"齐天大圣"
}
];
table_view.dataSource = columns
}
}'
loadData(1,1000)
}
function loadData(page,count){
var numbers = [100, 300, 500, 1000];
function getRandomAge() {
var randomIndex = Math.floor(Math.random() * numbers.length);
return numbers[randomIndex];
}
var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
function getRandomName(){
var randomIndex = Math.floor(Math.random() * names.length);
return names[randomIndex];
}
var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
function getRandomNickname(){
var randomIndex = Math.floor(Math.random() * nicknames.length);
return nicknames[randomIndex];
}
var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
function getRandomAddresses(){
var randomIndex = Math.floor(Math.random() * addresses.length);
return addresses[randomIndex];
}
const dataSource = []
for(var i=0;i<count;i++){
dataSource.push({
name: "孙悟空%1".arg(((page-1)*count+i)),
age: 500,
address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
nickname: "齐天大圣",
action:com_action
name: getRandomName(),
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
height:40,
minimumHeight:40,
maximumHeight:200
})
}
table_view.dataSource = dataSource
}
Component{
id:com_combobox
FluComboBox {
anchors.fill: parent
focus: true
currentIndex: display
editable: true
model: ListModel {
ListElement { text: 100 }
ListElement { text: 300 }
ListElement { text: 500 }
ListElement { text: 1000 }
}
Component.onCompleted: {
currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
selectAll()
}
onCommit: {
display = editText
tableView.closeEditor()
}
}
}
FluTableView{
id:table_view
anchors{
left: parent.left
right: parent.right
top: parent.top
bottom: gagination.top
}
anchors.topMargin: 20
columnSource:[
{
title: '姓名',
dataIndex: 'name',
width:100,
minimumWidth:80,
maximumWidth:200,
readOnly:true
},
{
title: '年龄',
dataIndex: 'age',
editDelegate:com_combobox,
width:100,
minimumWidth:100,
maximumWidth:100
},
{
title: '住址',
dataIndex: 'address',
width:200,
minimumWidth:100,
maximumWidth:250
},
{
title: '别名',
dataIndex: 'nickname',
width:100,
minimumWidth:80,
maximumWidth:200
}
]
}
FluPagination{
id:gagination
anchors{
bottom: parent.bottom
left: parent.left
}
pageCurrent: 1
itemCount: 100000
pageButtonCount: 7
__itemPerPage: 1000
onRequestPage:
(page,count)=> {
table_view.closeEditor()
loadData(page,count)
table_view.resetPosition()
}
}
}

View File

@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -3,12 +3,13 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
title:"TextBox"
pageMode: FluNavigationView.SingleInstance
title:"TextBox"
FluArea{
Layout.fillWidth: true
height: 68

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -27,6 +27,9 @@ FluScrollablePage{
}
FluTimePicker{
onCurrentChanged: {
showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
}
}
}
@ -53,11 +56,14 @@ FluScrollablePage{
}
FluText{
text:"hourFormat=FluTimePicker.H"
text:"hourFormat=FluTimePicker.HH"
}
FluTimePicker{
hourFormat:FluTimePicker.HH
onCurrentChanged: {
showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
}
}
}

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{
@ -22,6 +22,12 @@ FluScrollablePage{
}
FluToggleSwitch{
disabled: toggle_switch.checked
text:"Right"
}
FluToggleSwitch{
disabled: toggle_switch.checked
text:"Left"
textRight: false
}
}
FluToggleSwitch{

View File

@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage{

View File

@ -3,7 +3,7 @@ import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
FluScrollablePage {
@ -60,29 +60,27 @@ FluScrollablePage {
id:btn_selection_model
Layout.preferredWidth: 140
text:"None"
items:[
FluMenuItem{
text:"None"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.Equal
}
},
FluMenuItem{
text:"Single"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.SizeToContent
}
},
FluMenuItem{
text:"Muiltple"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.Compact
}
FluMenuItem{
text:"None"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.Equal
}
]
}
FluMenuItem{
text:"Single"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.SizeToContent
}
}
FluMenuItem{
text:"Muiltple"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.Compact
}
}
}
FluFilledButton{
text:"获取选中的数据"

View File

@ -10,10 +10,6 @@ FluContentPage {
title: "Typography"
rightPadding: 10
Component.onCompleted: {
slider.seek(0)
}
FluArea{
anchors{
top:parent.top
@ -73,7 +69,7 @@ FluContentPage {
FluSlider{
id:slider
vertical:true
orientation: Qt.Vertical
anchors{
right: parent.right
rightMargin: 45

View File

@ -2,7 +2,7 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import "../component"
import "qrc:///example/qml/component"
CustomWindow {

View File

@ -2,7 +2,7 @@ import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI
import "../component"
import "qrc:///example/qml/component"
CustomWindow {

View File

@ -4,8 +4,8 @@ import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.platform
import FluentUI
import "../component"
import "qrc:///example/qml/global/"
import "qrc:///example/qml/component"
import "qrc:///example/qml/global"
CustomWindow {
@ -76,48 +76,225 @@ CustomWindow {
}
}
FluAppBar {
id: title_bar
anchors {
top: parent.top
left: parent.left
right: parent.right
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.OutQuad}
}
back: Item{
anchors.fill: flipable
visible: flipable.flipAngle !== 0
FluAppBar {
anchors {
top: parent.top
left: parent.left
right: parent.right
}
darkText: lang.dark_mode
showDark: true
z:7
darkClickListener:(button)=>handleDarkChanged(button)
}
Row{
z:8
FluIconButton{
iconSource: FluentIcons.ChromeBack
width: 30
height: 30
iconSize: 13
onClicked: {
flipable.flipped = false
}
}
FluIconButton{
iconSource: FluentIcons.Sync
width: 30
height: 30
iconSize: 13
onClicked: {
loader.reload()
}
}
}
FluRemoteLoader{
id:loader
lazy: true
anchors.fill: parent
// source: "http://localhost:9000/RemoteComponent.qml"
source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
}
}
front: Item{
id:page_front
visible: flipable.flipAngle !== 180
anchors.fill: flipable
FluAppBar {
anchors {
top: parent.top
left: parent.left
right: parent.right
}
darkText: lang.dark_mode
showDark: true
darkClickListener:(button)=>handleDarkChanged(button)
z:7
}
FluNavigationView{
property int clickCount: 0
id:nav_view
width: parent.width
height: parent.height
z:999
items: ItemsOriginal
footerItems:ItemsFooter
topPadding:FluTools.isMacos() ? 20 : 5
displayMode:MainEvent.displayMode
logo: "qrc:/example/res/image/favicon.ico"
title:"FluentUI"
Behavior on rotation {
NumberAnimation{
duration: 167
}
}
transformOrigin: Item.Center
onLoginClicked:{
clickCount += 1
if(clickCount === 1){
loader.reload()
flipable.flipped = true
clickCount = 0
}
}
autoSuggestBox:FluAutoSuggestBox{
width: 280
anchors.centerIn: parent
iconSource: FluentIcons.Search
items: ItemsOriginal.getSearchData()
placeholderText: lang.search
onItemClicked:
(data)=>{
ItemsOriginal.startPageByItem(data)
}
}
Component.onCompleted: {
ItemsOriginal.navigationView = nav_view
ItemsFooter.navigationView = nav_view
setCurrentIndex(0)
}
}
}
darkText: lang.dark_mode
showDark: true
z:7
}
FluNavigationView{
id:nav_view
anchors{
top: parent.top
left: parent.left
right: parent.right
bottom: parent.bottom
Image{
id:img_cache
visible: false
anchors.fill: parent
}
Canvas{
id:canvas
anchors.fill: parent
property int centerX: canvas.width / 2
property int centerY: canvas.height / 2
property real radius: 0
property int maxRadius: 0
property url imageUrl
Behavior on radius{
id:anim_radius
NumberAnimation {
target: canvas
property: "radius"
duration: 333
easing.type: Easing.OutCubic
}
}
z:999
items: ItemsOriginal
footerItems:ItemsFooter
topPadding:FluTools.isMacos() ? 20 : 5
displayMode:MainEvent.displayMode
logo: "qrc:/example/res/image/favicon.ico"
title:"FluentUI"
autoSuggestBox:FluAutoSuggestBox{
width: 280
anchors.centerIn: parent
iconSource: FluentIcons.Search
items: ItemsOriginal.getSearchData()
placeholderText: lang.search
onItemClicked:
(data)=>{
ItemsOriginal.startPageByItem(data)
onRadiusChanged: {
canvas.requestPaint()
}
onPaint: {
var ctx = canvas.getContext("2d");
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvasSize.width, canvasSize.height);
ctx.save()
if(img_cache.source.toString().length!==0){
try{
ctx.drawImage(img_cache, 0, 0, canvasSize.width, canvasSize.height, 0, 0, canvasSize.width, canvasSize.height)
}catch(e){
img_cache.source = ""
}
}
clearArc(ctx, centerX, centerY, radius)
ctx.restore()
}
Component.onCompleted: {
ItemsOriginal.navigationView = nav_view
ItemsFooter.navigationView = nav_view
nav_view.setCurrentIndex(0)
function clearArc(ctx,x, y, radius, startAngle, endAngle) {
ctx.beginPath()
ctx.globalCompositeOperation = 'destination-out'
ctx.fillStyle = 'black'
ctx.arc(x, y, radius, 0, 2*Math.PI);
ctx.fill();
ctx.closePath();
}
}
function distance(x1,y1,x2,y2){
return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
}
function handleDarkChanged(button){
var changeDark = function(){
if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light
}else{
FluTheme.darkMode = FluDarkMode.Dark
}
}
if(FluTools.isWin()){
var target = window.contentItem
var pos = button.mapToItem(target,0,0)
var mouseX = pos.x
var mouseY = pos.y
canvas.maxRadius = 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))
target.grabToImage(function(result) {
img_cache.source = result.url
canvas.requestPaint()
changeDark()
canvas.centerX = mouseX
canvas.centerY = mouseY
anim_radius.enabled = false
canvas.radius = 0
anim_radius.enabled = true
canvas.radius = canvas.maxRadius
},canvas.canvasSize)
}else{
changeDark()
}
}
Shortcut {
sequence: "F5"
context: Qt.WindowShortcut
onActivated: {
if(flipable.flipped){
loader.reload()
}
}
}
}

View File

@ -1,30 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import "../component"
CustomWindow {
title:"视频播放器"
width: 640
height: 480
minimumWidth: 640
minimumHeight: 480
onInitArgument:
(argument)=>{
player.source = argument.source
}
FluMediaPlayer{
id:player
anchors{
left: parent.left
right: parent.right
top: parent.top
bottom: parent.bottom
}
}
}

View File

@ -2,7 +2,7 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import "../component"
import "qrc:///example/qml/component"
CustomWindow {

View File

@ -2,7 +2,7 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import "../component"
import "qrc:///example/qml/component"
CustomWindow {

View File

@ -2,7 +2,7 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
import "../component"
import "qrc:///example/qml/component"
CustomWindow {
@ -13,6 +13,28 @@ CustomWindow {
fixSize: true
launchMode: FluWindow.Standard
FluMenuBar {
FluMenu {
title: qsTr("File")
Action { text: qsTr("New...") }
Action { text: qsTr("Open...") }
Action { text: qsTr("Save") }
Action { text: qsTr("Save As...") }
FluMenuSeparator { }
Action { text: qsTr("Quit") }
}
FluMenu {
title: qsTr("Edit")
Action { text: qsTr("Cut") }
Action { text: qsTr("Copy") }
Action { text: qsTr("Paste") }
}
FluMenu {
title: qsTr("Help")
Action { text: qsTr("About") }
}
}
FluText{
anchors.centerIn: parent
text:"我是一个Standard模式的窗口每次我都会创建一个新的窗口"

View File

@ -19,4 +19,5 @@ En::En(QObject *parent)
settings("Settings");
locale("Locale");
navigation_view_display_mode("NavigationView Display Mode");
other("Other");
}

View File

@ -22,6 +22,7 @@ class Lang : public QObject
Q_PROPERTY_AUTO(QString,settings);
Q_PROPERTY_AUTO(QString,navigation_view_display_mode);
Q_PROPERTY_AUTO(QString,locale);
Q_PROPERTY_AUTO(QString,other);
public:
explicit Lang(QObject *parent = nullptr);

View File

@ -19,4 +19,5 @@ Zh::Zh(QObject *parent)
settings("设置");
locale("语言环境");
navigation_view_display_mode("导航视图显示模式");
other("其他");
}

View File

@ -1,9 +1,8 @@
cmake_minimum_required(VERSION 3.16)
cmake_minimum_required(VERSION 3.20)
project(fluentuiplugin LANGUAGES CXX)
#配置通用编译
set(CMAKE_AUTOMOC ON)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
if(APPLE)
set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
@ -13,9 +12,17 @@ endif()
set(QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
#设置版本号
add_definitions(-DVERSION=1,3,2,0)
add_definitions(-DVERSION=1,3,6,2)
find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml ShaderTools)
find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
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()
#遍历所有Cpp文件
file(GLOB_RECURSE CPP_FILES *.cpp *.h)
@ -32,7 +39,7 @@ foreach(filepath ${QML_PATHS})
endforeach(filepath)
#遍历所有资源文件
file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.qsb *.metainfo)
file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp)
foreach(filepath ${RES_PATHS})
string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
list(APPEND resource_files ${filename})
@ -52,11 +59,11 @@ qt_add_qml_module(fluentuiplugin
OUTPUT_DIRECTORY ${QML_PLUGIN_DIRECTORY}
VERSION 1.0
URI "FluentUI"
#修改qmltypes文件名称。默认fluentuiplugin.qmltypes使用默认名称有时候import FluentUI会爆红所以修改成plugins.qmltypes
TYPEINFO "plugins.qmltypes"
SOURCES ${sources_files} fluentui.rc
QML_FILES ${qml_files}
RESOURCES ${resource_files}
#支持designer
DESIGNER_SUPPORTED
)
#链接库
@ -66,15 +73,5 @@ target_link_libraries(fluentuiplugin PUBLIC
Qt::QmlPrivate
)
#链接库 win32库 不然mingw会编译错误
if(WIN32)
target_link_libraries(fluentuiplugin PRIVATE dwmapi user32)
endif()
#如果是debug则生成的库文件名后面拼接d
# 在MinGW和GCC/Clang中, 默认不会链接带`d`后缀的动态库
if(MSVC)
set_target_properties(fluentuiplugin PROPERTIES DEBUG_POSTFIX "d")
endif(MSVC)
#安装
install(DIRECTORY ${QML_PLUGIN_DIRECTORY} DESTINATION ${CMAKE_INSTALL_PREFIX}/imports)

View File

@ -38,11 +38,15 @@ void FluApp::run(){
void FluApp::navigate(const QString& route,const QJsonObject& argument,FluRegister* fluRegister){
if(!routes().contains(route)){
qErrnoWarning("没有找到当前路由");
qCritical()<<"No route found "<<route;
return;
}
QQmlEngine *engine = qmlEngine(appWindow);
QQmlComponent component(engine, routes().value(route).toString());
if (component.isError()) {
qCritical() << component.errors();
return;
}
QVariantMap properties;
properties.insert("route",route);
if(fluRegister){

View File

@ -27,7 +27,6 @@ class FluApp : public QObject
*/
Q_PROPERTY_AUTO(QJsonObject,routes);
QML_FOREIGN(FluApp)
QML_NAMED_ELEMENT(FluApp)
QML_SINGLETON
private:

View File

@ -8,7 +8,7 @@ FluTextStyle::FluTextStyle(QObject *parent)
Caption(caption);
QFont body;
body.setPixelSize(14);
body.setPixelSize(13);
Body(body);
QFont bodyStrong;

View File

@ -2,6 +2,7 @@
#include <QGuiApplication>
#include <QClipboard>
#include <QUuid>
#include <QCursor>
FluTools* FluTools::m_instance = nullptr;
@ -63,6 +64,26 @@ bool FluTools::isWin(){
#endif
}
int FluTools::qtMajor(){
const QString qtVersion = QString::fromLatin1(qVersion());
const QStringList versionParts = qtVersion.split('.');
return versionParts[0].toInt();
}
int FluTools::qtMinor(){
const QString qtVersion = QString::fromLatin1(qVersion());
const QStringList versionParts = qtVersion.split('.');
return versionParts[1].toInt();
}
void FluTools::setQuitOnLastWindowClosed(bool val){
qApp->setQuitOnLastWindowClosed(val);
}
void FluTools::setOverrideCursor(Qt::CursorShape shape){
qApp->setOverrideCursor(QCursor(shape));
}
void FluTools::restoreOverrideCursor(){
qApp->restoreOverrideCursor();
}

View File

@ -50,6 +50,14 @@ public:
Q_INVOKABLE void setQuitOnLastWindowClosed(bool val);
Q_INVOKABLE int qtMajor();
Q_INVOKABLE int qtMinor();
Q_INVOKABLE void setOverrideCursor(Qt::CursorShape shape);
Q_INVOKABLE void restoreOverrideCursor();
};
#endif // FLUTOOLS_H

View File

@ -22,6 +22,25 @@ Rectangle{
property bool titleVisible: true
property bool isMac: FluTools.isMacos()
property color borerlessColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property var maxClickListener : function(){
if (d.win.visibility === Window.Maximized)
d.win.visibility = Window.Windowed
else
d.win.visibility = Window.Maximized
}
property var minClickListener: function(){
d.win.visibility = Window.Minimized
}
property var closeClickListener : function(){
d.win.close()
}
property var darkClickListener: function(){
if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light
}else{
FluTheme.darkMode = FluDarkMode.Dark
}
}
id:root
color: Qt.rgba(0,0,0,0)
height: visible ? 30 : 0
@ -57,25 +76,16 @@ Rectangle{
anchors.right: parent.right
height: root.height
spacing: 0
RowLayout{
FluToggleSwitch{
id:btn_dark
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: 5
visible: showDark
spacing: 5
FluText{
text:darkText
color:root.textColor
}
FluToggleSwitch{
checked: FluTheme.dark
clickListener: function(){
if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light
}else{
FluTheme.darkMode = FluDarkMode.Dark
}
}
}
text:darkText
textColor:root.textColor
checked: FluTheme.dark
textRight: false
clickListener:()=> darkClickListener(btn_dark)
}
FluIconButton{
id:btn_minimize
@ -89,9 +99,7 @@ Rectangle{
visible: !isMac
iconColor: root.textColor
color: hovered ? minimizeHoverColor : minimizeNormalColor
onClicked: {
d.win.visibility = Window.Minimized
}
onClicked: minClickListener()
}
FluIconButton{
id:btn_maximize
@ -105,12 +113,7 @@ Rectangle{
iconColor: root.textColor
text:d.isRestore?restoreText:maximizeText
iconSize: 11
onClicked: {
if (d.win.visibility === Window.Maximized)
d.win.visibility = Window.Windowed
else
d.win.visibility = Window.Maximized
}
onClicked: maxClickListener()
}
FluIconButton{
id:btn_close
@ -124,9 +127,7 @@ Rectangle{
iconSize: 10
iconColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor
color:hovered ? closeHoverColor : closeNormalColor
onClicked: {
d.win.close()
}
onClicked: closeClickListener()
}
}
@ -142,4 +143,8 @@ Rectangle{
return btn_close
}
function darkButton(){
return btn_dark
}
}

View File

@ -16,16 +16,6 @@ Rectangle {
border.width: 1
implicitHeight: height
implicitWidth: width
Behavior on color{
ColorAnimation {
duration: 300
}
}
Behavior on border.color{
ColorAnimation {
duration: 300
}
}
Item {
id: container
anchors.fill: parent

View File

@ -4,8 +4,9 @@ import FluentUI
Rectangle{
property bool isDot: false
property bool showZero: true
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: {
@ -14,7 +15,7 @@ Rectangle{
if(count<10){
return 20
}else if(count<100){
return 30
return 30
}
return 40
}
@ -30,35 +31,41 @@ Rectangle{
}
border.width: 1
border.color: Qt.rgba(1,1,1,1)
visible: {
if(showZero)
return true
return count!==0
}
anchors{
right: {
if(parent)
if(parent && topRight)
return parent.right
return undefined
}
top: {
if(parent)
if(parent && topRight)
return parent.top
return undefined
}
rightMargin: {
if(isDot){
return -2.5
if(parent && topRight){
if(isDot){
return -2.5
}
return -(control.width/2)
}
return -(control.width/2)
return 0
}
topMargin: {
if(isDot){
return -2.5
if(parent && topRight){
if(isDot){
return -2.5
}
return -10
}
return -10
return 0
}
}
visible: {
if(showZero)
return true
return count!==0
}
Text{
anchors.centerIn: parent
color: Qt.rgba(1,1,1,1)

View File

@ -11,7 +11,7 @@ Button {
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
property color textColor: {
if(FluTheme.dark){
if(disabled){
if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(pressed){
@ -19,7 +19,7 @@ Button {
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(pressed){
@ -44,7 +44,7 @@ Button {
border.width: 1
radius: 4
color:{
if(disabled){
if(!enabled){
return disableColor
}
return hovered ? hoverColor :normalColor

View File

@ -243,8 +243,6 @@ Item {
}
FluTextButton{
id:title
leftPadding: 0
rightPadding: 0
anchors{
verticalCenter: parent.verticalCenter
left: parent.left

View File

@ -19,31 +19,38 @@ Button {
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 var clickListener : function(){
checked = !checked
}
id:control
enabled: !disabled
padding:0
onClicked: clickListener()
background: Item{
FluFocusRectangle{
radius: 4
visible: control.activeFocus
}
}
horizontalPadding:2
verticalPadding: 2
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
focusPolicy:Qt.TabFocus
contentItem: RowLayout{
spacing: 4
spacing: control.textSpacing
layoutDirection:control.textRight ? Qt.LeftToRight : Qt.RightToLeft
Rectangle{
width: 20
height: 20
width: control.size
height: control.size
radius: 4
border.color: {
if(disabled){
if(!enabled){
return borderDisableColor
}
if(checked){
@ -60,7 +67,7 @@ Button {
border.width: 1
color: {
if(checked){
if(disabled){
if(!enabled){
return checkedDisableColor
}
if(pressed){
@ -71,7 +78,7 @@ Button {
}
return checkedColor
}
if(disabled){
if(!enabled){
return disableColor
}
if(hovered){
@ -98,8 +105,9 @@ Button {
}
}
FluText{
id:btn_text
text: control.text
Layout.leftMargin: 5
Layout.alignment: Qt.AlignVCenter
visible: text !== ""
}
}

View File

@ -6,6 +6,7 @@ import QtQuick.Templates as T
ComboBox {
id: control
signal commit
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)
@ -24,11 +25,10 @@ ComboBox {
text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
palette.text: control.palette.text
palette.highlightedText: control.palette.highlightedText
font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
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
@ -37,7 +37,6 @@ ComboBox {
iconSize: 15
opacity: enabled ? 1 : 0.3
}
contentItem: T.TextField {
property bool disabled: !control.editable
leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
@ -46,6 +45,7 @@ ComboBox {
bottomPadding: 6 - control.padding
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTheme.primaryColor.lightest
selectedTextColor: control.palette.highlightedText
text: control.editable ? control.editText : control.displayText
enabled: control.editable
autoScroll: control.editable
@ -64,6 +64,15 @@ ComboBox {
border.width: 0
inputItem: contentItem
}
Component.onCompleted: {
forceActiveFocus()
}
Keys.onEnterPressed: {
control.commit()
}
Keys.onReturnPressed: {
control.commit()
}
}
background: Rectangle {
@ -74,8 +83,9 @@ ComboBox {
visible: !control.flat || control.down
radius: 4
FluFocusRectangle{
visible: control.activeFocus
radius:8
visible: control.visualFocus
radius:4
anchors.margins: -2
}
color:{
if(disabled){

View File

@ -4,19 +4,19 @@ import QtQuick.Window
import QtQuick.Controls
import FluentUI
Item {
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 int pageMode: FluNavigationView.Standard
property string url: ''
id:control
FluText{
id:text_title
font: FluTextStyle.TitleLarge
visible: text !== ""
height: visible ? contentHeight : 0
font: FluTextStyle.Title
anchors{
top: parent.top
topMargin: control.topPadding

View File

@ -2,7 +2,7 @@ import QtQuick
import QtQuick.Controls
import FluentUI
TextField {
TextEdit {
property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220
id:control
color: textColor
@ -14,18 +14,13 @@ TextField {
leftPadding: 0
rightPadding: 0
topPadding: 0
selectedTextColor: FluColors.Grey220
bottomPadding: 0
selectionColor: FluTheme.primaryColor.lightest
TextMetrics {
id: text_metrics
font:control.font
text: control.text
}
background: Item{
implicitWidth: text_metrics.width+10
implicitHeight: text_metrics.height
}
font:FluTextStyle.Body
onSelectedTextChanged: {
control.forceActiveFocus()
}
TapHandler {
acceptedButtons: Qt.RightButton
onTapped: control.echoMode !== TextInput.Password && menu.popup()

View File

@ -8,11 +8,9 @@ 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 var window : Window.window
property bool showYear: true
property bool changeFlag: true
readonly property var rowData: ["","",""]
id:root
property var current
id:control
color: {
if(mouse_area.containsMouse){
return hoverColor
@ -24,6 +22,13 @@ Rectangle {
radius: 4
border.width: 1
border.color: dividerColor
Item{
id:d
property var window: Window.window
property bool changeFlag: true
property var rowData: ["","",""]
visible: false
}
MouseArea{
id:mouse_area
hoverEnabled: true
@ -317,8 +322,19 @@ Rectangle {
}
text: "确定"
onClicked: {
changeFlag = false
d.changeFlag = false
popup.close()
const year = text_year.text
const month = text_month.text
const day = text_day.text
const date = new Date()
date.setFullYear(parseInt(year));
date.setMonth(parseInt(month) - 1);
date.setDate(parseInt(day));
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
current = date
}
}
}
@ -326,10 +342,10 @@ Rectangle {
}
y:35
function showPopup() {
changeFlag = true
rowData[0] = text_year.text
rowData[1] = text_month.text
rowData[2] = text_day.text
d.changeFlag = true
d.rowData[0] = text_year.text
d.rowData[1] = text_month.text
d.rowData[2] = text_day.text
const now = new Date();
var year = text_year.text === "年"? now.getFullYear() : Number(text_year.text);
var month = text_month.text === "月"? now.getMonth() + 1 : Number(text_month.text);
@ -342,21 +358,21 @@ Rectangle {
list_view_3.model = generateMonthDaysArray(year,month)
list_view_3.currentIndex = list_view_3.model.indexOf(day)
text_day.text = day
var pos = root.mapToItem(null, 0, 0)
if(window.height>pos.y+root.height+container.height){
popup.y = root.height
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 = window.height-(pos.y+container.height)
popup.y = d.window.height-(pos.y+container.height)
}
popup.open()
}
onClosed: {
if(changeFlag){
text_year.text = rowData[0]
text_month.text = rowData[1]
text_day.text = rowData[2]
if(d.changeFlag){
text_year.text = d.rowData[0]
text_month.text = d.rowData[1]
text_day.text = d.rowData[2]
}
}
}

View File

@ -3,5 +3,5 @@ import QtQuick.Window
import FluentUI
Rectangle {
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,230/255,234/255,1)
color: FluTheme.dark ? Qt.rgba(60/255,60/255,60/255,1) : Qt.rgba(210/255,210/255,210/255,1)
}

View File

@ -12,7 +12,7 @@ Button {
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
property color textColor: {
if(FluTheme.dark){
if(disabled){
if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(pressed){
@ -20,7 +20,7 @@ Button {
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(pressed){
@ -30,7 +30,7 @@ Button {
}
}
property var window : Window.window
property alias items: menu.content
default property alias contentData: menu.contentData
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
@ -51,7 +51,7 @@ Button {
radius:8
}
color:{
if(disabled){
if(!enabled){
return disableColor
}
return hovered ? hoverColor :normalColor
@ -75,9 +75,9 @@ Button {
color: control.textColor
}
onClicked: {
if(items && menu.getContainerCount()!==0){
if(items && menu.count !==0){
var pos = control.mapToItem(null, 0, 0)
var containerHeight = menu.getContainerHeight()
var containerHeight = menu.count*36
if(window.height>pos.y+control.height+containerHeight){
menu.y = control.height
}else if(pos.y>containerHeight){
@ -90,6 +90,7 @@ Button {
}
FluMenu{
id:menu
modal:true
width: control.width
}
}

View File

@ -20,16 +20,6 @@ Item {
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)
Behavior on color{
ColorAnimation {
duration: 300
}
}
Behavior on border.color{
ColorAnimation {
duration: 300
}
}
MouseArea{
id:control_mouse
anchors.fill: parent
@ -67,7 +57,7 @@ Item {
iconSize: 15
Behavior on rotation {
NumberAnimation{
duration: 150
duration: 167
}
}
}
@ -89,8 +79,7 @@ Item {
Behavior on height {
NumberAnimation{
duration: 167
easing.type: Easing.BezierSpline
easing.bezierCurve: expand ? [ 0, 0, 0, 1 ] : [ 1, 0, 0, 0 ]
easing.type: Easing.InCubic
}
}
}

View File

@ -12,7 +12,7 @@ Button {
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
property color textColor: {
if(FluTheme.dark){
if(disabled){
if(!enabled){
return Qt.rgba(173/255,173/255,173/255,1)
}
return Qt.rgba(0,0,0,1)
@ -38,7 +38,7 @@ Button {
radius:4
}
color:{
if(disabled){
if(!enabled){
return disableColor
}
if(pressed){

View File

@ -0,0 +1,27 @@
import QtQuick
import QtQuick.Templates as T
import FluentUI
T.HorizontalHeaderView {
id: control
implicitWidth: syncView ? syncView.width : 0
implicitHeight: Math.max(1, contentHeight)
delegate: Rectangle {
readonly property real cellPadding: 8
implicitWidth: text.implicitWidth + (cellPadding * 2)
implicitHeight: Math.max(control.height, text.implicitHeight + (cellPadding * 2))
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
FluText {
id: text
text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
: model[control.textRole])
: modelData
width: parent.width
height: parent.height
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
}

View File

@ -9,12 +9,12 @@ Button {
property bool disabled: false
property int radius:4
property string contentDescription: ""
property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
property color pressedColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.06)
property color hoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
property color pressedColor: FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06)
property color normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
property color disableColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
property color color: {
if(disabled){
if(!enabled){
return disableColor
}
if(pressed){
@ -24,12 +24,12 @@ Button {
}
property color iconColor: {
if(FluTheme.dark){
if(disabled){
if(!enabled){
return Qt.rgba(130/255,130/255,130/255,1)
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
if(!enabled){
return Qt.rgba(161/255,161/255,161/255,1)
}
return Qt.rgba(0,0,0,1)

View File

@ -1,202 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtMultimedia
import FluentUI
Rectangle {
property url source
property bool showControl: false
property real volume: 30
id:control
width: 480
height: 270
color: FluColors.Black
clip: true
MouseArea{
anchors.fill: parent
preventStealing: true
onClicked: {
showControl = !showControl
}
}
MediaPlayer {
id: mediaplayer
property bool autoSeek:true
source: control.source
videoOutput: video_output
audioOutput: AudioOutput{
id:audio_output
}
onErrorStringChanged:
(error)=> {
console.debug(errorString)
}
onPositionChanged: {
if(autoSeek){
slider.seek(mediaplayer.position*slider.maxValue/mediaplayer.duration)
}
}
onMediaStatusChanged:
(status)=> {
if(status===2){
slider.maxValue = mediaplayer.duration
showControl = true
mediaplayer.play()
}
}
}
onSourceChanged: {
slider.seek(0)
}
VideoOutput {
id:video_output
anchors.fill: parent
}
Item{
height: 100
y:showControl ? control.height - 110 : control.height
anchors{
horizontalCenter: parent.horizontalCenter
}
width: 460
opacity: showControl
MouseArea{
anchors.fill: parent
}
Behavior on opacity{
NumberAnimation{
duration: 150
}
}
Behavior on y{
NumberAnimation{
duration: 150
}
}
Rectangle{
anchors.fill: parent
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
radius: 5
}
FluSlider{
id:slider
size:parent.width-20
y:20
anchors.horizontalCenter: parent.horizontalCenter
tipEnabled:false
onPressed: {
mediaplayer.autoSeek = false
mediaplayer.pause()
}
value:mediaplayer.position
onReleased: {
mediaplayer.autoSeek = true
mediaplayer.play()
}
onValueChanged: {
if(mediaplayer.autoSeek == false){
mediaplayer.position = value*mediaplayer.duration/slider.maxValue
}
}
onLineClickFunc:function(val){
mediaplayer.position = val*mediaplayer.duration/slider.maxValue
}
}
FluText{
id:start_time
anchors{
top: slider.bottom
topMargin: 10
left: slider.left
}
text: formatDuration(slider.value*mediaplayer.duration/slider.maxValue)
}
FluText{
id:end_time
anchors{
top: slider.bottom
right: slider.right
topMargin: 10
}
text: formatDuration(mediaplayer.duration)
}
Row{
spacing: 10
anchors{
horizontalCenter: parent.horizontalCenter
bottom: parent.bottom
bottomMargin: 10
}
FluIconButton{
iconSize: 17
iconSource: FluentIcons.SkipBack10
onClicked: {
mediaplayer.position = Math.max(mediaplayer.position-10*1000,0)
}
}
FluIconButton{
iconSize: 15
iconSource: mediaplayer.playbackState === MediaPlayer.PlayingState ? FluentIcons.Pause : FluentIcons.Play
onClicked: {
if(mediaplayer.playbackState === MediaPlayer.PlayingState){
mediaplayer.pause()
}else{
mediaplayer.play()
}
}
}
FluIconButton{
iconSize: 17
iconSource: FluentIcons.SkipForward30
onClicked: {
mediaplayer.position = Math.min(mediaplayer.position+30*1000,mediaplayer.duration)
}
}
}
FluIconButton{
id:btn_volume
iconSize: 17
iconSource: audio_output.muted ? FluentIcons.Mute : FluentIcons.Volume
anchors{
left: parent.left
leftMargin: 5
bottom: parent.bottom
bottomMargin: 10
}
onClicked: {
audio_output.muted = !audio_output.muted
}
}
FluSlider{
id:slider_volume
size: 80
dotSize: 20
value:30
anchors{
left:btn_volume.right
verticalCenter: btn_volume.verticalCenter
leftMargin: 10
}
onValueChanged:{
audio_output.volume = value/100
}
}
}
function formatDuration(duration) {
const seconds = Math.floor(duration / 1000);
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const remainingSeconds = seconds % 60;
return `${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}`;
}
function pad(value) {
return value.toString().padStart(2, '0');
}
function pause(){
mediaplayer.pause()
}
function play(){
mediaplayer.play()
}
}

View File

@ -1,23 +1,26 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Controls.impl
import QtQuick.Templates as T
import FluentUI
Menu {
default property alias content: container.data
property bool enableAnimation: true
id: popup
width: 140
height: container.height
modal:true
dim:false
T.Menu {
property bool animEnabled: true
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding)
margins: 0
overlap: 1
spacing: 0
delegate: FluMenuItem { }
enter: Transition {
reversible: true
NumberAnimation {
property: "opacity"
from:0
to:1
duration: enableAnimation ? 83 : 0
duration: animEnabled ? 83 : 0
}
}
exit:Transition {
@ -25,38 +28,32 @@ Menu {
property: "opacity"
from:1
to:0
duration: enableAnimation ? 83 : 0
duration: animEnabled ? 83 : 0
}
}
background:Item{
FluShadow{
radius: 5
}
}
contentItem: Item {
contentItem: ListView {
implicitHeight: contentHeight
model: control.contentModel
interactive: Window.window
? contentHeight + control.topPadding + control.bottomPadding > Window.window.height
: false
clip: true
Rectangle{
anchors.fill: parent
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
}
Column{
id:container
spacing: 5
topPadding: 5
bottomPadding: 5
width: popup.width
function closePopup(){
popup.close()
}
}
currentIndex: control.currentIndex
ScrollIndicator.vertical: ScrollIndicator {}
}
function getContainerHeight(){
return container.height
background: Rectangle {
implicitWidth: 150
implicitHeight: 36
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(240/255,240/255,240/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{}
}
function getContainerCount(){
return container.children.length
T.Overlay.modal: Rectangle {
color: Color.transparent(control.palette.shadow, 0.5)
}
T.Overlay.modeless: Rectangle {
color: Color.transparent(control.palette.shadow, 0.12)
}
}

View File

@ -0,0 +1,21 @@
import QtQuick
import QtQuick.Templates as T
import QtQuick.Controls.impl
T.MenuBar {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding)
delegate: FluMenuBarItem { }
contentItem: Row {
spacing: control.spacing
Repeater {
model: control.contentModel
}
}
background: Item {
implicitHeight: 30
}
}

View File

@ -0,0 +1,70 @@
import QtQuick
import QtQuick.Templates as T
import QtQuick.Controls.impl
import FluentUI
T.MenuBarItem {
property bool disabled: false
property color textColor: {
if(FluTheme.dark){
if(disabled){
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(disabled){
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)
}
}
id: control
enabled: !disabled
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
spacing: 6
padding: 6
leftPadding: 12
rightPadding: 16
icon.width: 24
icon.height: 24
icon.color: control.palette.buttonText
contentItem: FluText {
verticalAlignment: Text.AlignVCenter
text: control.text
color:control.textColor
}
background: Rectangle {
implicitWidth: 30
implicitHeight: 30
radius: 3
color: {
if(FluTheme.dark){
if(control.highlighted){
return Qt.rgba(1,1,1,0.06)
}
if(control.hovered){
return Qt.rgba(1,1,1,0.03)
}
return Qt.rgba(0,0,0,0)
}else{
if(control.highlighted){
return Qt.rgba(0,0,0,0.06)
}
if(control.hovered){
return Qt.rgba(0,0,0,0.03)
}
return Qt.rgba(0,0,0,0)
}
}
}
}

View File

@ -1,52 +1,86 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.impl
import QtQuick.Templates as T
import FluentUI
Item {
property string text: "MenuItem"
property var onClickFunc
signal clicked
id:control
width: {
if(control.parent){
return control.parent.width
}
return 140
}
height: 32
Rectangle{
anchors.centerIn: parent
width: control.width-40
height: 32
radius: 4
color:{
if(FluTheme.dark){
if(mouse_area.containsMouse){
return Qt.rgba(1,1,1,0.05)
}
return Qt.rgba(0,0,0,0)
}else{
if(mouse_area.containsMouse){
return Qt.rgba(0,0,0,0.05)
}
return Qt.rgba(0,0,0,0)
T.MenuItem {
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)
}
FluText{
text: control.text
anchors.centerIn: parent
}
MouseArea{
id:mouse_area
hoverEnabled: true
}
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
padding: 6
spacing: 6
icon.width: 24
icon.height: 24
icon.color: control.palette.windowText
height: visible ? implicitHeight : 0
contentItem: FluText {
readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
readonly property real indicatorPadding: control.checkable && control.indicator ? control.indicator.width + control.spacing : 0
leftPadding: (!control.mirrored ? indicatorPadding : arrowPadding)+5
rightPadding: (control.mirrored ? indicatorPadding : arrowPadding)+5
verticalAlignment: Text.AlignVCenter
text: control.text
color: control.textColor
}
indicator: FluIcon {
x: control.mirrored ? control.width - width - control.rightPadding : control.leftPadding
y: control.topPadding + (control.availableHeight - height) / 2
visible: control.checked
iconSource: FluentIcons.CheckMark
}
arrow: FluIcon {
x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
visible: control.subMenu
iconSource: FluentIcons.ChevronRightMed
}
background: Item {
implicitWidth: 150
implicitHeight: 36
x: 1
y: 1
width: control.width - 2
height: control.height - 2
Rectangle{
anchors.fill: parent
onClicked: {
if(control.onClickFunc){
control.onClickFunc()
return
anchors.margins: 3
radius: 4
color:{
if(FluTheme.dark){
if(control.highlighted){
return Qt.rgba(1,1,1,0.06)
}
return Qt.rgba(0,0,0,0)
}else{
if(control.highlighted){
return Qt.rgba(0,0,0,0.06)
}
return Qt.rgba(0,0,0,0)
}
control.parent.closePopup()
control.clicked()
}
}
}

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