wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

main
朱子楚\zhuzi 2023-05-15 21:14:37 +08:00
parent c095008042
commit 75193b216f
59 changed files with 80 additions and 595 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
example/qml/page/T_TableView.qml
View File

@ -34,7 +34,7 @@ FluScrollablePage{
{ {
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
width:100 width:120
}, },
]; ];
table_view.columns = columns table_view.columns = columns
@ -62,12 +62,14 @@ FluScrollablePage{
spacing: 10 spacing: 10
FluFilledButton{ FluFilledButton{
text:"编辑" text:"编辑"
horizontalPadding: 6
onClicked:{ onClicked:{
showSuccess(JSON.stringify(dataObject)) showSuccess(JSON.stringify(dataObject))
} }
} }
FluFilledButton{ FluFilledButton{
text:"删除" text:"删除"
horizontalPadding: 6
onClicked:{ onClicked:{
showError(JSON.stringify(dataObject)) showError(JSON.stringify(dataObject))
} }
@ -76,20 +78,6 @@ FluScrollablePage{
} }
} }
function loadData(page,count){
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
})
}
table_view.dataSource = dataSource
}
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 10 Layout.topMargin: 10
@ -141,6 +129,17 @@ FluScrollablePage{
}' }'
} }
function loadData(page,count){
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
})
}
table_view.dataSource = dataSource
}
} }

3
src/imports/FluentUI/Controls/FluAcrylic.qml
View File

@ -4,7 +4,6 @@ import FluentUI
Item { Item {
id: control id: control
property alias color: rect.color property alias color: rect.color
property alias acrylicOpacity: rect.opacity property alias acrylicOpacity: rect.opacity
property alias radius:bg.radius property alias radius:bg.radius
@ -14,7 +13,6 @@ Item {
id:bg id:bg
anchors.fill: parent anchors.fill: parent
radius: [8,8,8,8] radius: [8,8,8,8]
ShaderEffectSource { ShaderEffectSource {
id: effect_source id: effect_source
anchors.fill: parent anchors.fill: parent
@ -27,7 +25,6 @@ Item {
opacity: 0.5 opacity: 0.5
} }
} }
FastBlur { FastBlur {
id:blur id:blur
radius: 50 radius: 50

23
src/imports/FluentUI/Controls/FluAppBar.qml
View File

@ -5,7 +5,6 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Rectangle{ Rectangle{
property string title: "" property string title: ""
property string darkText : "夜间模式" property string darkText : "夜间模式"
property string minimizeText : "最小化" property string minimizeText : "最小化"
@ -21,32 +20,27 @@ Rectangle{
property color closeHoverColor: Qt.rgba(251/255,115/255,115/255,1) property color closeHoverColor: Qt.rgba(251/255,115/255,115/255,1)
property bool showDark: false property bool showDark: false
property color borerlessColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color borerlessColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
Item{
id:d
property var win: Window.window
property bool isRestore: win && Window.Maximized === win.visibility
property bool resizable: win && !(win.minimumHeight === win.maximumHeight && win.maximumWidth === win.minimumWidth)
}
id:root id:root
color: Qt.rgba(0,0,0,0) color: Qt.rgba(0,0,0,0)
visible: false visible: false
height: visible ? 30 : 0 height: visible ? 30 : 0
opacity: visible opacity: visible
z: 65535 z: 65535
Item{
id:d
property var win: Window.window
property bool isRestore: win && Window.Maximized === win.visibility
property bool resizable: win && !(win.minimumHeight === win.maximumHeight && win.maximumWidth === win.minimumWidth)
}
TapHandler { TapHandler {
onTapped: if (tapCount === 2) toggleMaximized() onTapped: if (tapCount === 2) toggleMaximized()
gesturePolicy: TapHandler.DragThreshold gesturePolicy: TapHandler.DragThreshold
} }
DragHandler { DragHandler {
target: null target: null
grabPermissions: TapHandler.CanTakeOverFromAnything grabPermissions: TapHandler.CanTakeOverFromAnything
onActiveChanged: if (active) { d.win.startSystemMove(); } onActiveChanged: if (active) { d.win.startSystemMove(); }
} }
FluText { FluText {
text: title text: title
anchors{ anchors{
@ -56,12 +50,10 @@ Rectangle{
} }
color:root.textColor color:root.textColor
} }
RowLayout{ RowLayout{
anchors.right: parent.right anchors.right: parent.right
height: root.height height: root.height
spacing: 0 spacing: 0
RowLayout{ RowLayout{
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: 5 Layout.rightMargin: 5
@ -82,7 +74,6 @@ Rectangle{
} }
} }
} }
FluIconButton{ FluIconButton{
width: 40 width: 40
height: 30 height: 30
@ -127,7 +118,6 @@ Rectangle{
} }
} }
} }
function toggleMaximized() { function toggleMaximized() {
if(!d.resizable) if(!d.resizable)
return return
@ -137,5 +127,4 @@ Rectangle{
d.win.showMaximized(); d.win.showMaximized();
} }
} }
} }

6
src/imports/FluentUI/Controls/FluArea.qml
View File

@ -4,33 +4,28 @@ import QtQuick.Window
import FluentUI import FluentUI
Rectangle { Rectangle {
default property alias content: container.data default property alias content: container.data
property int paddings : 0 property int paddings : 0
property int leftPadding : 0 property int leftPadding : 0
property int rightPadding : 0 property int rightPadding : 0
property int topPadding : 0 property int topPadding : 0
property int bottomPadding : 0 property int bottomPadding : 0
radius: 4 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) color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) border.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 border.width: 1
implicitHeight: height implicitHeight: height
implicitWidth: width implicitWidth: width
Behavior on color{ Behavior on color{
ColorAnimation { ColorAnimation {
duration: 300 duration: 300
} }
} }
Behavior on border.color{ Behavior on border.color{
ColorAnimation { ColorAnimation {
duration: 300 duration: 300
} }
} }
Item { Item {
id: container id: container
anchors.fill: parent anchors.fill: parent
@ -39,5 +34,4 @@ Rectangle {
anchors.topMargin: Math.max(paddings,topPadding) anchors.topMargin: Math.max(paddings,topPadding)
anchors.bottomMargin: Math.max(paddings,bottomPadding) anchors.bottomMargin: Math.max(paddings,bottomPadding)
} }
} }

9
src/imports/FluentUI/Controls/FluAutoSuggestBox.qml
View File

@ -3,25 +3,20 @@ import QtQuick.Controls
import FluentUI import FluentUI
FluTextBox{ FluTextBox{
property var items:[] property var items:[]
property string emptyText: "没有找到结果" property string emptyText: "没有找到结果"
property int autoSuggestBoxReplacement: FluentIcons.Search property int autoSuggestBoxReplacement: FluentIcons.Search
signal itemClicked(var data) signal itemClicked(var data)
signal handleClicked signal handleClicked
id:control id:control
width: 300 width: 300
Component.onCompleted: { Component.onCompleted: {
loadData() loadData()
} }
QtObject{ QtObject{
id:d id:d
property bool flagVisible: true property bool flagVisible: true
} }
Popup{ Popup{
id:control_popup id:control_popup
y:control.height y:control.height
@ -126,19 +121,16 @@ FluTextBox{
control_popup.visible = true control_popup.visible = true
} }
} }
function handleClick(modelData){ function handleClick(modelData){
control_popup.visible = false control_popup.visible = false
control.itemClicked(modelData) control.itemClicked(modelData)
updateText(modelData.title) updateText(modelData.title)
} }
function updateText(text){ function updateText(text){
d.flagVisible = false d.flagVisible = false
control.text = text control.text = text
d.flagVisible = true d.flagVisible = true
} }
function loadData(){ function loadData(){
var result = [] var result = []
if(items==null){ if(items==null){
@ -152,5 +144,4 @@ FluTextBox{
}) })
list_view.model = result list_view.model = result
} }
} }

6
src/imports/FluentUI/Controls/FluBadge.qml
View File

@ -3,11 +3,9 @@ import QtQuick.Controls
import FluentUI import FluentUI
Rectangle{ Rectangle{
property bool isDot: false property bool isDot: false
property bool showZero: true property bool showZero: true
property int count: 0 property int count: 0
id:control id:control
color:Qt.rgba(255/255,77/255,79/255,1) color:Qt.rgba(255/255,77/255,79/255,1)
width: { width: {
@ -61,7 +59,6 @@ Rectangle{
return -10 return -10
} }
} }
Text{ Text{
anchors.centerIn: parent anchors.centerIn: parent
color: Qt.rgba(1,1,1,1) color: Qt.rgba(1,1,1,1)
@ -72,7 +69,4 @@ Rectangle{
return count+"+" return count+"+"
} }
} }
} }

8
src/imports/FluentUI/Controls/FluBreadcrumbBar.qml
View File

@ -4,26 +4,21 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Item { Item {
property int textSize: 15 property int textSize: 15
property string separator: "/" property string separator: "/"
property var items: [] property var items: []
property int spacing: 5 property int spacing: 5
signal clickItem(var model) signal clickItem(var model)
id:control id:control
implicitWidth: 300 implicitWidth: 300
height: 30 height: 30
onItemsChanged: { onItemsChanged: {
list_model.clear() list_model.clear()
list_model.append(items) list_model.append(items)
} }
ListModel{ ListModel{
id:list_model id:list_model
} }
ListView{ ListView{
id:list_view id:list_view
width: parent.width width: parent.width
@ -88,13 +83,10 @@ Item {
} }
} }
} }
function remove(index,count){ function remove(index,count){
list_model.remove(index,count) list_model.remove(index,count)
} }
function count(){ function count(){
return list_model.count return list_model.count
} }
} }

2
src/imports/FluentUI/Controls/FluButton.qml
View File

