Compare commits
72 Commits
Author | SHA1 | Date | |
---|---|---|---|
0610f63f26 | |||
d741b3eb4f | |||
cb7d2097f2 | |||
dff77d3d4f | |||
6d0834c653 | |||
059a1b17cc | |||
e1096b8e22 | |||
cd577c5599 | |||
d43532986a | |||
4c9e576072 | |||
b254064e26 | |||
ffd8072826 | |||
9a1db0b230 | |||
9786e69fc2 | |||
82be3b12e3 | |||
1c0f5acaf8 | |||
243f8aa248 | |||
cbb8c3122b | |||
9f2c58306c | |||
adc3558e02 | |||
98d73eb6cb | |||
b442696f92 | |||
82f606dd65 | |||
4efb91084a | |||
103dbe9d56 | |||
b829fa572f | |||
d2c5cc779b | |||
5acf664492 | |||
75d226947f | |||
752ff3c4f2 | |||
e591c483d5 | |||
fdff068752 | |||
24f28d8945 | |||
ed51143e9b | |||
9d94bc65d5 | |||
7bfa9f0191 | |||
6db144c751 | |||
a574cd9230 | |||
8c45c125e6 | |||
aab4802d7e | |||
441c1ab03c | |||
91f4f508cc | |||
94f8047508 | |||
d926a84f72 | |||
c07011408c | |||
4f9ec6abf2 | |||
c3b3dc904e | |||
2a5acb45a1 | |||
d29580f8f2 | |||
fd0ddbf5aa | |||
ac602c5afa | |||
8dbfcfd994 | |||
c5ce34cbc3 | |||
a4d04499bc | |||
47b0c71f95 | |||
e651b731cf | |||
31bdea8d44 | |||
2fbc5696f7 | |||
f2ea9a19a1 | |||
aee97c2aab | |||
05b41f3383 | |||
b3ca045936 | |||
18205851f6 | |||
221361369e | |||
cf730bc769 | |||
49029164ff | |||
6da4a2e10e | |||
021745c366 | |||
2cfd5b3ab2 | |||
2c7d556042 | |||
609df92f8c | |||
ca57b16521 |
2
.github/workflows/windows.yml
vendored
@ -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
|
||||
|
@ -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}")
|
||||
|
@ -115,5 +115,9 @@ View more [`here`](doc/md/all_components.md)!
|
||||
|
||||
This FluentUI library currently licensed under [MIT License](./License)
|
||||
|
||||
## Star History
|
||||
|
||||
[](https://star-history.com/#zhuzichu520/FluentUI&Date)
|
||||
|
||||
## ⚡ Visitor count
|
||||

|
||||
|
0
doc/preview/demo_content_dialog.png
Executable file → Normal file
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
0
doc/preview/demo_filledbtn.png
Executable file → Normal 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
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
0
doc/preview/demo_infobar.png
Executable file → Normal 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
Before Width: | Height: | Size: 192 KiB After Width: | Height: | Size: 192 KiB |
0
doc/preview/demo_multiline_textbox.png
Executable file → Normal 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
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
0
doc/preview/demo_radiobtn.png
Executable file → Normal 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
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
0
doc/preview/demo_slider.png
Executable file → Normal file
Before Width: | Height: | Size: 997 B After Width: | Height: | Size: 997 B |
0
doc/preview/demo_standardbtn.png
Executable file → Normal 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
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
0
doc/preview/demo_textbtn.png
Executable file → Normal 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
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
0
doc/preview/demo_tooltip.png
Executable file → Normal 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
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
0
doc/preview/qt_creator_project.png
Executable file → Normal file
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
@ -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}
|
||||
)
|
||||
|
@ -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"
|
||||
|
@ -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, " ");
|
||||
|
@ -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{
|
||||
|
@ -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")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
|
@ -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)
|
||||
}
|
||||
|
@ -3,7 +3,7 @@ import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
@ -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{
|
||||
|
@ -3,7 +3,7 @@ import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
@ -3,7 +3,7 @@ import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
@ -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{
|
||||
|
@ -3,7 +3,7 @@ import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
@ -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})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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())
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -3,7 +3,7 @@ import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -3,7 +3,7 @@ import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
@ -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{
|
||||
|
@ -3,7 +3,7 @@ import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
@ -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"})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
@ -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()
|
||||
'
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
@ -3,7 +3,7 @@ import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
49
example/qml/page/T_Pagination.qml
Normal file
@ -0,0 +1,49 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import "qrc:///example/qml/component"
|
||||
import FluentUI
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Pagination"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 200
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
ColumnLayout{
|
||||
spacing: 20
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluPagination{
|
||||
pageCurrent: 1
|
||||
pageButtonCount: 5
|
||||
itemCount: 5000
|
||||
}
|
||||
FluPagination{
|
||||
pageCurrent: 2
|
||||
itemCount: 5000
|
||||
pageButtonCount: 7
|
||||
}
|
||||
FluPagination{
|
||||
pageCurrent: 3
|
||||
itemCount: 5000
|
||||
pageButtonCount: 9
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluPagination{
|
||||
pageCurrent: 1
|
||||
itemCount: 1000
|
||||
pageButtonCount: 9
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
@ -3,7 +3,7 @@ import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
101
example/qml/page/T_RadioButton.qml
Normal file
@ -0,0 +1,101 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"RadioButton"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Row{
|
||||
spacing: 30
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluRadioButton{
|
||||
disabled: radio_button_switch.checked
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled: radio_button_switch.checked
|
||||
text:"Right"
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled: radio_button_switch.checked
|
||||
text:"Left"
|
||||
textRight: false
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:radio_button_switch
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluRadioButton{
|
||||
text:"Text"
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluRadioButtons{
|
||||
spacing: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled: radio_button_switch2.checked
|
||||
text:"Radio Button_1"
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled: radio_button_switch2.checked
|
||||
text:"Radio Button_2"
|
||||
}
|
||||
FluRadioButton{
|
||||
disabled: radio_button_switch2.checked
|
||||
text:"Radio Button_3"
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:radio_button_switch2
|
||||
anchors{
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluRadioButtons{
|
||||
spacing: 8
|
||||
FluRadioButton{
|
||||
text:"Radio Button_1"
|
||||
}
|
||||
FluRadioButton{
|
||||
text:"Radio Button_2"
|
||||
}
|
||||
FluRadioButton{
|
||||
text:"Radio Button_3"
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
@ -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{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
@ -3,7 +3,7 @@ import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
12
example/qml/page/T_RemoteLoader.qml
Normal 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"
|
||||
}
|
@ -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
|
||||
|
@ -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
|
||||
}'
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
@ -3,7 +3,7 @@ import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
@ -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
|
||||
|
@ -3,7 +3,7 @@ import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
@ -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")))
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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{
|
||||
|
@ -3,7 +3,7 @@ import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
@ -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:"获取选中的数据"
|
||||
|
@ -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
|
||||
|
@ -2,7 +2,7 @@ import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
CustomWindow {
|
||||
|
||||
|
@ -2,7 +2,7 @@ import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
CustomWindow {
|
||||
|
||||
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
}
|
@ -2,7 +2,7 @@ import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
CustomWindow {
|
||||
|
||||
|
@ -2,7 +2,7 @@ import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
import "../component"
|
||||
import "qrc:///example/qml/component"
|
||||
|
||||
CustomWindow {
|
||||
|
||||
|
@ -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模式的窗口,每次我都会创建一个新的窗口"
|
||||
|
@ -19,4 +19,5 @@ En::En(QObject *parent)
|
||||
settings("Settings");
|
||||
locale("Locale");
|
||||
navigation_view_display_mode("NavigationView Display Mode");
|
||||
other("Other");
|
||||
}
|
||||
|
@ -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);
|
||||
|
||||
|
@ -19,4 +19,5 @@ Zh::Zh(QObject *parent)
|
||||
settings("设置");
|
||||
locale("语言环境");
|
||||
navigation_view_display_mode("导航视图显示模式");
|
||||
other("其他");
|
||||
}
|
||||
|
@ -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)
|
||||
|
@ -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){
|
||||
|
@ -27,7 +27,6 @@ class FluApp : public QObject
|
||||
*/
|
||||
Q_PROPERTY_AUTO(QJsonObject,routes);
|
||||
|
||||
QML_FOREIGN(FluApp)
|
||||
QML_NAMED_ELEMENT(FluApp)
|
||||
QML_SINGLETON
|
||||
private:
|
||||
|
@ -8,7 +8,7 @@ FluTextStyle::FluTextStyle(QObject *parent)
|
||||
Caption(caption);
|
||||
|
||||
QFont body;
|
||||
body.setPixelSize(14);
|
||||
body.setPixelSize(13);
|
||||
Body(body);
|
||||
|
||||
QFont bodyStrong;
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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)
|
||||
|
@ -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
|
||||
|
@ -243,8 +243,6 @@ Item {
|
||||
}
|
||||
FluTextButton{
|
||||
id:title
|
||||
leftPadding: 0
|
||||
rightPadding: 0
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
|
@ -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 !== ""
|
||||
}
|
||||
}
|
||||
|
@ -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){
|
||||
|
@ -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
|
||||
|
@ -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()
|
||||
|
@ -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]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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)
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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){
|
||||
|
27
src/imports/FluentUI/Controls/FluHorizontalHeaderView.qml
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
@ -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)
|
||||
|
@ -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()
|
||||
}
|
||||
}
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
21
src/imports/FluentUI/Controls/FluMenuBar.qml
Normal 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
|
||||
}
|
||||
}
|
70
src/imports/FluentUI/Controls/FluMenuBarItem.qml
Normal 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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|