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

update

Browse Source
This commit is contained in:
朱子楚\zhuzi 2023-03-12 21:49:11 +08:00
parent f36914fdee
commit 8cc828a56b
17 changed files with 109 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/T_Awesome.qml
View File

@ -47,7 +47,7 @@ FluContentPage {
height: 80 height: 80
FluIconButton{ FluIconButton{
id:item_icon id:item_icon
icon:modelData.icon iconSource:modelData.icon
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
onClicked: { onClicked: {
var text ="FluentIcons."+modelData.name; var text ="FluentIcons."+modelData.name;

13
example/T_Buttons.qml
View File

@ -10,8 +10,8 @@ FluScrollablePage{
spacing: 20 spacing: 20
FluText{ FluText{
Layout.topMargin: 20 Layout.topMargin: 20
text:"支持Tab键切换焦点，Enter键执行点击事件" text:"支持Tab键切换焦点，空格键执行点击事件"
} }
FluArea{ FluArea{
@ -21,6 +21,7 @@ FluScrollablePage{
FluButton{ FluButton{
disabled:button_switch.checked disabled:button_switch.checked
text:"Standard Button"
onClicked: { onClicked: {
showInfo("点击StandardButton") showInfo("点击StandardButton")
} }
@ -53,8 +54,9 @@ FluScrollablePage{
FluFilledButton{ FluFilledButton{
disabled:filled_button_switch.checked disabled:filled_button_switch.checked
text:"Filled Button"
onClicked: { onClicked: {
showWarning("点击FilledButton") showWarning("点击FilledButton")
} }
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
@ -85,7 +87,7 @@ FluScrollablePage{
paddings: 10 paddings: 10
FluIconButton{ FluIconButton{
icon:FluentIcons.ChromeCloseContrast iconSource:FluentIcons.ChromeCloseContrast
disabled:icon_button_switch.checked disabled:icon_button_switch.checked
iconSize: 15 iconSize: 15
anchors{ anchors{
@ -129,7 +131,7 @@ FluScrollablePage{
property int selecIndex : 0 property int selecIndex : 0
model: 3 model: 3
delegate: FluRadioButton{ delegate: FluRadioButton{
checked : repeater.selecIndex===index selected : repeater.selecIndex===index
disabled:radio_button_switch.checked disabled:radio_button_switch.checked
text:"Radio Button_"+index text:"Radio Button_"+index
onClicked:{ onClicked:{
@ -164,6 +166,7 @@ FluScrollablePage{
FluCheckBox{ FluCheckBox{
disabled:icon_button_check.checked disabled:icon_button_check.checked
text:"Check Box"
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left left: parent.left

2
example/T_Expander.qml
View File

@ -26,7 +26,7 @@ FluScrollablePage{
property int selecIndex : 0 property int selecIndex : 0
model: 3 model: 3
delegate: FluRadioButton{ delegate: FluRadioButton{
checked : repeater.selecIndex===index selected : repeater.selecIndex===index
text:"Radio Button_"+index text:"Radio Button_"+index
onClicked:{ onClicked:{
repeater.selecIndex = index repeater.selecIndex = index

14
example/T_Theme.qml
View File

@ -20,7 +20,7 @@ FluScrollablePage{
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
FluIcon { FluIcon {
anchors.centerIn: parent anchors.centerIn: parent
icon: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 15 iconSize: 15
visible: modelData === FluTheme.primaryColor visible: modelData === FluTheme.primaryColor
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
@ -42,8 +42,8 @@ FluScrollablePage{
} }
FluToggleSwitch{ FluToggleSwitch{
checked: FluTheme.isDark checked: FluTheme.isDark
onClickFunc:function(){ onCheckedChanged:{
FluTheme.isDark = !FluTheme.isDark FluTheme.isDark = checked
} }
} }
FluText{ FluText{
@ -52,8 +52,8 @@ FluScrollablePage{
} }
FluToggleSwitch{ FluToggleSwitch{
checked: FluTheme.isFrameless checked: FluTheme.isFrameless
onClickFunc:function(){ onCheckedChanged:{
FluTheme.isFrameless = !FluTheme.isFrameless FluTheme.isFrameless = isFrameless
} }
} }
FluText{ FluText{
@ -62,8 +62,8 @@ FluScrollablePage{
} }
FluToggleSwitch{ FluToggleSwitch{
checked: FluTheme.isNativeText checked: FluTheme.isNativeText
onClickFunc:function(){ onCheckedChanged:{
FluTheme.isNativeText = !FluTheme.isNativeText FluTheme.isNativeText = isNativeText
} }
} }
} }

10
src/controls/FluAppBar.qml
View File

@ -94,14 +94,14 @@ Rectangle{
} }
FluToggleSwitch{ FluToggleSwitch{
checked: FluTheme.isDark checked: FluTheme.isDark
onClickFunc:function(){ onCheckedChanged:{
FluTheme.isDark = !FluTheme.isDark FluTheme.isDark = checked
} }
} }
} }
FluIconButton{ FluIconButton{
icon : FluentIcons.ChromeMinimizeContrast iconSource : FluentIcons.ChromeMinimizeContrast
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
iconSize: 15 iconSize: 15
text:"最小化" text:"最小化"
@ -117,7 +117,7 @@ Rectangle{
return false return false
return Window.Maximized === window.visibility return Window.Maximized === window.visibility
} }
icon : isRestore ? FluentIcons.ChromeRestoreContrast : FluentIcons.ChromeMaximizeContrast iconSource : isRestore ? FluentIcons.ChromeRestoreContrast : FluentIcons.ChromeMaximizeContrast
color:hovered ? "#20000000" : "#00000000" color:hovered ? "#20000000" : "#00000000"
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
visible: resizable visible: resizable
@ -129,7 +129,7 @@ Rectangle{
} }
} }
FluIconButton{ FluIconButton{
icon : FluentIcons.ChromeCloseContrast iconSource : FluentIcons.ChromeCloseContrast
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
text:"关闭" text:"关闭"
iconSize: 13 iconSize: 13

8
src/controls/FluAutoSuggestBox.qml
View File

@ -7,7 +7,7 @@ TextField{
property var values:[] property var values:[]
property int fontStyle: FluText.Body property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize property int pixelSize : FluTheme.textSize
property int icon: -1 property int iconSource: -1
signal itemClicked(string data) signal itemClicked(string data)
id:input id:input
@ -91,7 +91,7 @@ TextField{
inputItem: input inputItem: input
FluIconButton{ FluIconButton{
icon:FluentIcons.ChromeClose iconSource:FluentIcons.ChromeClose
iconSize: 10 iconSize: 10
width: 20 width: 20
height: 20 height: 20
@ -109,10 +109,10 @@ TextField{
FluIcon{ FluIcon{
id:icon_right id:icon_right
icon: input.icon iconSource: input.iconSource
iconSize: 15 iconSize: 15
opacity: 0.5 opacity: 0.5
visible: input.icon != -1 visible: input.iconSource != -1
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
right: parent.right right: parent.right

25
src/controls/FluButton.qml
View File

@ -2,39 +2,19 @@
import QtQuick.Controls 2.15 import QtQuick.Controls 2.15
import FluentUI 1.0 import FluentUI 1.0
Control { Button {
id: control id: control
property string text: "Standard Button"
property bool disabled: false property bool disabled: false
property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1) property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
signal clicked
topPadding:5 topPadding:5
bottomPadding:5 bottomPadding:5
leftPadding:15 leftPadding:15
rightPadding:15 rightPadding:15
enabled: !disabled
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled){
return
}
control.clicked()
}
background: Rectangle{ background: Rectangle{
border.color: FluTheme.isDark ? "#505050" : "#DFDFDF" border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
@ -71,5 +51,4 @@ Control {
} }
} }
} }
} }

52
src/controls/FluCheckBox.qml
View File

@ -3,49 +3,45 @@ import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import FluentUI 1.0 import FluentUI 1.0
Control { Button {
id:control id:control
property bool checked: false property bool selected: false
property string text: "Check Box"
property var checkClicked property var clickFunc
property bool disabled: false property bool disabled: false
padding:0
property color borderNormalColor: FluTheme.isDark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1) property color borderNormalColor: FluTheme.isDark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
property color borderCheckedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color borderSelectedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color borderHoverColor: FluTheme.isDark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1) property color borderHoverColor: FluTheme.isDark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
property color borderDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1) property color borderDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color normalColor: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1) property color normalColor: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
property color checkedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color selectedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1) property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
property color checkedHoverColor: FluTheme.isDark ? Qt.darker(checkedColor,1.1) : Qt.lighter(checkedColor,1.1) property color selectedHoverColor: FluTheme.isDark ? Qt.darker(selectedColor,1.1) : Qt.lighter(selectedColor,1.1)
property color checkedDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1) property color selectedDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color disableColor: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1) property color disableColor: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
enabled: !disabled
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea { onClicked: {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled){ if(disabled){
return return
} }
if(checkClicked){ if(clickFunc){
checkClicked() clickFunc()
return return
} }
checked = !checked selected = !selected
} }
background: Item{ background: Item{
FluFocusRectangle{ FluFocusRectangle{
visible: control.visualFocus visible: control.visualFocus
@ -62,8 +58,8 @@ Control {
if(disabled){ if(disabled){
return borderDisableColor return borderDisableColor
} }
if(checked){ if(selected){
return borderCheckedColor return borderSelectedColor
} }
if(hovered){ if(hovered){
return borderHoverColor return borderHoverColor
@ -72,14 +68,14 @@ Control {
} }
border.width: 1 border.width: 1
color: { color: {
if(checked){ if(selected){
if(disabled){ if(disabled){
return checkedDisableColor return selectedDisableColor
} }
if(hovered){ if(hovered){
return checkedHoverColor return selectedHoverColor
} }
return checkedColor return selectedColor
} }
if(hovered){ if(hovered){
return hoverColor return hoverColor
@ -89,9 +85,9 @@ Control {
FluIcon { FluIcon {
anchors.centerIn: parent anchors.centerIn: parent
icon: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 15 iconSize: 15
visible: checked visible: selected
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
} }
} }

2
src/controls/FluExpander.qml
View File

@ -56,7 +56,7 @@ Item {
return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1) return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
} }
iconSize: 15 iconSize: 15
icon: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown iconSource: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown
onClicked: { onClicked: {
expand = !expand expand = !expand
} }

19
src/controls/FluFilledButton.qml
View File

@ -2,34 +2,19 @@
import QtQuick.Controls 2.15 import QtQuick.Controls 2.15
import FluentUI 1.0 import FluentUI 1.0
Control { Button {
id: control id: control
property string text: "Filled Button"
property bool disabled: false property bool disabled: false
property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1) property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1) property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
signal clicked
enabled: !disabled
topPadding:5 topPadding:5
bottomPadding:5 bottomPadding:5
leftPadding:15 leftPadding:15
rightPadding:15 rightPadding:15
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled)
return
control.clicked()
}
background: Rectangle{ background: Rectangle{
radius: 4 radius: 4

4
src/controls/FluIcon.qml
View File

@ -2,7 +2,7 @@
Text { Text {
property int icon property int iconSource
property int iconSize: 20 property int iconSize: 20
property color iconColor: FluTheme.isDark ? "#FFFFFF" : "#000000" property color iconColor: FluTheme.isDark ? "#FFFFFF" : "#000000"
@ -12,5 +12,5 @@ Text {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: iconColor color: iconColor
text: (String.fromCharCode(icon).toString(16)); text: (String.fromCharCode(iconSource).toString(16));
} }

37
src/controls/FluIconButton.qml
View File

@ -2,18 +2,26 @@
import QtQuick.Controls 2.15 import QtQuick.Controls 2.15
import FluentUI 1.0 import FluentUI 1.0
Control { Button {
id:control id:control
width: 30 width: 30
height: 30 height: 30
implicitWidth: width
implicitHeight: height
padding: 0
property int iconSize: 20 property int iconSize: 20
property int icon property int iconSource
property alias text: tool_tip.text
signal clicked
property bool disabled: false property bool disabled: false
enabled: !disabled
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03) property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
property color normalColor: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0) property color normalColor: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0) property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0)
@ -39,22 +47,6 @@ Control {
} }
} }
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled){
return
}
control.clicked()
}
background: Rectangle{ background: Rectangle{
radius: 4 radius: 4
color:control.color color:control.color
@ -68,11 +60,13 @@ Control {
id:text_icon id:text_icon
font.family: "Segoe Fluent Icons" font.family: "Segoe Fluent Icons"
font.pixelSize: iconSize font.pixelSize: iconSize
width: iconSize
height: iconSize
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.centerIn: parent anchors.centerIn: parent
color:control.textColor color:control.textColor
text: (String.fromCharCode(icon).toString(16)); text: (String.fromCharCode(iconSource).toString(16));
} }
FluTooltip{ FluTooltip{
@ -83,6 +77,7 @@ Control {
} }
return hovered return hovered
} }
text:control.text
delay: 1000 delay: 1000
} }
} }

2
src/controls/FluInfoBar.qml
View File

@ -190,7 +190,7 @@ FluObject {
spacing: 10 spacing: 10
FluIcon{ FluIcon{
icon:{ iconSource:{
switch(_super.type){ switch(_super.type){
case mcontrol.const_success: return FluentIcons.CompletedSolid; case mcontrol.const_success: return FluentIcons.CompletedSolid;
case mcontrol.const_warning: return FluentIcons.InfoSolid; case mcontrol.const_warning: return FluentIcons.InfoSolid;

10
src/controls/FluNavigationView.qml
View File

@ -145,7 +145,7 @@ Item {
height:parent.height height:parent.height
spacing: 0 spacing: 0
FluIconButton{ FluIconButton{
icon: FluentIcons.ChromeBack iconSource: FluentIcons.ChromeBack
Layout.leftMargin: 5 Layout.leftMargin: 5
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
disabled: nav_swipe.depth === 1 disabled: nav_swipe.depth === 1
@ -160,7 +160,7 @@ Item {
} }
} }
FluIconButton{ FluIconButton{
icon: FluentIcons.GlobalNavButton iconSource: FluentIcons.GlobalNavButton
Layout.leftMargin: 5 Layout.leftMargin: 5
iconSize: 15 iconSize: 15
visible: displayMode === FluNavigationView.Minimal visible: displayMode === FluNavigationView.Minimal
@ -185,8 +185,8 @@ Item {
} }
FluToggleSwitch{ FluToggleSwitch{
checked: FluTheme.isDark checked: FluTheme.isDark
onClickFunc:function(){ onCheckedChanged:{
FluTheme.isDark = !FluTheme.isDark FluTheme.isDark = checked
} }
} }
} }
@ -269,7 +269,7 @@ Item {
FluAutoSuggestBox{ FluAutoSuggestBox{
width: 280 width: 280
anchors.centerIn: parent anchors.centerIn: parent
icon: FluentIcons.Zoom iconSource: FluentIcons.Zoom
values: { values: {
var arr = [] var arr = []
if(items==null) if(items==null)

43
src/controls/FluRadioButton.qml
View File

@ -4,38 +4,19 @@ import QtQuick.Layouts 1.15
import FluentUI 1.0 import FluentUI 1.0
Control { Button {
id:control property bool selected: false
property bool checked: false
property string text: "RodioButton"
signal clicked
property bool disabled: false property bool disabled: false
focusPolicy:Qt.TabFocus id:control
Keys.onEnterPressed:(visualFocus&&handleClick()) enabled: !disabled
Keys.onReturnPressed:(visualFocus&&handleClick()) padding:0
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled){
return
}
control.clicked()
}
background: Item{ background: Item{
FluFocusRectangle{ FluFocusRectangle{
visible: control.visualFocus visible: control.visualFocus
} }
} }
contentItem: RowLayout{ contentItem: RowLayout{
Rectangle{ Rectangle{
id:rect_check id:rect_check
@ -46,22 +27,22 @@ Control {
layer.enabled: true layer.enabled: true
layer.smooth: true layer.smooth: true
border.width: { border.width: {
if(checked&&disabled){ if(selected&&disabled){
return 3 return 3
} }
if(hovered){ if(hovered){
if(checked){ if(selected){
return 5 return 5
} }
return 1 return 1
} }
if(hovered){ if(hovered){
if(checked){ if(selected){
return 3 return 3
} }
return 1 return 1
} }
return checked ? 5 : 1 return selected ? 5 : 1
} }
Behavior on border.width { Behavior on border.width {
NumberAnimation{ NumberAnimation{
@ -76,7 +57,7 @@ Control {
return Qt.rgba(198/255,198/255,198/255,1) return Qt.rgba(198/255,198/255,198/255,1)
} }
} }
if(checked){ if(selected){
if(FluTheme.isDark){ if(FluTheme.isDark){
return FluTheme.primaryColor.lighter return FluTheme.primaryColor.lighter
}else{ }else{
@ -93,7 +74,7 @@ Control {
} }
} }
color:{ color:{
if(disabled&&checked){ if(disabled&&selected){
return Qt.rgba(159/255,159/255,159/255,1) return Qt.rgba(159/255,159/255,159/255,1)
} }
if(FluTheme.isDark){ if(FluTheme.isDark){
@ -103,7 +84,7 @@ Control {
return Qt.rgba(50/255,50/255,50/255,1) return Qt.rgba(50/255,50/255,50/255,1)
}else{ }else{
if(hovered){ if(hovered){
if(checked){ if(selected){
return Qt.rgba(1,1,1,1) return Qt.rgba(1,1,1,1)
} }
return Qt.rgba(222/255,222/255,222/255,1) return Qt.rgba(222/255,222/255,222/255,1)

53
src/controls/FluToggleSwitch.qml
View File

@ -2,76 +2,53 @@
import QtQuick.Controls 2.0 import QtQuick.Controls 2.0
import FluentUI 1.0 import FluentUI 1.0
Switch { Button {
id: root id: root
property var onClickFunc
width: 40 width: 40
implicitWidth: 40 implicitWidth: 40
height: 20 height: 20
implicitHeight: 20 implicitHeight: 20
checkable: false checkable: true
background : Rectangle {
background:FluFocusRectangle{
visible: root.visualFocus
radius: 20
}
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
indicator: Rectangle {
width: root.width width: root.width
height: root.height height: root.height
radius: height / 2 radius: height / 2
FluFocusRectangle{
visible: root.visualFocus
radius: 20
}
color: { color: {
if(FluTheme.isDark){ if(FluTheme.isDark){
if(root.checked){ if(checked){
return FluTheme.primaryColor.dark return FluTheme.primaryColor.dark
} }
if(switch_mouse.containsMouse){ if(hovered){
return "#3E3E3C" return "#3E3E3C"
} }
return "#323232" return "#323232"
}else{ }else{
if(root.checked){ if(checked){
return FluTheme.primaryColor.dark return FluTheme.primaryColor.dark
} }
if(switch_mouse.containsMouse){ if(hovered){
return "#F4F4F4" return "#F4F4F4"
} }
return "#FFFFFF" return "#FFFFFF"
} }
} }
border.width: 1 border.width: 1
border.color: root.checked ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666" border.color: checked ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
Rectangle { Rectangle {
x: root.checked ? root.implicitWidth - width - 4 : 4 x: checked ? root.implicitWidth - width - 4 : 4
width: root.height - 8 width: root.height - 8
height: root.height - 8 height: root.height - 8
radius: width / 2 radius: width / 2
scale: switch_mouse.containsMouse ? 1.2 : 1.0 scale: hovered ? 1.2 : 1.0
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: root.checked ? "#FFFFFF" : "#666666" color: checked ? "#FFFFFF" : "#666666"
// border.color: "#D5D5D5"
Behavior on x { Behavior on x {
NumberAnimation { duration: 200 } NumberAnimation { duration: 200 }
} }
} }
} }
MouseArea{
id:switch_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: handleClick()
}
function handleClick(){
if(root.onClickFunc){
root.onClickFunc()
}else{
root.checked = !root.checked
}
}
} }

6
src/controls/FluTreeView.qml
View File

@ -163,7 +163,7 @@ Item {
FluCheckBox{ FluCheckBox{
id:item_layout_checkbox id:item_layout_checkbox
text:"" text:""
checked: itemModel.multipSelected selected: itemModel.multipSelected
visible: selectionMode === FluTreeView.Multiple visible: selectionMode === FluTreeView.Multiple
Layout.leftMargin: 5 Layout.leftMargin: 5
@ -199,7 +199,7 @@ Item {
} }
} }
checkClicked:function(){ clickFunc:function(){
if(hasChild){ if(hasChild){
const stack = [itemModel]; const stack = [itemModel];
while (stack.length > 0) { while (stack.length > 0) {
@ -222,7 +222,7 @@ Item {
FluIconButton{ FluIconButton{
id:item_layout_expanded id:item_layout_expanded
color:"#00000000" color:"#00000000"
icon:item_layout.expanded?FluentIcons.ChevronDown:FluentIcons.ChevronRight iconSource:item_layout.expanded?FluentIcons.ChevronDown:FluentIcons.ChevronRight
opacity: item_layout.hasChild opacity: item_layout.hasChild
iconSize: 15 iconSize: 15
onClicked: { onClicked: {