@ -4,12 +4,10 @@ import QtQuick.Controls.Basic
import FluentUI import FluentUI
Button { Button {
property bool disabled: false 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 normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
id: control id: control
enabled: !disabled enabled: !disabled
focusPolicy:Qt.TabFocus focusPolicy:Qt.TabFocus

9
src/imports/FluentUI/Controls/FluCalendarPicker.qml
View File

@ -5,13 +5,11 @@ import QtQuick.Window
import FluentUI import FluentUI
Rectangle { 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 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 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 color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property string text: "请选择日期" property string text: "请选择日期"
property var window : Window.window property var window : Window.window
id:control id:control
color: { color: {
if(mouse_area.containsMouse){ if(mouse_area.containsMouse){
@ -24,7 +22,6 @@ Rectangle {
radius: 4 radius: 4
border.width: 1 border.width: 1
border.color: dividerColor border.color: dividerColor
MouseArea{ MouseArea{
id:mouse_area id:mouse_area
hoverEnabled: true hoverEnabled: true
@ -33,7 +30,6 @@ Rectangle {
popup.showPopup() popup.showPopup()
} }
} }
FluText{ FluText{
id:text_date id:text_date
anchors{ anchors{
@ -47,7 +43,6 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text:control.text text:control.text
} }
FluIcon{ FluIcon{
iconSource: FluentIcons.Calendar iconSource: FluentIcons.Calendar
iconSize: 14 iconSize: 14
@ -58,8 +53,6 @@ Rectangle {
rightMargin: 12 rightMargin: 12
} }
} }
Menu{ Menu{
id:popup id:popup
height: container.height height: container.height
@ -75,7 +68,6 @@ Rectangle {
duration: 83 duration: 83
} }
} }
exit:Transition { exit:Transition {
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
@ -84,7 +76,6 @@ Rectangle {
duration: 83 duration: 83
} }
} }
contentItem: Item{ contentItem: Item{
clip: true clip: true
FluCalendarView{ FluCalendarView{

31
src/imports/FluentUI/Controls/FluCalendarView.qml
View File

@ -3,27 +3,22 @@ import QtQuick.Controls
import FluentUI import FluentUI
Item { Item {
enum DisplayMode { enum DisplayMode {
Month, Month,
Year, Year,
Decade Decade
} }
property int displayMode: FluCalendarView.Month property int displayMode: FluCalendarView.Month
property var date: new Date() property var date: new Date()
property var currentDate : new Date() property var currentDate : new Date()
property var toDay: new Date() property var toDay: new Date()
signal dateClicked(var date) signal dateClicked(var date)
id:control id:control
width: 280 width: 280
height: 325 height: 325
Component.onCompleted: { Component.onCompleted: {
updateMouth(date) updateMouth(date)
} }
Component{ Component{
id:com_week id:com_week
Item{ Item{
@ -35,7 +30,6 @@ Item {
} }
} }
} }
Component{ Component{
id:com_year id:com_year
Button{ Button{
@ -94,7 +88,6 @@ Item {
contentItem: Item{} contentItem: Item{}
} }
} }
Component{ Component{
id:com_month id:com_month
Button{ Button{
@ -154,8 +147,6 @@ Item {
contentItem: Item{} contentItem: Item{}
} }
} }
Component{ Component{
id:com_day id:com_day
Button{ Button{
@ -189,7 +180,6 @@ Item {
} }
} }
} }
Rectangle{ Rectangle{
id:backgound_today id:backgound_today
anchors.centerIn: parent anchors.centerIn: parent
@ -201,7 +191,6 @@ Item {
border.color: FluTheme.primaryColor.dark border.color: FluTheme.primaryColor.dark
border.width: 1 border.width: 1
} }
Rectangle{ Rectangle{
id:backgound_selected id:backgound_selected
anchors.centerIn: parent anchors.centerIn: parent
@ -211,7 +200,6 @@ Item {
visible: isToDay visible: isToDay
color: FluTheme.primaryColor.dark color: FluTheme.primaryColor.dark
} }
FluText{ FluText{
text:date.getDate() text:date.getDate()
anchors.centerIn: parent anchors.centerIn: parent
@ -229,15 +217,12 @@ Item {
contentItem: Item{} contentItem: Item{}
} }
} }
FluArea{ FluArea{
anchors.fill: parent anchors.fill: parent
radius: 5 radius: 5
FluShadow{ FluShadow{
radius: 5 radius: 5
} }
Rectangle{ Rectangle{
id:layout_divider id:layout_divider
height: 1 height: 1
@ -248,7 +233,6 @@ Item {
topMargin: 44 topMargin: 44
} }
} }
Item{ Item{
id:layout_top id:layout_top
anchors{ anchors{
@ -257,7 +241,6 @@ Item {
top: parent.top top: parent.top
bottom: layout_divider.top bottom: layout_divider.top
} }
FluTextButton{ FluTextButton{
id:title id:title
leftPadding: 0 leftPadding: 0
@ -278,7 +261,6 @@ Item {
} }
} }
} }
FluIconButton{ FluIconButton{
id:icon_up id:icon_up
iconSource: FluentIcons.CaretUpSolid8 iconSource: FluentIcons.CaretUpSolid8
@ -309,7 +291,6 @@ Item {
} }
} }
} }
FluIconButton{ FluIconButton{
id:icon_down id:icon_down
iconSource: FluentIcons.CaretDownSolid8 iconSource: FluentIcons.CaretDownSolid8
@ -341,11 +322,9 @@ Item {
} }
} }
} }
ListModel { ListModel {
id:list_model id:list_model
} }
Item{ Item{
id:layout_bottom id:layout_bottom
anchors{ anchors{
@ -354,7 +333,6 @@ Item {
top: layout_divider.bottom top: layout_divider.bottom
bottom: parent.bottom bottom: parent.bottom
} }
GridView{ GridView{
model: list_model model: list_model
anchors.fill: parent anchors.fill: parent
@ -388,23 +366,18 @@ Item {
} }
} }
} }
function createItemWeek(name){ function createItemWeek(name){
return {type:0,date:new Date(),name:name,isDecade:false} return {type:0,date:new Date(),name:name,isDecade:false}
} }
function createItemDay(date){ function createItemDay(date){
return {type:1,date:date,name:"",isDecade:false} return {type:1,date:date,name:"",isDecade:false}
} }
function createItemMonth(date){ function createItemMonth(date){
return {type:2,date:date,name:"",isDecade:false} return {type:2,date:date,name:"",isDecade:false}
} }
function createItemYear(date,isDecade){ function createItemYear(date,isDecade){
return {type:3,date:date,name:"",isDecade:isDecade} return {type:3,date:date,name:"",isDecade:isDecade}
} }
function updateDecade(date){ function updateDecade(date){
list_model.clear() list_model.clear()
var year = date.getFullYear() var year = date.getFullYear()
@ -417,7 +390,6 @@ Item {
} }
title.text = decadeStart+"-"+(decadeStart+10) title.text = decadeStart+"-"+(decadeStart+10)
} }
function updateYear(date){ function updateYear(date){
list_model.clear() list_model.clear()
var year = date.getFullYear() var year = date.getFullYear()
@ -429,7 +401,6 @@ Item {
} }
title.text = year+"年" title.text = year+"年"
} }
function updateMouth(date){ function updateMouth(date){
list_model.clear() list_model.clear()
list_model.append([createItemWeek("一"),createItemWeek("二"),createItemWeek("三"),createItemWeek("四"),createItemWeek("五"),createItemWeek("六"),createItemWeek("日")]) list_model.append([createItemWeek("一"),createItemWeek("二"),createItemWeek("三"),createItemWeek("四"),createItemWeek("五"),createItemWeek("六"),createItemWeek("日")])
@ -468,6 +439,4 @@ Item {
} }
title.text = year+"年"+(month+1)+"月" title.text = year+"年"+(month+1)+"月"
} }
} }

20
src/imports/FluentUI/Controls/FluCarousel.qml
View File

@ -3,20 +3,16 @@ import QtQuick.Controls
import FluentUI import FluentUI
Item { Item {
property bool flagXChanged: true property bool flagXChanged: true
property int radius : 5 property int radius : 5
property int loopTime: 2000 property int loopTime: 2000
property bool showIndicator: true property bool showIndicator: true
id:control id:control
width: 400 width: 400
height: 300 height: 300
ListModel{ ListModel{
id:content_model id:content_model
} }
FluRectangle{ FluRectangle{
anchors.fill: parent anchors.fill: parent
radius: [control.radius,control.radius,control.radius,control.radius] radius: [control.radius,control.radius,control.radius,control.radius]
@ -80,14 +76,6 @@ Item {
} }
} }
} }
function setData(data){
content_model.clear()
content_model.append(data[data.length-1])
content_model.append(data)
content_model.append(data[0])
list_view.currentIndex = 1
timer_run.restart()
}
Row{ Row{
spacing: 10 spacing: 10
anchors{ anchors{
@ -133,4 +121,12 @@ Item {
timer_anim.start() timer_anim.start()
} }
} }
function setData(data){
content_model.clear()
content_model.append(data[data.length-1])
content_model.append(data)
content_model.append(data[0])
list_view.currentIndex = 1
timer_run.restart()
}
} }

3
src/imports/FluentUI/Controls/FluCheckBox.qml
View File

@ -5,7 +5,6 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Button { Button {
property bool selected: false property bool selected: false
property var clickFunc property var clickFunc
property bool disabled: false property bool disabled: false
@ -14,7 +13,6 @@ Button {
property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1) property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1) property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color borderPressedColor: FluTheme.dark ? Qt.rgba(90/255,90/255,90/255,1) : Qt.rgba(191/255,191/255,191/255,1) property color borderPressedColor: FluTheme.dark ? Qt.rgba(90/255,90/255,90/255,1) : Qt.rgba(191/255,191/255,191/255,1)
property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1) property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
property color selectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color selectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(236/255,236/255,236/255,1) property color hoverColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(236/255,236/255,236/255,1)
@ -22,7 +20,6 @@ Button {
property color selectedPreesedColor: FluTheme.dark ? Qt.darker(selectedColor,1.3) : Qt.lighter(selectedColor,1.3) property color selectedPreesedColor: FluTheme.dark ? Qt.darker(selectedColor,1.3) : Qt.lighter(selectedColor,1.3)
property color selectedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1) property color selectedDisableColor: 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 color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
id:control id:control
enabled: !disabled enabled: !disabled
focusPolicy:Qt.TabFocus focusPolicy:Qt.TabFocus

1
src/imports/FluentUI/Controls/FluColorPicker.qml
View File

@ -75,5 +75,4 @@ Button{
popup.open() popup.open()
} }
} }
} }

7
src/imports/FluentUI/Controls/FluColorView.qml
View File

@ -4,28 +4,21 @@ import FluentUI
import "ColorPicker" import "ColorPicker"
Item { Item {
property alias colorValue: color_picker.colorValue property alias colorValue: color_picker.colorValue
width: color_picker.width+10 width: color_picker.width+10
height: color_picker.height height: color_picker.height
FluArea{ FluArea{
anchors.fill: parent anchors.fill: parent
radius: 5 radius: 5
FluShadow{ FluShadow{
radius: 5 radius: 5
} }
ColorPicker{ ColorPicker{
id:color_picker id:color_picker
} }
} }
function setColor(color) { function setColor(color) {
color_picker.setColor(color) color_picker.setColor(color)
} }
} }

9
src/imports/FluentUI/Controls/FluContentDialog.qml
View File

@ -6,7 +6,6 @@ import FluentUI
Popup { Popup {
id: popup id: popup
property string title: "Title" property string title: "Title"
property string message: "Message" property string message: "Message"
property string neutralText: "Neutral" property string neutralText: "Neutral"
@ -30,7 +29,6 @@ Popup {
anchors.centerIn: Overlay.overlay anchors.centerIn: Overlay.overlay
closePolicy: Popup.CloseOnEscape closePolicy: Popup.CloseOnEscape
background:Item{} background:Item{}
enter: Transition { enter: Transition {
reversible: true reversible: true
NumberAnimation { NumberAnimation {
@ -58,11 +56,9 @@ Popup {
implicitHeight: text_title.height + text_message.height + layout_actions.height implicitHeight: text_title.height + text_message.height + layout_actions.height
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1) color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1)
radius:5 radius:5
FluShadow{ FluShadow{
radius: 5 radius: 5
} }
FluText{ FluText{
id:text_title id:text_title
font: FluTextStyle.TitleLarge font: FluTextStyle.TitleLarge
@ -77,7 +73,6 @@ Popup {
right: parent.right right: parent.right
} }
} }
FluText{ FluText{
id:text_message id:text_message
font: FluTextStyle.Body font: FluTextStyle.Body
@ -93,7 +88,6 @@ Popup {
right: parent.right right: parent.right
} }
} }
Rectangle{ Rectangle{
id:layout_actions id:layout_actions
height: 68 height: 68
@ -104,7 +98,6 @@ Popup {
left: parent.left left: parent.left
right: parent.right right: parent.right
} }
RowLayout{ RowLayout{
anchors anchors
{ {
@ -124,7 +117,6 @@ Popup {
neutralClicked() neutralClicked()
} }
} }
FluButton{ FluButton{
id:negative_btn id:negative_btn
Layout.fillWidth: true Layout.fillWidth: true
@ -136,7 +128,6 @@ Popup {
negativeClicked() negativeClicked()
} }
} }
FluFilledButton{ FluFilledButton{
id:positive_btn id:positive_btn
Layout.fillWidth: true Layout.fillWidth: true

5
src/imports/FluentUI/Controls/FluContentPage.qml
View File

@ -5,7 +5,6 @@ import QtQuick.Controls
import FluentUI import FluentUI
Item { Item {
property alias title: text_title.text property alias title: text_title.text
default property alias content: container.data default property alias content: container.data
property int leftPadding: 0 property int leftPadding: 0
@ -14,9 +13,7 @@ Item {
property int bottomPadding: 0 property int bottomPadding: 0
property int pageMode: FluNavigationView.Standard property int pageMode: FluNavigationView.Standard
property string url: '' property string url: ''
id:control id:control
FluText{ FluText{
id:text_title id:text_title
font: FluTextStyle.TitleLarge font: FluTextStyle.TitleLarge
@ -29,7 +26,6 @@ Item {
rightMargin: control.rightPadding rightMargin: control.rightPadding
} }
} }
Item{ Item{
clip: true clip: true
id:container id:container
@ -43,5 +39,4 @@ Item {
bottomMargin: control.bottomPadding bottomMargin: control.bottomPadding
} }
} }
} }

3
src/imports/FluentUI/Controls/FluCopyableText.qml
View File

@ -3,9 +3,7 @@ import QtQuick.Controls
import FluentUI import FluentUI
TextField { TextField {
property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220 property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220
id:control id:control
color: textColor color: textColor
readOnly: true readOnly: true
@ -34,5 +32,4 @@ TextField {
id:menu id:menu
inputItem: control inputItem: control
} }
} }

36
src/imports/FluentUI/Controls/FluDatePicker.qml
View File

@ -5,7 +5,6 @@ import QtQuick.Window
import FluentUI import FluentUI
Rectangle { 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 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 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 color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
@ -13,7 +12,6 @@ Rectangle {
property bool showYear: true property bool showYear: true
property bool changeFlag: true property bool changeFlag: true
readonly property var rowData: ["","",""] readonly property var rowData: ["","",""]
id:root id:root
color: { color: {
if(mouse_area.containsMouse){ if(mouse_area.containsMouse){
@ -26,7 +24,6 @@ Rectangle {
radius: 4 radius: 4
border.width: 1 border.width: 1
border.color: dividerColor border.color: dividerColor
MouseArea{ MouseArea{
id:mouse_area id:mouse_area
hoverEnabled: true hoverEnabled: true
@ -35,7 +32,6 @@ Rectangle {
popup.showPopup() popup.showPopup()
} }
} }
Rectangle{ Rectangle{
id:divider_1 id:divider_1
width: 1 width: 1
@ -44,8 +40,6 @@ Rectangle {
color: dividerColor color: dividerColor
visible: showYear visible: showYear
} }
Rectangle{ Rectangle{
id:divider_2 id:divider_2
width: 1 width: 1
@ -53,7 +47,6 @@ Rectangle {
height: parent.height height: parent.height
color: dividerColor color: dividerColor
} }
FluText{ FluText{
id:text_year id:text_year
anchors{ anchors{
@ -67,8 +60,6 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text:"年" text:"年"
} }
FluText{ FluText{
id:text_month id:text_month
anchors{ anchors{
@ -81,8 +72,6 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text:"月" text:"月"
} }
FluText{ FluText{
id:text_day id:text_day
anchors{ anchors{
@ -95,7 +84,6 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text:"日" text:"日"
} }
Menu{ Menu{
id:popup id:popup
modal: true modal: true
@ -111,7 +99,6 @@ Rectangle {
duration: 83 duration: 83
} }
} }
exit:Transition { exit:Transition {
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
@ -139,20 +126,16 @@ Rectangle {
FluShadow{ FluShadow{
radius: 4 radius: 4
} }
RowLayout{ RowLayout{
id:layout_content id:layout_content
spacing: 0 spacing: 0
width: parent.width width: parent.width
height: 300 height: 300
Component{ Component{
id:list_delegate id:list_delegate
Item{ Item{
height:38 height:38
width:getListView().width width:getListView().width
function getListView(){ function getListView(){
if(type === 0) if(type === 0)
return list_view_1 return list_view_1
@ -161,8 +144,6 @@ Rectangle {
if(type === 2) if(type === 2)
return list_view_3 return list_view_3
} }
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 2 anchors.topMargin: 2
@ -226,7 +207,6 @@ Rectangle {
} }
} }
} }
ListView{ ListView{
id:list_view_1 id:list_view_1
width: 100 width: 100
@ -292,14 +272,12 @@ Rectangle {
} }
} }
} }
Rectangle{ Rectangle{
width: parent.width width: parent.width
height: 1 height: 1
anchors.top: layout_content.bottom anchors.top: layout_content.bottom
color: dividerColor color: dividerColor
} }
Rectangle{ Rectangle{
id:layout_actions id:layout_actions
height: 40 height: 40
@ -310,14 +288,12 @@ Rectangle {
left: parent.left left: parent.left
right: parent.right right: parent.right
} }
Item { Item {
id:divider id:divider
width: 1 width: 1
height: parent.height height: parent.height
anchors.centerIn: parent anchors.centerIn: parent
} }
FluButton{ FluButton{
anchors{ anchors{
left: parent.left left: parent.left
@ -331,7 +307,6 @@ Rectangle {
popup.close() popup.close()
} }
} }
FluFilledButton{ FluFilledButton{
anchors{ anchors{
right: parent.right right: parent.right
@ -355,23 +330,18 @@ Rectangle {
rowData[0] = text_year.text rowData[0] = text_year.text
rowData[1] = text_month.text rowData[1] = text_month.text
rowData[2] = text_day.text rowData[2] = text_day.text
const now = new Date(); const now = new Date();
var year = text_year.text === "年"? now.getFullYear() : Number(text_year.text); var year = text_year.text === "年"? now.getFullYear() : Number(text_year.text);
var month = text_month.text === "月"? now.getMonth() + 1 : Number(text_month.text); var month = text_month.text === "月"? now.getMonth() + 1 : Number(text_month.text);
var day = text_day.text === "日" ? now.getDate() : Number(text_day.text); var day = text_day.text === "日" ? now.getDate() : Number(text_day.text);
list_view_1.currentIndex = list_view_1.model.indexOf(year) list_view_1.currentIndex = list_view_1.model.indexOf(year)
text_year.text = year text_year.text = year
list_view_2.model = generateMonthArray(1,12) list_view_2.model = generateMonthArray(1,12)
list_view_2.currentIndex = list_view_2.model.indexOf(month) list_view_2.currentIndex = list_view_2.model.indexOf(month)
text_month.text = month text_month.text = month
list_view_3.model = generateMonthDaysArray(year,month) list_view_3.model = generateMonthDaysArray(year,month)
list_view_3.currentIndex = list_view_3.model.indexOf(day) list_view_3.currentIndex = list_view_3.model.indexOf(day)
text_day.text = day text_day.text = day
var pos = root.mapToItem(null, 0, 0) var pos = root.mapToItem(null, 0, 0)
if(window.height>pos.y+root.height+container.height){ if(window.height>pos.y+root.height+container.height){
popup.y = root.height popup.y = root.height
@ -382,7 +352,6 @@ Rectangle {
} }
popup.open() popup.open()
} }
onClosed: { onClosed: {
if(changeFlag){ if(changeFlag){
text_year.text = rowData[0] text_year.text = rowData[0]
@ -391,7 +360,6 @@ Rectangle {
} }
} }
} }
function generateYearArray(startYear, endYear) { function generateYearArray(startYear, endYear) {
const yearArray = []; const yearArray = [];
for (let year = startYear; year <= endYear; year++) { for (let year = startYear; year <= endYear; year++) {
@ -399,7 +367,6 @@ Rectangle {
} }
return yearArray; return yearArray;
} }
function generateMonthArray(startMonth, endMonth) { function generateMonthArray(startMonth, endMonth) {
const monthArray = []; const monthArray = [];
for (let month = startMonth; month <= endMonth; month++) { for (let month = startMonth; month <= endMonth; month++) {
@ -407,7 +374,6 @@ Rectangle {
} }
return monthArray; return monthArray;
} }
function generateMonthDaysArray(year, month) { function generateMonthDaysArray(year, month) {
const monthDaysArray = []; const monthDaysArray = [];
const lastDayOfMonth = new Date(year, month, 0).getDate(); const lastDayOfMonth = new Date(year, month, 0).getDate();
@ -416,6 +382,4 @@ Rectangle {
} }
return monthDaysArray; return monthDaysArray;
} }
} }

3
src/imports/FluentUI/Controls/FluDivider.qml
View File

@ -3,13 +3,10 @@ import QtQuick.Window
import FluentUI import FluentUI
Rectangle { 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 ? 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)
Behavior on color{ Behavior on color{
ColorAnimation { ColorAnimation {
duration: 300 duration: 300
} }
} }
} }

6
src/imports/FluentUI/Controls/FluDropDownButton.qml
View File

@ -5,14 +5,12 @@ import QtQuick.Window
import FluentUI import FluentUI
Button { Button {
property bool disabled: false 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 normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
property var window : Window.window property var window : Window.window
property alias items: menu.content property alias items: menu.content
id: control id: control
rightPadding:35 rightPadding:35
enabled: !disabled enabled: !disabled
@ -45,7 +43,6 @@ Button {
} }
iconColor:title.color iconColor:title.color
} }
} }
contentItem: FluText { contentItem: FluText {
id:title id:title
@ -72,7 +69,6 @@ Button {
} }
} }
} }
onClicked: { onClicked: {
if(items && menu.getContainerCount()!==0){ if(items && menu.getContainerCount()!==0){
var pos = control.mapToItem(null, 0, 0) var pos = control.mapToItem(null, 0, 0)
@ -87,10 +83,8 @@ Button {
menu.open() menu.open()
} }
} }
FluMenu{ FluMenu{
id:menu id:menu
width: control.width width: control.width
} }
} }

17
src/imports/FluentUI/Controls/FluExpander.qml
View File

@ -4,18 +4,15 @@ import QtQuick.Window
import FluentUI import FluentUI
Item { Item {
property string headerText: "Titlte" property string headerText: "Titlte"
property bool expand: false property bool expand: false
property int contentHeight : 300 property int contentHeight : 300
default property alias content: container.data default property alias content: container.data
id:control
id:root
height: layout_header.height + container.height height: layout_header.height + container.height
width: 400 width: 400
implicitWidth: width implicitWidth: width
implicitHeight: height implicitHeight: height
Rectangle{ Rectangle{
id:layout_header id:layout_header
width: parent.width width: parent.width
@ -23,28 +20,24 @@ Item {
radius: 4 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) color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) border.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{ Behavior on color{
ColorAnimation { ColorAnimation {
duration: 300 duration: 300
} }
} }
Behavior on border.color{ Behavior on border.color{
ColorAnimation { ColorAnimation {
duration: 300 duration: 300
} }
} }
MouseArea{ MouseArea{
id:root_mouse id:control_mouse
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: { onClicked: {
expand = !expand expand = !expand
} }
} }
FluText{ FluText{
text: headerText text: headerText
anchors{ anchors{
@ -53,7 +46,6 @@ Item {
leftMargin: 15 leftMargin: 15
} }
} }
FluIconButton{ FluIconButton{
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
@ -61,7 +53,7 @@ Item {
rightMargin: 15 rightMargin: 15
} }
color:{ color:{
if(root_mouse.containsMouse || hovered){ if(control_mouse.containsMouse || hovered){
return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1) return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
} }
return FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0) return FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
@ -81,8 +73,6 @@ Item {
} }
} }
} }
Rectangle{ Rectangle{
id:container id:container
width: parent.width width: parent.width
@ -104,5 +94,4 @@ Item {
} }
} }
} }
} }

2
src/imports/FluentUI/Controls/FluFilledButton.qml
View File

@ -4,13 +4,11 @@ import QtQuick.Controls.Basic
import FluentUI import FluentUI
Button { Button {
property bool disabled: false property bool disabled: false
property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1) property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
property color disableColor: 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(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2) property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
id: control id: control
enabled: !disabled enabled: !disabled
Keys.onSpacePressed: control.visualFocus&&clicked() Keys.onSpacePressed: control.visualFocus&&clicked()

10
src/imports/FluentUI/Controls/FluFlipView.qml
View File

@ -4,22 +4,18 @@ import QtQuick.Controls.Basic
import FluentUI import FluentUI
Item{ Item{
property bool vertical: false property bool vertical: false
default property alias content : swipe.contentData default property alias content : swipe.contentData
property alias currentIndex: swipe.currentIndex property alias currentIndex: swipe.currentIndex
id:control id:control
width: 400 width: 400
height: 300 height: 300
implicitWidth: width implicitWidth: width
implicitHeight: height implicitHeight: height
QtObject{ QtObject{
id:d id:d
property bool flag: true property bool flag: true
} }
MouseArea{ MouseArea{
anchors.fill: parent anchors.fill: parent
preventStealing: true preventStealing: true
@ -36,7 +32,6 @@ Item{
timer.restart() timer.restart()
} }
} }
Timer{ Timer{
id:timer id:timer
interval: 250 interval: 250
@ -44,7 +39,6 @@ Item{
d.flag = true d.flag = true
} }
} }
SwipeView { SwipeView {
id:swipe id:swipe
clip: true clip: true
@ -52,7 +46,6 @@ Item{
orientation:control.vertical ? Qt.Vertical : Qt.Horizontal orientation:control.vertical ? Qt.Vertical : Qt.Horizontal
anchors.fill: parent anchors.fill: parent
} }
Button{ Button{
id:btn_start id:btn_start
height: vertical ? 20 : 40 height: vertical ? 20 : 40
@ -82,7 +75,6 @@ Item{
swipe.currentIndex = Math.max(swipe.currentIndex - 1, 0) swipe.currentIndex = Math.max(swipe.currentIndex - 1, 0)
} }
} }
Button{ Button{
id:btn_end id:btn_end
height: vertical ? 20 : 40 height: vertical ? 20 : 40
@ -112,6 +104,4 @@ Item{
swipe.currentIndex = Math.min(swipe.currentIndex + 1,swipe.count-1) swipe.currentIndex = Math.min(swipe.currentIndex + 1,swipe.count-1)
} }
} }
} }

3
src/imports/FluentUI/Controls/FluFocusRectangle.qml
View File

@ -3,9 +3,7 @@ import QtQuick.Controls
import FluentUI import FluentUI
Item { Item {
property int radius: 4 property int radius: 4
id:root id:root
anchors.fill: parent anchors.fill: parent
anchors.margins: -3 anchors.margins: -3
@ -19,5 +17,4 @@ Item {
border.color: FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1) border.color: FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
z: 65535 z: 65535
} }
} }

4
src/imports/FluentUI/Controls/FluIcon.qml
View File

@ -3,16 +3,14 @@ import QtQuick.Controls
import FluentUI import FluentUI
Text { Text {
property int iconSource property int iconSource
property int iconSize: 20 property int iconSize: 20
property color iconColor: FluTheme.dark ? "#FFFFFF" : "#000000" property color iconColor: FluTheme.dark ? "#FFFFFF" : "#000000"
id:text_icon id:text_icon
font.family: "Segoe Fluent Icons" font.family: "Segoe Fluent Icons"
font.pixelSize: iconSize font.pixelSize: iconSize
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: iconColor color: iconColor
text: (String.fromCharCode(iconSource).toString(16)); text: (String.fromCharCode(iconSource).toString(16))
} }

2
src/imports/FluentUI/Controls/FluIconButton.qml
View File

@ -4,7 +4,6 @@ import QtQuick.Controls.Basic
import FluentUI import FluentUI
Button { Button {
property int iconSize: 20 property int iconSize: 20
property int iconSource property int iconSource
property bool disabled: false property bool disabled: false
@ -35,7 +34,6 @@ Button {
return Qt.rgba(0,0,0,1) return Qt.rgba(0,0,0,1)
} }
} }
id:control id:control
width: 30 width: 30
height: 30 height: 30

34
src/imports/FluentUI/Controls/FluInfoBar.qml
View File

@ -3,21 +3,17 @@ import QtQuick.Controls
import FluentUI import FluentUI
FluObject { FluObject {
id:infoBar
property var root; property var root;
property int layoutY: 75; property int layoutY: 75
id:control
FluObject{ FluObject{
id:mcontrol id:mcontrol
property string const_success: "success"; property string const_success: "success";
property string const_info: "info"; property string const_info: "info";
property string const_warning: "warning"; property string const_warning: "warning";
property string const_error: "error"; property string const_error: "error";
property int maxWidth: 300; property int maxWidth: 300;
property var screenLayout: null; property var screenLayout: null;
function create(type,text,duration,moremsg){ function create(type,text,duration,moremsg){
if(screenLayout){ if(screenLayout){
var last = screenLayout.getLastloader(); var last = screenLayout.getLastloader();
@ -26,7 +22,6 @@ FluObject {
return; return;
} }
} }
initScreenLayout(); initScreenLayout();
contentComponent.createObject(screenLayout,{ contentComponent.createObject(screenLayout,{
type:type, type:type,
@ -35,22 +30,19 @@ FluObject {
moremsg:moremsg, moremsg:moremsg,
}); });
} }
function createCustom(itemcomponent,duration){ function createCustom(itemcomponent,duration){
initScreenLayout(); initScreenLayout();
if(itemcomponent){ if(itemcomponent){
contentComponent.createObject(screenLayout,{itemcomponent:itemcomponent,duration:duration}); contentComponent.createObject(screenLayout,{itemcomponent:itemcomponent,duration:duration});
} }
} }
function initScreenLayout(){ function initScreenLayout(){
if(screenLayout == null){ if(screenLayout == null){
screenLayout = screenlayoutComponent.createObject(root); screenLayout = screenlayoutComponent.createObject(root);
screenLayout.y = infoBar.layoutY; screenLayout.y = control.layoutY;
screenLayout.z = 100000; screenLayout.z = 100000;
} }
} }
Component{ Component{
id:screenlayoutComponent id:screenlayoutComponent
Column{ Column{
@ -59,9 +51,7 @@ FluObject {
move: Transition { move: Transition {
NumberAnimation { properties: "y"; easing.type: Easing.OutBack; duration: 300 } NumberAnimation { properties: "y"; easing.type: Easing.OutBack; duration: 300 }
} }
onChildrenChanged: if(children.length === 0) destroy(); onChildrenChanged: if(children.length === 0) destroy();
function getLastloader(){ function getLastloader(){
if(children.length > 0){ if(children.length > 0){
return children[children.length - 1]; return children[children.length - 1];
@ -70,7 +60,6 @@ FluObject {
} }
} }
} }
Component{ Component{
id:contentComponent id:contentComponent
Item{ Item{
@ -80,45 +69,35 @@ FluObject {
property string type property string type
property string text property string text
property string moremsg property string moremsg
width: parent.width; width: parent.width;
height: loader.height; height: loader.height;
function close(){ function close(){
content.destroy(); content.destroy();
} }
function restart(){ function restart(){
delayTimer.restart(); delayTimer.restart();
} }
Timer { Timer {
id:delayTimer id:delayTimer
interval: duration; running: true; repeat: true interval: duration; running: true; repeat: true
onTriggered: content.close(); onTriggered: content.close();
} }
Loader{ Loader{
id:loader; id:loader;
x:(parent.width - width) / 2; x:(parent.width - width) / 2;
property var _super: content; property var _super: content;
scale: item ? 1 : 0; scale: item ? 1 : 0;
asynchronous: true asynchronous: true
Behavior on scale { Behavior on scale {
NumberAnimation { NumberAnimation {
easing.type: Easing.OutBack; easing.type: Easing.OutBack;
duration: 100 duration: 100
} }
} }
sourceComponent:itemcomponent ? itemcomponent : mcontrol.fluent_sytle; sourceComponent:itemcomponent ? itemcomponent : mcontrol.fluent_sytle;
} }
} }
} }
property Component fluent_sytle: Rectangle{ property Component fluent_sytle: Rectangle{
width: rowlayout.width + (_super.moremsg ? 25 : 80); width: rowlayout.width + (_super.moremsg ? 25 : 80);
height: rowlayout.height + 20; height: rowlayout.height + 20;
@ -208,26 +187,19 @@ FluObject {
} }
} }
} }
function showSuccess(text,duration=1000,moremsg){ function showSuccess(text,duration=1000,moremsg){
mcontrol.create(mcontrol.const_success,text,duration,moremsg ? moremsg : ""); mcontrol.create(mcontrol.const_success,text,duration,moremsg ? moremsg : "");
} }
function showInfo(text,duration=1000,moremsg){ function showInfo(text,duration=1000,moremsg){
mcontrol.create(mcontrol.const_info,text,duration,moremsg ? moremsg : ""); mcontrol.create(mcontrol.const_info,text,duration,moremsg ? moremsg : "");
} }
function showWarning(text,duration=1000,moremsg){ function showWarning(text,duration=1000,moremsg){
mcontrol.create(mcontrol.const_warning,text,duration,moremsg ? moremsg : ""); mcontrol.create(mcontrol.const_warning,text,duration,moremsg ? moremsg : "");
} }
function showError(text,duration=1000,moremsg){ function showError(text,duration=1000,moremsg){
mcontrol.create(mcontrol.const_error,text,duration,moremsg ? moremsg : ""); mcontrol.create(mcontrol.const_error,text,duration,moremsg ? moremsg : "");
} }
function showCustom(itemcomponent,duration=1000){ function showCustom(itemcomponent,duration=1000){
mcontrol.createCustom(itemcomponent,duration); mcontrol.createCustom(itemcomponent,duration);
} }
} }

9
src/imports/FluentUI/Controls/FluItem.qml
View File

@ -3,29 +3,24 @@ import QtQuick.Controls
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
Item{ Item{
id:control
property var radius:[0,0,0,0] property var radius:[0,0,0,0]
default property alias contentItem: container.data default property alias contentItem: container.data
id:control
Item{ Item{
id:container id:container
width: control.width width: control.width
height: control.height height: control.height
opacity: 0 opacity: 0
} }
onWidthChanged: { onWidthChanged: {
canvas.requestPaint() canvas.requestPaint()
} }
onHeightChanged: { onHeightChanged: {
canvas.requestPaint() canvas.requestPaint()
} }
onRadiusChanged: { onRadiusChanged: {
canvas.requestPaint() canvas.requestPaint()
} }
Canvas { Canvas {
id: canvas id: canvas
anchors.fill: parent anchors.fill: parent
@ -55,11 +50,9 @@ Item{
ctx.restore(); ctx.restore();
} }
} }
OpacityMask { OpacityMask {
anchors.fill: container anchors.fill: container
source: container source: container
maskSource: canvas maskSource: canvas
} }
} }

18
src/imports/FluentUI/Controls/FluMediaPlayer.qml
View File

@ -4,17 +4,14 @@ import QtMultimedia
import FluentUI import FluentUI
Rectangle { Rectangle {
property url source property url source
property bool showControl: false property bool showControl: false
property real volume: 30 property real volume: 30
id:control id:control
width: 480 width: 480
height: 270 height: 270
color: FluColors.Black color: FluColors.Black
clip: true clip: true
MouseArea{ MouseArea{
anchors.fill: parent anchors.fill: parent
preventStealing: true preventStealing: true
@ -22,7 +19,6 @@ Rectangle {
showControl = !showControl showControl = !showControl
} }
} }
MediaPlayer { MediaPlayer {
id: mediaplayer id: mediaplayer
property bool autoSeek:true property bool autoSeek:true
@ -49,16 +45,13 @@ Rectangle {
} }
} }
} }
onSourceChanged: { onSourceChanged: {
slider.seek(0) slider.seek(0)
} }
VideoOutput { VideoOutput {
id:video_output id:video_output
anchors.fill: parent anchors.fill: parent
} }
Item{ Item{
height: 100 height: 100
y:showControl ? control.height - 110 : control.height y:showControl ? control.height - 110 : control.height
@ -110,7 +103,6 @@ Rectangle {
mediaplayer.position = val*mediaplayer.duration/slider.maxValue mediaplayer.position = val*mediaplayer.duration/slider.maxValue
} }
} }
FluText{ FluText{
id:start_time id:start_time
anchors{ anchors{
@ -120,7 +112,6 @@ Rectangle {
} }
text: formatDuration(slider.value*mediaplayer.duration/slider.maxValue) text: formatDuration(slider.value*mediaplayer.duration/slider.maxValue)
} }
FluText{ FluText{
id:end_time id:end_time
anchors{ anchors{
@ -130,7 +121,6 @@ Rectangle {
} }
text: formatDuration(mediaplayer.duration) text: formatDuration(mediaplayer.duration)
} }
Row{ Row{
spacing: 10 spacing: 10
anchors{ anchors{
@ -164,7 +154,6 @@ Rectangle {
} }
} }
} }
FluIconButton{ FluIconButton{
id:btn_volume id:btn_volume
iconSize: 17 iconSize: 17
@ -179,7 +168,6 @@ Rectangle {
audio_output.muted = !audio_output.muted audio_output.muted = !audio_output.muted
} }
} }
FluSlider{ FluSlider{
id:slider_volume id:slider_volume
size: 80 size: 80
@ -195,7 +183,6 @@ Rectangle {
} }
} }
} }
function formatDuration(duration) { function formatDuration(duration) {
const seconds = Math.floor(duration / 1000); const seconds = Math.floor(duration / 1000);
const hours = Math.floor(seconds / 3600); const hours = Math.floor(seconds / 3600);
@ -203,18 +190,13 @@ Rectangle {
const remainingSeconds = seconds % 60; const remainingSeconds = seconds % 60;
return `${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}`; return `${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}`;
} }
function pad(value) { function pad(value) {
return value.toString().padStart(2, '0'); return value.toString().padStart(2, '0');
} }
function pause(){ function pause(){
mediaplayer.pause() mediaplayer.pause()
} }
function play(){ function play(){
mediaplayer.play() mediaplayer.play()
} }
} }

6
src/imports/FluentUI/Controls/FluMenu.qml
View File

@ -4,7 +4,6 @@ import QtQuick.Controls
import FluentUI import FluentUI
Menu { Menu {
default property alias content: container.data default property alias content: container.data
property bool enableAnimation: true property bool enableAnimation: true
id: popup id: popup
@ -21,7 +20,6 @@ Menu {
duration: enableAnimation ? 83 : 0 duration: enableAnimation ? 83 : 0
} }
} }
exit:Transition { exit:Transition {
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
@ -30,7 +28,6 @@ Menu {
duration: enableAnimation ? 83 : 0 duration: enableAnimation ? 83 : 0
} }
} }
background:Item{ background:Item{
FluShadow{ FluShadow{
radius: 5 radius: 5
@ -56,13 +53,10 @@ Menu {
} }
} }
} }
function getContainerHeight(){ function getContainerHeight(){
return container.height return container.height
} }
function getContainerCount(){ function getContainerCount(){
return container.children.length return container.children.length
} }
} }

5
src/imports/FluentUI/Controls/FluMenuItem.qml
View File

@ -3,11 +3,9 @@ import QtQuick.Controls
import FluentUI import FluentUI
Item { Item {
property string text: "MenuItem" property string text: "MenuItem"
property var onClickFunc property var onClickFunc
signal clicked signal clicked
id:control id:control
width: { width: {
if(control.parent){ if(control.parent){
@ -16,7 +14,6 @@ Item {
return 140 return 140
} }
height: 32 height: 32
Rectangle{ Rectangle{
anchors.centerIn: parent anchors.centerIn: parent
width: control.width-40 width: control.width-40
@ -35,12 +32,10 @@ Item {
return Qt.rgba(0,0,0,0) return Qt.rgba(0,0,0,0)
} }
} }
FluText{ FluText{
text: control.text text: control.text
anchors.centerIn: parent anchors.centerIn: parent
} }
MouseArea{ MouseArea{
id:mouse_area id:mouse_area
hoverEnabled: true hoverEnabled: true

3
src/imports/FluentUI/Controls/FluMultilineTextBox.qml
View File

@ -4,14 +4,12 @@ import QtQuick.Controls.Basic
import FluentUI import FluentUI
TextArea{ TextArea{
property bool disabled: false property bool disabled: false
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
id:control id:control
width: 300 width: 300
enabled: !disabled enabled: !disabled
@ -44,5 +42,4 @@ TextArea{
id:menu id:menu
inputItem: control inputItem: control
} }
} }

33
src/imports/FluentUI/Controls/FluNavigationView.qml
View File

@ -6,14 +6,12 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Item { Item {
enum DisplayMode { enum DisplayMode {
Open, Open,
Compact, Compact,
Minimal, Minimal,
Auto Auto
} }
property url logo property url logo
property string title: "" property string title: ""
property FluObject items property FluObject items
@ -21,15 +19,12 @@ Item {
property int displayMode: FluNavigationView.Auto property int displayMode: FluNavigationView.Auto
property Component autoSuggestBox property Component autoSuggestBox
property Component actionItem property Component actionItem
enum PageModeFlag{ enum PageModeFlag{
Standard = 0, Standard = 0,
SingleTop = 1, SingleTop = 1,
SingleTask = 2 SingleTask = 2
} }
id:control id:control
QtObject{ QtObject{
id:d id:d
property bool enableStack: true property bool enableStack: true
@ -52,11 +47,9 @@ Item {
property bool isCompactAndPanel: d.displayMode === FluNavigationView.Compact && d.enableNavigationPanel property bool isCompactAndPanel: d.displayMode === FluNavigationView.Compact && d.enableNavigationPanel
property bool isCompactAndNotPanel:d.displayMode === FluNavigationView.Compact && !d.enableNavigationPanel property bool isCompactAndNotPanel:d.displayMode === FluNavigationView.Compact && !d.enableNavigationPanel
property bool isMinimalAndPanel: d.displayMode === FluNavigationView.Minimal && d.enableNavigationPanel property bool isMinimalAndPanel: d.displayMode === FluNavigationView.Minimal && d.enableNavigationPanel
onIsCompactAndNotPanelChanged: { onIsCompactAndNotPanelChanged: {
collapseAll() collapseAll()
} }
onDisplayModeChanged: { onDisplayModeChanged: {
if(d.displayMode === FluNavigationView.Compact){ if(d.displayMode === FluNavigationView.Compact){
collapseAll() collapseAll()
@ -67,7 +60,6 @@ Item {
timer_anim_x_enable.restart() timer_anim_x_enable.restart()
} }
} }
function handleItems(){ function handleItems(){
var idx = 0 var idx = 0
var data = [] var data = []
@ -103,14 +95,12 @@ Item {
return data return data
} }
} }
Component{ Component{
id:com_panel_item_empty id:com_panel_item_empty
Item{ Item{
visible: false visible: false
} }
} }
Component{ Component{
id:com_panel_item_separatorr id:com_panel_item_separatorr
FluDivider{ FluDivider{
@ -130,7 +120,6 @@ Item {
} }
} }
} }
Component{ Component{
id:com_panel_item_header id:com_panel_item_header
Item{ Item{
@ -159,7 +148,6 @@ Item {
} }
} }
} }
Component{ Component{
id:com_panel_item_expander id:com_panel_item_expander
Item{ Item{
@ -265,7 +253,6 @@ Item {
iconSize: 15 iconSize: 15
} }
} }
Item{ Item{
id:item_icon id:item_icon
width: 30 width: 30
@ -314,7 +301,6 @@ Item {
} }
} }
} }
Component{ Component{
id:com_panel_item id:com_panel_item
Item{ Item{
@ -418,7 +404,6 @@ Item {
iconSize: 15 iconSize: 15
} }
} }
Item{ Item{
id:item_icon id:item_icon
width: 30 width: 30
@ -438,7 +423,6 @@ Item {
} }
} }
} }
FluText{ FluText{
id:item_title id:item_title
text:model.title text:model.title
@ -468,8 +452,6 @@ Item {
} }
} }
} }
Item { Item {
id:nav_app_bar id:nav_app_bar
width: parent.width width: parent.width
@ -541,7 +523,6 @@ Item {
font: FluTextStyle.Body font: FluTextStyle.Body
} }
} }
Item{ Item{
anchors.right: parent.right anchors.right: parent.right
height: parent.height height: parent.height
@ -558,7 +539,6 @@ Item {
} }
} }
} }
Item{ Item{
anchors{ anchors{
left: d.isMinimal || d.isCompactAndPanel ? parent.left : layout_list.right left: d.isMinimal || d.isCompactAndPanel ? parent.left : layout_list.right
@ -597,7 +577,6 @@ Item {
replaceExit : Transition{} replaceExit : Transition{}
} }
} }
MouseArea{ MouseArea{
anchors.fill: parent anchors.fill: parent
visible: d.isMinimalAndPanel||d.isCompactAndPanel visible: d.isMinimalAndPanel||d.isCompactAndPanel
@ -605,7 +584,6 @@ Item {
d.enableNavigationPanel = false d.enableNavigationPanel = false
} }
} }
Rectangle{ Rectangle{
id:layout_list id:layout_list
width: { width: {
@ -677,7 +655,6 @@ Item {
} }
} }
} }
FluIconButton{ FluIconButton{
visible:opacity visible:opacity
opacity:d.isCompactAndNotPanel opacity:d.isCompactAndNotPanel
@ -705,7 +682,6 @@ Item {
} }
} }
} }
ListView{ ListView{
id:nav_list id:nav_list
clip: true clip: true
@ -812,7 +788,6 @@ Item {
} }
} }
} }
Popup{ Popup{
property var childModel property var childModel
id:control_popup id:control_popup
@ -878,7 +853,6 @@ Item {
control_popup.open() control_popup.open()
} }
} }
Timer{ Timer{
id:timer_anim_x_enable id:timer_anim_x_enable
interval: 150 interval: 150
@ -886,7 +860,6 @@ Item {
anim_layout_list_x.enabled = true anim_layout_list_x.enabled = true
} }
} }
function collapseAll(){ function collapseAll(){
for(var i=0;i<nav_list.model.length;i++){ for(var i=0;i<nav_list.model.length;i++){
var item = nav_list.model[i] var item = nav_list.model[i]
@ -895,16 +868,13 @@ Item {
} }
} }
} }
function setCurrentIndex(index){ function setCurrentIndex(index){
nav_list.currentIndex = index nav_list.currentIndex = index
} }
function getItems(){ function getItems(){
return nav_list.model return nav_list.model
} }
function push(url){ function push(url){
if (nav_swipe.depth>0) if (nav_swipe.depth>0)
{ {
@ -933,11 +903,9 @@ Item {
} }
nav_swipe.push(url,{url:url}) nav_swipe.push(url,{url:url})
} }
function getCurrentIndex(){ function getCurrentIndex(){
return nav_list.currentIndex return nav_list.currentIndex
} }
function startPageByItem(data){ function startPageByItem(data){
var items = getItems(); var items = getItems();
for(var i=0;i<items.length;i++){ for(var i=0;i<items.length;i++){
@ -954,5 +922,4 @@ Item {
} }
} }
} }
} }

3
src/imports/FluentUI/Controls/FluObject.qml
View File

@ -3,7 +3,6 @@ import QtQuick.Controls
import FluentUI import FluentUI
QtObject { QtObject {
id:flu_object;
default property list<QtObject> children; default property list<QtObject> children;
id:flu_object;
} }

10
src/imports/FluentUI/Controls/FluPagination.qml
View File

@ -4,7 +4,6 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Item { Item {
id: control
signal requestPage(int page,int count) signal requestPage(int page,int count)
property string previousText: "<上一页" property string previousText: "<上一页"
property string nextText: "下一页>" property string nextText: "下一页>"
@ -14,17 +13,14 @@ Item {
property int __itemPerPage: 10 property int __itemPerPage: 10
property int pageButtonCount: 5 property int pageButtonCount: 5
property int __pageButtonHalf: Math.floor(pageButtonCount/2)+1 property int __pageButtonHalf: Math.floor(pageButtonCount/2)+1
id: control
implicitHeight: 40 implicitHeight: 40
implicitWidth: content.width implicitWidth: content.width
Row{ Row{
id: content id: content
height: control.height height: control.height
spacing: 10 spacing: 10
padding: 10 padding: 10
FluToggleButton{ FluToggleButton{
visible: control.pageCount>1 visible: control.pageCount>1
disabled: control.pageCurrent<=1 disabled: control.pageCurrent<=1
@ -33,7 +29,6 @@ Item {
control.calcNewPage(control.pageCurrent-1); control.calcNewPage(control.pageCurrent-1);
} }
} }
Row{ Row{
spacing: 5 spacing: 5
FluToggleButton{ FluToggleButton{
@ -93,7 +88,6 @@ Item {
} }
} }
} }
function calcNewPage(page) function calcNewPage(page)
{ {
if(!page) if(!page)
@ -104,6 +98,4 @@ Item {
control.pageCurrent=page_num control.pageCurrent=page_num
control.requestPage(page_num,control.__itemPerPage) control.requestPage(page_num,control.__itemPerPage)
} }
} }

4
src/imports/FluentUI/Controls/FluPasswordBox.qml
View File

@ -4,7 +4,6 @@ import QtQuick.Controls.Basic
import FluentUI import FluentUI
TextField{ TextField{
property bool disabled: false property bool disabled: false
property int iconSource: 0 property int iconSource: 0
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@ -12,7 +11,6 @@ TextField{
property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
id:control id:control
width: 300 width: 300
enabled: !disabled enabled: !disabled
@ -74,6 +72,4 @@ TextField{
id:menu id:menu
inputItem: control inputItem: control
} }
} }

9
src/imports/FluentUI/Controls/FluPivot.qml
View File

@ -3,27 +3,22 @@ import QtQuick.Controls
import FluentUI import FluentUI
Item { Item {
default property alias content: d.children default property alias content: d.children
property alias currentIndex: nav_list.currentIndex property alias currentIndex: nav_list.currentIndex
property color normalColor: FluTheme.dark ? FluColors.Grey120 : FluColors.Grey120 property color normalColor: FluTheme.dark ? FluColors.Grey120 : FluColors.Grey120
property color hoverColor: FluTheme.dark ? FluColors.Grey10 : FluColors.Black property color hoverColor: FluTheme.dark ? FluColors.Grey10 : FluColors.Black
id:control id:control
width: 400 width: 400
height: 300 height: 300
implicitHeight: height implicitHeight: height
implicitWidth: width implicitWidth: width
MouseArea{ MouseArea{
anchors.fill: parent anchors.fill: parent
preventStealing: true preventStealing: true
} }
FluObject{ FluObject{
id:d id:d
} }
ListView{ ListView{
id:nav_list id:nav_list
height: 40 height: 40
@ -77,7 +72,6 @@ Item {
} }
} }
} }
Item{ Item{
id:container id:container
anchors{ anchors{
@ -87,7 +81,6 @@ Item {
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
} }
Repeater{ Repeater{
model:d.children model:d.children
Loader{ Loader{
@ -98,6 +91,4 @@ Item {
} }
} }
} }
} }

5
src/imports/FluentUI/Controls/FluProgressBar.qml
View File

@ -3,17 +3,14 @@ import QtQuick.Controls
import FluentUI import FluentUI
FluRectangle { FluRectangle {
property real progress: 0.5 property real progress: 0.5
property bool indeterminate: true property bool indeterminate: true
id: control id: control
width: 150 width: 150
height: 5 height: 5
radius: [3,3,3,3] radius: [3,3,3,3]
clip: true clip: true
color: FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1) color: FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
Component.onCompleted: { Component.onCompleted: {
if(indeterminate){ if(indeterminate){
bar.x = -control.width*0.5 bar.x = -control.width*0.5
@ -23,14 +20,12 @@ FluRectangle {
bar.x = 0 bar.x = 0
} }
} }
Rectangle{ Rectangle{
id:bar id:bar
radius: 3 radius: 3
width: control.width*progress width: control.width*progress
height: control.height height: control.height
color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
Behavior on x{ Behavior on x{
id:behavior id:behavior
enabled: false enabled: false

21
src/imports/FluentUI/Controls/FluProgressRing.qml
View File

@ -3,13 +3,11 @@ import QtQuick.Controls
import FluentUI import FluentUI
Rectangle { Rectangle {
property real linWidth : width/8 property real linWidth : width/8
property real progress: 0.25 property real progress: 0.25
property bool indeterminate: true property bool indeterminate: true
readonly property real radius2 : radius - linWidth/2 readonly property real radius2 : radius - linWidth/2
property color primaryColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color primaryColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
id: control id: control
width: 44 width: 44
height: 44 height: 44
@ -17,25 +15,21 @@ Rectangle {
border.width: linWidth border.width: linWidth
color: "#00000000" color: "#00000000"
border.color: FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1) border.color: FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
onProgressChanged: { onProgressChanged: {
canvas.requestPaint() canvas.requestPaint()
} }
Connections{
target: FluTheme
function onDarkChanged(){
canvas.requestPaint()
}
}
Component.onCompleted: { Component.onCompleted: {
if(indeterminate){ if(indeterminate){
behavior.enabled = true behavior.enabled = true
control.rotation = 360 control.rotation = 360
} }
} }
Connections{
target: FluTheme
function onDarkChanged(){
canvas.requestPaint()
}
}
Behavior on rotation{ Behavior on rotation{
id:behavior id:behavior
enabled: false enabled: false
@ -53,7 +47,6 @@ Rectangle {
} }
} }
} }
Canvas { Canvas {
id:canvas id:canvas
anchors.fill: parent anchors.fill: parent
@ -74,6 +67,4 @@ Rectangle {
ctx.restore(); ctx.restore();
} }
} }
} }

3
src/imports/FluentUI/Controls/FluRadioButton.qml
View File

@ -5,10 +5,8 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Button { Button {
property bool selected: false property bool selected: false
property bool disabled: false property bool disabled: false
id:control id:control
enabled: !disabled enabled: !disabled
focusPolicy:Qt.TabFocus focusPolicy:Qt.TabFocus
@ -102,4 +100,3 @@ Button {
} }
} }
} }

6
src/imports/FluentUI/Controls/FluRatingControl.qml
View File

@ -3,22 +3,18 @@ import QtQuick.Controls
import FluentUI import FluentUI
Item { Item {
property int number: 5 property int number: 5
property int spacing: 4 property int spacing: 4
property int size: 18 property int size: 18
property int value:0 property int value:0
id:control id:control
implicitWidth: container.width implicitWidth: container.width
implicitHeight: container.height implicitHeight: container.height
QtObject{ QtObject{
id:d id:d
property int mouseValue: 0 property int mouseValue: 0
property int itemSize: control.size+spacing*2 property int itemSize: control.size+spacing*2
} }
Row{ Row{
id:container id:container
spacing: 0 spacing: 0
@ -42,7 +38,6 @@ Item {
} }
} }
} }
MouseArea{ MouseArea{
anchors.fill: container anchors.fill: container
hoverEnabled: true hoverEnabled: true
@ -56,5 +51,4 @@ Item {
control.value = Number(mouse.x / d.itemSize)+1 control.value = Number(mouse.x / d.itemSize)+1
} }
} }
} }

6
src/imports/FluentUI/Controls/FluRectangle.qml
View File

@ -4,12 +4,10 @@ import Qt5Compat.GraphicalEffects
import FluentUI import FluentUI
Item{ Item{
property var radius:[0,0,0,0] property var radius:[0,0,0,0]
property color color : "#FFFFFF" property color color : "#FFFFFF"
property bool shadow: true property bool shadow: true
default property alias contentItem: container.data default property alias contentItem: container.data
id:control id:control
FluShadow{ FluShadow{
anchors.fill: container anchors.fill: container
@ -21,7 +19,6 @@ Item{
return false return false
} }
} }
Rectangle{ Rectangle{
id:container id:container
width: control.width width: control.width
@ -29,7 +26,6 @@ Item{
opacity: 0 opacity: 0
color:control.color color:control.color
} }
Canvas { Canvas {
id: canvas id: canvas
anchors.fill: parent anchors.fill: parent
@ -59,11 +55,9 @@ Item{
ctx.restore(); ctx.restore();
} }
} }
OpacityMask { OpacityMask {
anchors.fill: container anchors.fill: container
source: container source: container
maskSource: canvas maskSource: canvas
} }
} }

7
src/imports/FluentUI/Controls/FluScrollBar.qml
View File

@ -1,20 +1,17 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls.Basic
import FluentUI import FluentUI
ScrollBar { ScrollBar {
property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1) property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
property color handleHoverColor: Qt.lighter(handleNormalColor) property color handleHoverColor: Qt.lighter(handleNormalColor)
property color handlePressColor: Qt.darker(handleNormalColor) property color handlePressColor: Qt.darker(handleNormalColor)
property bool expand: false property bool expand: false
id: control id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding) implicitContentHeight + topPadding + bottomPadding)
visible: control.policy !== ScrollBar.AlwaysOff visible: control.policy !== ScrollBar.AlwaysOff
minimumSize: 0.3 minimumSize: 0.3
topPadding:{ topPadding:{
@ -128,7 +125,6 @@ ScrollBar {
duration: 150 duration: 150
} }
} }
FluIconButton{ FluIconButton{
id:btn_top id:btn_top
iconSource: FluentIcons.CaretSolidUp iconSource: FluentIcons.CaretSolidUp
@ -190,5 +186,4 @@ ScrollBar {
increase() increase()
} }
} }
} }

4
src/imports/FluentUI/Controls/FluScrollablePage.qml
View File

@ -5,7 +5,6 @@ import QtQuick.Controls
import FluentUI import FluentUI
Item { Item {
property alias title: text_title.text property alias title: text_title.text
default property alias content: container.data default property alias content: container.data
property int spacing : 0 property int spacing : 0
@ -15,9 +14,7 @@ Item {
property int bottomPadding: 10 property int bottomPadding: 10
property int pageMode: FluNavigationView.Standard property int pageMode: FluNavigationView.Standard
property string url: '' property string url: ''
id:control id:control
FluText{ FluText{
id:text_title id:text_title
font: FluTextStyle.Title font: FluTextStyle.Title
@ -33,7 +30,6 @@ Item {
rightMargin: control.rightPadding rightMargin: control.rightPadding
} }
} }
Flickable{ Flickable{
id:flickview id:flickview
clip: true clip: true

44
src/imports/FluentUI/Controls/FluShadow.qml
View File

@ -6,63 +6,61 @@ Item {
property color color: FluTheme.dark ? "#FFFFFF" : "#999999" property color color: FluTheme.dark ? "#FFFFFF" : "#999999"
property int radius: 4 property int radius: 4
id:control
id:root
anchors.fill: parent anchors.fill: parent
anchors.margins: -4 anchors.margins: -4
Rectangle{ Rectangle{
width: root.width width: control.width
height: root.height height: control.height
anchors.centerIn: parent anchors.centerIn: parent
color: "#00000000" color: "#00000000"
opacity: 0.02 opacity: 0.02
border.width: 1 border.width: 1
radius: root.radius radius: control.radius
border.color: root.color border.color: control.color
} }
Rectangle{ Rectangle{
width: root.width - 2 width: control.width - 2
height: root.height - 2 height: control.height - 2
anchors.centerIn: parent anchors.centerIn: parent
color: "#00000000" color: "#00000000"
opacity: 0.04 opacity: 0.04
border.width: 1 border.width: 1
radius: root.radius radius: control.radius
border.color: root.color border.color: control.color
} }
Rectangle{ Rectangle{
width: root.width - 4 width: control.width - 4
height: root.height - 4 height: control.height - 4
anchors.centerIn: parent anchors.centerIn: parent
color: "#00000000" color: "#00000000"
opacity: 0.06 opacity: 0.06
border.width: 1 border.width: 1
radius: root.radius radius: control.radius
border.color: root.color border.color: control.color
} }
Rectangle{ Rectangle{
width: root.width - 6 width: control.width - 6
height: root.height - 6 height: control.height - 6
anchors.centerIn: parent anchors.centerIn: parent
color: "#00000000" color: "#00000000"
opacity: 0.08 opacity: 0.08
border.width: 1 border.width: 1
radius: root.radius radius: control.radius
border.color: root.color border.color: control.color
} }
Rectangle{ Rectangle{
width: root.width - 8 width: control.width - 8
height: root.height - 8 height: control.height - 8
anchors.centerIn: parent anchors.centerIn: parent
opacity: 0.1 opacity: 0.1
radius: root.radius radius: control.radius
color: "#00000000" color: "#00000000"
border.width: 1 border.width: 1
border.color: root.color border.color: control.color
} }
} }

9
src/imports/FluentUI/Controls/FluSlider.qml
View File

@ -4,7 +4,6 @@ import Qt5Compat.GraphicalEffects
import FluentUI import FluentUI
Item{ Item{
property int size: 180 property int size: 180
property int dotSize: 24 property int dotSize: 24
property int value: 50 property int value: 50
@ -14,16 +13,13 @@ Item{
property var onLineClickFunc property var onLineClickFunc
signal pressed signal pressed
signal released signal released
id:root id:root
height: control.height height: control.height
width: control.width width: control.width
rotation: vertical ? 180 : 0 rotation: vertical ? 180 : 0
Component.onCompleted: { Component.onCompleted: {
seek(value) seek(value)
} }
MouseArea{ MouseArea{
id:mouse_line id:mouse_line
anchors.centerIn: control anchors.centerIn: control
@ -45,7 +41,6 @@ Item{
} }
} }
} }
Rectangle { Rectangle {
id: control id: control
width: vertical ? 4 :size width: vertical ? 4 :size
@ -61,7 +56,6 @@ Item{
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
} }
} }
Rectangle{ Rectangle{
id:dot id:dot
width: dotSize width: dotSize
@ -109,20 +103,17 @@ Item{
} }
root.pressed() root.pressed()
} }
onReleased: { onReleased: {
tool_tip.visible = false tool_tip.visible = false
root.released() root.released()
} }
} }
FluTooltip{ FluTooltip{
id:tool_tip id:tool_tip
text:String(root.value) text:String(root.value)
y: vertical ? 32 : -40 y: vertical ? 32 : -40
} }
} }
function seek(val){ function seek(val){
if(vertical){ if(vertical){
dot.y =val/maxValue*control.height - dotSize/2 dot.y =val/maxValue*control.height - dotSize/2

8
src/imports/FluentUI/Controls/FluStatusView.qml
View File

@ -4,7 +4,6 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Item{ Item{
enum StatusMode { enum StatusMode {
Loading, Loading,
Empty, Empty,
@ -14,13 +13,11 @@ Item{
default property alias content: container.data default property alias content: container.data
property int statusMode: FluStatusView.Loading property int statusMode: FluStatusView.Loading
signal errorClicked signal errorClicked
Item{ Item{
id:container id:container
anchors.fill: parent anchors.fill: parent
visible: statusMode === FluStatusView.Success visible: statusMode === FluStatusView.Success
} }
FluArea{ FluArea{
paddings: 0 paddings: 0
border.width: 0 border.width: 0
@ -43,7 +40,6 @@ Item{
} }
} }
} }
FluArea{ FluArea{
paddings: 0 paddings: 0
border.width: 0 border.width: 0
@ -63,7 +59,6 @@ Item{
} }
} }
} }
FluArea{ FluArea{
paddings: 0 paddings: 0
border.width: 0 border.width: 0
@ -90,8 +85,6 @@ Item{
} }
} }
} }
function showSuccessView(){ function showSuccessView(){
statusMode = FluStatusView.Success statusMode = FluStatusView.Success
} }
@ -104,5 +97,4 @@ Item{
function showErrorView(){ function showErrorView(){
statusMode = FluStatusView.Error statusMode = FluStatusView.Error
} }
} }

33
src/imports/FluentUI/Controls/FluTabView.qml
View File

@ -4,25 +4,21 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Item { Item {
enum TabWidthBehavior { enum TabWidthBehavior {
Equal, Equal,
SizeToContent, SizeToContent,
Compact Compact
} }
enum CloseButtonVisibility{ enum CloseButtonVisibility{
Nerver, Nerver,
Always, Always,
OnHover OnHover
} }
property int tabWidthBehavior : FluTabView.Equal property int tabWidthBehavior : FluTabView.Equal
property int closeButtonVisibility : FluTabView.Always property int closeButtonVisibility : FluTabView.Always
property int itemWidth: 146 property int itemWidth: 146
property bool addButtonVisibility: true property bool addButtonVisibility: true
signal newPressed signal newPressed
id:control id:control
implicitHeight: height implicitHeight: height
implicitWidth: width implicitWidth: width
@ -31,7 +27,6 @@ Item {
return parent return parent
return undefined return undefined
} }
QtObject { QtObject {
id: d id: d
property int dragIndex: -1 property int dragIndex: -1
@ -39,16 +34,13 @@ Item {
property bool itemPress: false property bool itemPress: false
property int maxEqualWidth: 240 property int maxEqualWidth: 240
} }
MouseArea{ MouseArea{
anchors.fill: parent anchors.fill: parent
preventStealing: true preventStealing: true
} }
ListModel{ ListModel{
id:tab_model id:tab_model
} }
FluIconButton{ FluIconButton{
id:btn_new id:btn_new
visible: addButtonVisibility visible: addButtonVisibility
@ -61,7 +53,6 @@ Item {
newPressed() newPressed()
} }
} }
ListView{ ListView{
id:tab_nav id:tab_nav
height: 34 height: 34
@ -88,21 +79,16 @@ Item {
policy: ScrollBar.AlwaysOff policy: ScrollBar.AlwaysOff
} }
delegate: Item{ delegate: Item{
width: item_layout.width width: item_layout.width
height: item_container.height height: item_container.height
z: item_mouse_drag.pressed ? 1000 : 1 z: item_mouse_drag.pressed ? 1000 : 1
Item{ Item{
id:item_layout id:item_layout
width: item_container.width width: item_container.width
height: item_container.height height: item_container.height
FluItem{ FluItem{
id:item_container id:item_container
property real timestamp: new Date().getTime() property real timestamp: new Date().getTime()
height: tab_nav.height height: tab_nav.height
width: { width: {
if(tabWidthBehavior === FluTabView.Equal){ if(tabWidthBehavior === FluTabView.Equal){
@ -119,24 +105,20 @@ Item {
radius: [6,6,0,0] radius: [6,6,0,0]
Behavior on x { enabled: d.dragBehavior; NumberAnimation { duration: 200 } } Behavior on x { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
Behavior on y { enabled: d.dragBehavior; NumberAnimation { duration: 200 } } Behavior on y { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
MouseArea{ MouseArea{
id:item_mouse_hove id:item_mouse_hove
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
} }
MouseArea{ MouseArea{
id:item_mouse_drag id:item_mouse_drag
anchors.fill: parent anchors.fill: parent
drag.target: item_container drag.target: item_container
drag.axis: Drag.XAxis drag.axis: Drag.XAxis
onWheel: (wheel)=>{ onWheel: (wheel)=>{
if (wheel.angleDelta.y > 0) scroll_nav.decrease() if (wheel.angleDelta.y > 0) scroll_nav.decrease()
else scroll_nav.increase() else scroll_nav.increase()
} }
onPressed: { onPressed: {
d.itemPress = true d.itemPress = true
item_container.timestamp = new Date().getTime(); item_container.timestamp = new Date().getTime();
@ -147,7 +129,6 @@ Item {
item_container.x = pos.x item_container.x = pos.x
item_container.y = pos.y item_container.y = pos.y
} }
onReleased: { onReleased: {
d.itemPress = false d.itemPress = false
timer.stop() timer.stop()
@ -164,7 +145,6 @@ Item {
item_container.x = 0; item_container.x = 0;
item_container.y = 0; item_container.y = 0;
} }
onPositionChanged: { onPositionChanged: {
var pos = tab_nav.mapFromItem(item_container, 0, 0) var pos = tab_nav.mapFromItem(item_container, 0, 0)
updatePosition(pos) updatePosition(pos)
@ -211,7 +191,6 @@ Item {
} }
} }
} }
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: { color: {
@ -234,7 +213,6 @@ Item {
} }
} }
} }
RowLayout{ RowLayout{
spacing: 0 spacing: 0
height: parent.height height: parent.height
@ -271,7 +249,6 @@ Item {
} }
} }
} }
FluIconButton{ FluIconButton{
id:item_btn_close id:item_btn_close
iconSource: FluentIcons.ChromeClose iconSource: FluentIcons.ChromeClose
@ -294,7 +271,6 @@ Item {
tab_model.remove(index) tab_model.remove(index)
} }
} }
FluDivider{ FluDivider{
width: 1 width: 1
height: 16 height: 16
@ -307,8 +283,6 @@ Item {
} }
} }
} }
Item{ Item{
id:container id:container
anchors{ anchors{
@ -317,7 +291,6 @@ Item {
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
} }
Repeater{ Repeater{
model:tab_model model:tab_model
Loader{ Loader{
@ -328,23 +301,17 @@ Item {
} }
} }
} }
function createTab(icon,text,page,argument={}){ function createTab(icon,text,page,argument={}){
return {icon:icon,text:text,page:page,argument:argument} return {icon:icon,text:text,page:page,argument:argument}
} }
function appendTab(icon,text,page,argument){ function appendTab(icon,text,page,argument){
tab_model.append(createTab(icon,text,page,argument)) tab_model.append(createTab(icon,text,page,argument))
} }
function setTabList(list){ function setTabList(list){
tab_model.clear() tab_model.clear()
tab_model.append(list) tab_model.append(list)
} }
function count(){ function count(){
return tab_nav.count return tab_nav.count
} }
} }

17
src/imports/FluentUI/Controls/FluTableView.qml
View File

@ -5,7 +5,6 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Item { Item {
property var columns : [] property var columns : []
property var dataSource : [] property var dataSource : []
property int pageCurrent: 1 property int pageCurrent: 1
@ -14,28 +13,22 @@ Item {
property int itemHeight: 56 property int itemHeight: 56
property bool pageVisible: true property bool pageVisible: true
signal requestPage(int page,int count) signal requestPage(int page,int count)
id:control id:control
implicitHeight: layout_table.height implicitHeight: layout_table.height
QtObject{ QtObject{
id:d id:d
property int coumnsWidth: parent.width property int coumnsWidth: parent.width
} }
MouseArea{ MouseArea{
anchors.fill: parent anchors.fill: parent
preventStealing: true preventStealing: true
} }
ListModel{ ListModel{
id:model_coumns id:model_coumns
} }
ListModel{ ListModel{
id:model_data_source id:model_data_source
} }
onColumnsChanged: { onColumnsChanged: {
model_coumns.clear() model_coumns.clear()
model_coumns.append(columns) model_coumns.append(columns)
@ -46,12 +39,10 @@ Item {
} }
d.coumnsWidth = w d.coumnsWidth = w
} }
onDataSourceChanged: { onDataSourceChanged: {
model_data_source.clear() model_data_source.clear()
model_data_source.append(dataSource) model_data_source.append(dataSource)
} }
Flickable{ Flickable{
id:layout_flickable id:layout_flickable
height: layout_table.height height: layout_table.height
@ -75,14 +66,12 @@ Item {
width: Math.max(layout_flickable.width,d.coumnsWidth) width: Math.max(layout_flickable.width,d.coumnsWidth)
clip:true clip:true
interactive: false interactive: false
header: FluRectangle{ header: FluRectangle{
id:layout_coumns id:layout_coumns
height: control.itemHeight height: control.itemHeight
width: parent.width width: parent.width
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1) color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
radius: [5,5,0,0] radius: [5,5,0,0]
Row{ Row{
id:list_coumns id:list_coumns
spacing: 0 spacing: 0
@ -113,7 +102,6 @@ Item {
} }
} }
} }
footer: Item{ footer: Item{
height: pageVisible ? 50 : 0 height: pageVisible ? 50 : 0
clip: true clip: true
@ -201,8 +189,6 @@ Item {
} }
} }
} }
Component{ Component{
id:com_text id:com_text
Item{ Item{
@ -232,11 +218,9 @@ Item {
} }
} }
} }
function getObject(index){ function getObject(index){
return model_data_source.get(index) return model_data_source.get(index)
} }
function getObjectValues(index) { function getObjectValues(index) {
var obj = model_data_source.get(index) var obj = model_data_source.get(index)
if(!obj) if(!obj)
@ -248,5 +232,4 @@ Item {
} }
return data; return data;
} }
} }

3
src/imports/FluentUI/Controls/FluText.qml
View File

@ -3,12 +3,9 @@ import QtQuick.Controls
import FluentUI import FluentUI
Text { Text {
property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220 property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220
id:text id:text
color: textColor color: textColor
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
font: FluTextStyle.Body font: FluTextStyle.Body
} }

2
src/imports/FluentUI/Controls/FluTextBox.qml
View File

@ -4,7 +4,6 @@ import QtQuick.Controls.Basic
import FluentUI import FluentUI
TextField{ TextField{
property bool disabled: false property bool disabled: false
property int iconSource: 0 property int iconSource: 0
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@ -12,7 +11,6 @@ TextField{
property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
id:control id:control
width: 300 width: 300
enabled: !disabled enabled: !disabled

2
src/imports/FluentUI/Controls/FluTextBoxBackground.qml
View File

@ -4,9 +4,7 @@ import Qt5Compat.GraphicalEffects
import FluentUI import FluentUI
Rectangle{ Rectangle{
property Item inputItem property Item inputItem
id:content id:content
radius: 4 radius: 4
layer.enabled: true layer.enabled: true

6
src/imports/FluentUI/Controls/FluTextBoxMenu.qml
View File

@ -3,30 +3,25 @@ import QtQuick.Controls
import FluentUI import FluentUI
FluMenu{ FluMenu{
property string cutText : "剪切" property string cutText : "剪切"
property string copyText : "复制" property string copyText : "复制"
property string pasteText : "粘贴" property string pasteText : "粘贴"
property string selectAllText : "全选" property string selectAllText : "全选"
property var inputItem property var inputItem
id:menu id:menu
focus:false focus:false
enableAnimation:false enableAnimation:false
onVisibleChanged: { onVisibleChanged: {
if(visible){ if(visible){
inputItem.forceActiveFocus() inputItem.forceActiveFocus()
} }
} }
Connections{ Connections{
target: inputItem target: inputItem
function onTextChanged() { function onTextChanged() {
menu.close() menu.close()
} }
} }
FluMenuItem{ FluMenuItem{
text: cutText text: cutText
visible: inputItem.selectedText !== "" && !inputItem.readOnly visible: inputItem.selectedText !== "" && !inputItem.readOnly
@ -34,7 +29,6 @@ FluMenu{
inputItem.cut() inputItem.cut()
} }
} }
FluMenuItem{ FluMenuItem{
text: copyText text: copyText
visible: inputItem.selectedText !== "" visible: inputItem.selectedText !== ""

4
src/imports/FluentUI/Controls/FluTextButton.qml
View File

@ -4,14 +4,12 @@ import QtQuick.Controls.Basic
import FluentUI import FluentUI
Button { Button {
property bool disabled: false property bool disabled: false
property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.15) : Qt.lighter(normalColor,1.15) property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.15) : Qt.lighter(normalColor,1.15)
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.3) : Qt.lighter(normalColor,1.3) property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.3) : Qt.lighter(normalColor,1.3)
property color disableColor: 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(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property bool textBold: true property bool textBold: true
id: control id: control
topPadding:0 topPadding:0
bottomPadding:0 bottomPadding:0
@ -19,9 +17,7 @@ Button {
rightPadding:0 rightPadding:0
enabled: !disabled enabled: !disabled
focusPolicy:Qt.TabFocus focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked() Keys.onSpacePressed: control.visualFocus&&clicked()
background: Item{ background: Item{
FluFocusRectangle{ FluFocusRectangle{
visible: control.visualFocus visible: control.visualFocus

27
src/imports/FluentUI/Controls/FluTimePicker.qml
View File

@ -38,7 +38,6 @@ Rectangle {
popup.showPopup() popup.showPopup()
} }
} }
Rectangle{ Rectangle{
id:divider_1 id:divider_1
width: 1 width: 1
@ -46,8 +45,6 @@ Rectangle {
height: parent.height height: parent.height
color: dividerColor color: dividerColor
} }
Rectangle{ Rectangle{
id:divider_2 id:divider_2
width: 1 width: 1
@ -56,7 +53,6 @@ Rectangle {
color: dividerColor color: dividerColor
visible: isH visible: isH
} }
FluText{ FluText{
id:text_hour id:text_hour
anchors{ anchors{
@ -69,8 +65,6 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text:"时" text:"时"
} }
FluText{ FluText{
id:text_minute id:text_minute
anchors{ anchors{
@ -83,8 +77,6 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text:"分" text:"分"
} }
FluText{ FluText{
id:text_ampm id:text_ampm
visible: isH visible: isH
@ -98,7 +90,6 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text:"AM/PM" text:"AM/PM"
} }
Menu{ Menu{
id:popup id:popup
width: container.width width: container.width
@ -114,7 +105,6 @@ Rectangle {
duration: 83 duration: 83
} }
} }
exit:Transition { exit:Transition {
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
@ -144,14 +134,11 @@ Rectangle {
spacing: 0 spacing: 0
width: parent.width width: parent.width
height: 300 height: 300
Component{ Component{
id:list_delegate id:list_delegate
Item{ Item{
height:38 height:38
width:getListView().width width:getListView().width
function getListView(){ function getListView(){
if(type === 0) if(type === 0)
return list_view_1 return list_view_1
@ -160,8 +147,6 @@ Rectangle {
if(type === 2) if(type === 2)
return list_view_3 return list_view_3
} }
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 2 anchors.topMargin: 2
@ -217,7 +202,6 @@ Rectangle {
} }
} }
} }
ListView{ ListView{
id:list_view_1 id:list_view_1
width: isH ? 100 : 150 width: isH ? 100 : 150
@ -286,14 +270,12 @@ Rectangle {
} }
} }
} }
Rectangle{ Rectangle{
width: parent.width width: parent.width
height: 1 height: 1
anchors.top: layout_content.bottom anchors.top: layout_content.bottom
color: dividerColor color: dividerColor
} }
Rectangle{ Rectangle{
id:layout_actions id:layout_actions
height: 40 height: 40
@ -304,14 +286,12 @@ Rectangle {
left: parent.left left: parent.left
right: parent.right right: parent.right
} }
Item { Item {
id:divider id:divider
width: 1 width: 1
height: parent.height height: parent.height
anchors.centerIn: parent anchors.centerIn: parent
} }
FluButton{ FluButton{
anchors{ anchors{
left: parent.left left: parent.left
@ -325,7 +305,6 @@ Rectangle {
popup.close() popup.close()
} }
} }
FluFilledButton{ FluFilledButton{
anchors{ anchors{
right: parent.right right: parent.right
@ -388,7 +367,6 @@ Rectangle {
} }
popup.open() popup.open()
} }
onClosed: { onClosed: {
if(changeFlag){ if(changeFlag){
text_hour.text = rowData[0] text_hour.text = rowData[0]
@ -396,13 +374,9 @@ Rectangle {
text_ampm.text = rowData[2] text_ampm.text = rowData[2]
} }
} }
} }
property bool changeFlag: true property bool changeFlag: true
readonly property var rowData: ["","",""] readonly property var rowData: ["","",""]
function generateArray(start, n) { function generateArray(start, n) {
var arr = []; var arr = [];
for (var i = start; i <= n; i++) { for (var i = start; i <= n; i++) {
@ -410,5 +384,4 @@ Rectangle {
} }
return arr; return arr;
} }
} }

2
src/imports/FluentUI/Controls/FluToggleSwitch.qml
View File

@ -21,9 +21,7 @@ Button {
} }
selected = !selected selected = !selected
} }
contentItem: Item{} contentItem: Item{}
background : RowLayout{ background : RowLayout{
spacing: 0 spacing: 0
Rectangle { Rectangle {

6
src/imports/FluentUI/Controls/FluTooltip.qml
View File

@ -3,18 +3,12 @@ import QtQuick.Controls
import FluentUI import FluentUI
ToolTip { ToolTip {
id:tool_tip id:tool_tip
// property var font: FluTextStyle.Body
contentItem: FluText { contentItem: FluText {
text: tool_tip.text text: tool_tip.text
// font: tool_tip.font
padding: 4 padding: 4
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
} }
background: Rectangle{ background: Rectangle{
anchors.fill: parent anchors.fill: parent
color: FluTheme.dark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1) color: FluTheme.dark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)

27
src/imports/FluentUI/Controls/FluTreeView.qml
View File

@ -5,19 +5,16 @@ import QtQuick.Controls
import FluentUI import FluentUI
Item { Item {
enum TreeViewSelectionMode { enum TreeViewSelectionMode {
None, None,
Single, Single,
Multiple Multiple
} }
property int selectionMode: FluTreeView.None property int selectionMode: FluTreeView.None
property var currentElement property var currentElement
property var currentParentElement property var currentParentElement
property var rootModel: tree_model.get(0).items property var rootModel: tree_model.get(0).items
signal itemClicked(var item) signal itemClicked(var item)
id:root id:root
ListModel{ ListModel{
id:tree_model id:tree_model
@ -31,7 +28,6 @@ Item {
multipParentKey:"" multipParentKey:""
} }
} }
Component{ Component{
id: delegate_root id: delegate_root
Column{ Column{
@ -54,13 +50,10 @@ Item {
} }
} }
} }
Component{ Component{
id:delegate_items id:delegate_items
Column{ Column{
id:item_layout id:item_layout
property real level: (mapToItem(list_root,0,0).x+list_root.contentX)/0.001 property real level: (mapToItem(list_root,0,0).x+list_root.contentX)/0.001
property var text: model.text??"Item" property var text: model.text??"Item"
property bool hasChild : (model.items !== undefined) && (model.items.count !== 0) property bool hasChild : (model.items !== undefined) && (model.items.count !== 0)
@ -69,7 +62,6 @@ Item {
property int width_hint: calculateWidth() property int width_hint: calculateWidth()
property bool singleSelected: currentElement === model property bool singleSelected: currentElement === model
property var itemModel: model property var itemModel: model
function calculateWidth(){ function calculateWidth(){
var w = Math.max(list_root.width, item_layout_row.implicitWidth + 10); var w = Math.max(list_root.width, item_layout_row.implicitWidth + 10);
if(expanded){ if(expanded){
@ -86,8 +78,6 @@ Item {
id:item_layout_rect id:item_layout_rect
width: list_root.contentWidth width: list_root.contentWidth
height: item_layout_row.implicitHeight height: item_layout_row.implicitHeight
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
anchors.margins: 2 anchors.margins: 2
@ -104,7 +94,6 @@ Item {
return (item_layout_mouse.containsMouse || item_layout_expanded.hovered || item_layout_checkbox.hovered)?Qt.rgba(0,0,0,0.03):Qt.rgba(0,0,0,0) return (item_layout_mouse.containsMouse || item_layout_expanded.hovered || item_layout_checkbox.hovered)?Qt.rgba(0,0,0,0.03):Qt.rgba(0,0,0,0)
} }
} }
Rectangle{ Rectangle{
width: 3 width: 3
color:FluTheme.primaryColor.dark color:FluTheme.primaryColor.dark
@ -126,8 +115,6 @@ Item {
} }
} }
} }
function onClickItem(){ function onClickItem(){
if(selectionMode === FluTreeView.None){ if(selectionMode === FluTreeView.None){
itemClicked(model) itemClicked(model)
@ -147,23 +134,19 @@ Item {
} }
} }
RowLayout{ RowLayout{
id:item_layout_row id:item_layout_row
anchors.verticalCenter: item_layout_rect.verticalCenter anchors.verticalCenter: item_layout_rect.verticalCenter
Item{ Item{
width: 15*level width: 15*level
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }
FluCheckBox{ FluCheckBox{
id:item_layout_checkbox id:item_layout_checkbox
text:"" text:""
selected: itemModel.multipSelected selected: itemModel.multipSelected
visible: selectionMode === FluTreeView.Multiple visible: selectionMode === FluTreeView.Multiple
Layout.leftMargin: 5 Layout.leftMargin: 5
function refreshCheckBox(){ function refreshCheckBox(){
const stack = [tree_model.get(0)]; const stack = [tree_model.get(0)];
const result = []; const result = [];
@ -195,7 +178,6 @@ Item {
} }
} }
} }
clickFunc:function(){ clickFunc:function(){
if(hasChild){ if(hasChild){
const stack = [itemModel]; const stack = [itemModel];
@ -215,7 +197,6 @@ Item {
} }
} }
} }
FluIconButton{ FluIconButton{
id:item_layout_expanded id:item_layout_expanded
color:"#00000000" color:"#00000000"
@ -230,7 +211,6 @@ Item {
model.expanded = !model.expanded model.expanded = !model.expanded
} }
} }
FluText { FluText {
text: item_layout.text text: item_layout.text
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
@ -239,7 +219,6 @@ Item {
} }
} }
} }
Item{ Item{
id:item_sub id:item_sub
visible: { visible: {
@ -263,7 +242,6 @@ Item {
} }
} }
} }
ListView { ListView {
id: list_root id: list_root
anchors.fill: parent anchors.fill: parent
@ -275,16 +253,13 @@ Item {
ScrollBar.vertical: FluScrollBar {} ScrollBar.vertical: FluScrollBar {}
ScrollBar.horizontal: FluScrollBar { } ScrollBar.horizontal: FluScrollBar { }
} }
function updateData(items){ function updateData(items){
rootModel.clear() rootModel.clear()
rootModel.append(items) rootModel.append(items)
} }
function signleData(){ function signleData(){
return currentElement return currentElement
} }
function multipData(){ function multipData(){
const stack = [tree_model.get(0)]; const stack = [tree_model.get(0)];
const result = []; const result = [];
@ -300,11 +275,9 @@ Item {
} }
return result return result
} }
function createItem(text="",expanded=true,items=[],data={}){ function createItem(text="",expanded=true,items=[],data={}){
return {text:text,expanded:expanded,items:items,key:uniqueRandom(),multipSelected:false,multipIndex:0,multipParentKey:"",data:data}; return {text:text,expanded:expanded,items:items,key:uniqueRandom(),multipSelected:false,multipIndex:0,multipParentKey:"",data:data};
} }
function uniqueRandom() { function uniqueRandom() {
var timestamp = Date.now(); var timestamp = Date.now();
var random = Math.floor(Math.random() * 1000000); var random = Math.floor(Math.random() * 1000000);

36
src/imports/FluentUI/Controls/FluWindow.qml
View File

@ -5,13 +5,11 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Window { Window {
enum LaunchMode { enum LaunchMode {
Standard, Standard,
SingleTask, SingleTask,
SingleInstance SingleInstance
} }
default property alias content: container.data default property alias content: container.data
property bool closeDestory: true property bool closeDestory: true
property int launchMode: FluWindow.Standard property int launchMode: FluWindow.Standard
@ -26,70 +24,58 @@ Window {
event.accepted = false event.accepted = false
} }
} }
signal initArgument(var argument) property color backgroundColor: {
id:window
Rectangle{
anchors.fill: parent
color: {
if(active){ if(active){
return FluTheme.dark ? Qt.rgba(26/255,34/255,40/255,1) : Qt.rgba(238/255,244/255,249/255,1) return FluTheme.dark ? Qt.rgba(26/255,34/255,40/255,1) : Qt.rgba(238/255,244/255,249/255,1)
} }
return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
} }
signal initArgument(var argument)
id:window
onClosing:(event)=>closeFunc(event)
Component.onCompleted: {
helper.initWindow(window)
initArgument(argument)
}
Rectangle{
anchors.fill: parent
color: backgroundColor
Behavior on color{ Behavior on color{
ColorAnimation { ColorAnimation {
duration: 300 duration: 300
} }
} }
} }
Item{ Item{
id:container id:container
anchors.fill: parent anchors.fill: parent
clip: true clip: true
} }
onClosing:(event)=>closeFunc(event)
FluInfoBar{ FluInfoBar{
id:infoBar id:infoBar
root: window root: window
} }
WindowHelper{ WindowHelper{
id:helper id:helper
} }
Component.onCompleted: {
helper.initWindow(window)
initArgument(argument)
}
function showSuccess(text,duration,moremsg){ function showSuccess(text,duration,moremsg){
infoBar.showSuccess(text,duration,moremsg); infoBar.showSuccess(text,duration,moremsg);
} }
function showInfo(text,duration,moremsg){ function showInfo(text,duration,moremsg){
infoBar.showInfo(text,duration,moremsg); infoBar.showInfo(text,duration,moremsg);
} }
function showWarning(text,duration,moremsg){ function showWarning(text,duration,moremsg){
infoBar.showWarning(text,duration,moremsg); infoBar.showWarning(text,duration,moremsg);
} }
function showError(text,duration,moremsg){ function showError(text,duration,moremsg){
infoBar.showError(text,duration,moremsg); infoBar.showError(text,duration,moremsg);
} }
function registerForWindowResult(path){ function registerForWindowResult(path){
return helper.createRegister(window,path) return helper.createRegister(window,path)
} }
function deleteWindow(){ function deleteWindow(){
helper.deleteWindow() helper.deleteWindow()
} }
function onResult(data){ function onResult(data){
if(pageRegister){ if(pageRegister){
pageRegister.onResult(data) pageRegister.onResult(data)