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

update

main
朱子楚\zhuzi 2023-03-12 22:36:31 +08:00
parent f75da5e3ce
commit 23bc5cdf68
10 changed files with 72 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
example/T_Buttons.qml
View File

@ -20,7 +20,7 @@ FluScrollablePage{
paddings: 10 paddings: 10
FluButton{ FluButton{
disabled:button_switch.checked disabled:button_switch.selected
text:"Standard Button" text:"Standard Button"
onClicked: { onClicked: {
showInfo("点击StandardButton") showInfo("点击StandardButton")
@ -53,7 +53,7 @@ FluScrollablePage{
paddings: 10 paddings: 10
FluFilledButton{ FluFilledButton{
disabled:filled_button_switch.checked disabled:filled_button_switch.selected
text:"Filled Button" text:"Filled Button"
onClicked: { onClicked: {
showWarning("点击FilledButton") showWarning("点击FilledButton")
@ -88,7 +88,7 @@ FluScrollablePage{
FluIconButton{ FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast iconSource:FluentIcons.ChromeCloseContrast
disabled:icon_button_switch.checked disabled:icon_button_switch.selected
iconSize: 15 iconSize: 15
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
@ -132,7 +132,7 @@ FluScrollablePage{
model: 3 model: 3
delegate: FluRadioButton{ delegate: FluRadioButton{
selected : repeater.selecIndex===index selected : repeater.selecIndex===index
disabled:radio_button_switch.checked disabled:radio_button_switch.selected
text:"Radio Button_"+index text:"Radio Button_"+index
onClicked:{ onClicked:{
repeater.selecIndex = index repeater.selecIndex = index
@ -165,7 +165,7 @@ FluScrollablePage{
paddings: 10 paddings: 10
FluCheckBox{ FluCheckBox{
disabled:icon_button_check.checked disabled:check_box_switch.selected
text:"Check Box" text:"Check Box"
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
@ -181,7 +181,7 @@ FluScrollablePage{
right: parent.right right: parent.right
} }
FluToggleSwitch{ FluToggleSwitch{
id:icon_button_check id:check_box_switch
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
FluText{ FluText{

18
example/T_Theme.qml
View File

@ -41,9 +41,9 @@ FluScrollablePage{
Layout.topMargin: 20 Layout.topMargin: 20
} }
FluToggleSwitch{ FluToggleSwitch{
checked: FluTheme.isDark selected: FluTheme.isDark
onCheckedChanged:{ clickFunc:function(){
FluTheme.isDark = checked FluTheme.isDark = !FluTheme.isDark
} }
} }
FluText{ FluText{
@ -51,9 +51,9 @@ FluScrollablePage{
Layout.topMargin: 20 Layout.topMargin: 20
} }
FluToggleSwitch{ FluToggleSwitch{
checked: FluTheme.isFrameless selected: FluTheme.isFrameless
onCheckedChanged:{ clickFunc:function(){
FluTheme.isFrameless = isFrameless FluTheme.isFrameless = !FluTheme.isFrameless
} }
} }
FluText{ FluText{
@ -61,9 +61,9 @@ FluScrollablePage{
Layout.topMargin: 20 Layout.topMargin: 20
} }
FluToggleSwitch{ FluToggleSwitch{
checked: FluTheme.isNativeText selected: FluTheme.isNativeText
onCheckedChanged:{ clickFunc:function(){
FluTheme.isNativeText = isNativeText FluTheme.isNativeText = !FluTheme.isNativeText
} }
} }
} }

6
src/controls/FluAppBar.qml
View File

@ -93,9 +93,9 @@ Rectangle{
fontStyle: FluText.Body fontStyle: FluText.Body
} }
FluToggleSwitch{ FluToggleSwitch{
checked: FluTheme.isDark selected: FluTheme.isDark
onCheckedChanged:{ clickFunc:function(){
FluTheme.isDark = checked FluTheme.isDark = !FluTheme.isDark
} }
} }
} }

8
src/controls/FluButton.qml
View File

@ -3,25 +3,28 @@ import QtQuick.Controls 2.15
import FluentUI 1.0 import FluentUI 1.0
Button { Button {
id: control
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)
id: control
topPadding:5 topPadding:5
bottomPadding:5 bottomPadding:5
leftPadding:15 leftPadding:15
rightPadding:15 rightPadding:15
enabled: !disabled enabled: !disabled
focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
background: Rectangle{ background: Rectangle{
border.color: FluTheme.isDark ? "#505050" : "#DFDFDF" border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
border.width: 1 border.width: 1
radius: 4 radius: 4
FluFocusRectangle{ FluFocusRectangle{
visible: control.focus visible: control.visualFocus
radius:8 radius:8
} }
color:{ color:{
@ -31,7 +34,6 @@ Button {
return hovered ? hoverColor :normalColor return hovered ? hoverColor :normalColor
} }
} }
contentItem: FluText { contentItem: FluText {
text: control.text text: control.text
anchors.centerIn: parent anchors.centerIn: parent

21
src/controls/FluCheckBox.qml
View File

@ -5,31 +5,25 @@ import FluentUI 1.0
Button { Button {
id:control
property bool selected: false property bool selected: false
property var clickFunc 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 borderSelectedColor: 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 selectedColor: 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 selectedHoverColor: FluTheme.isDark ? Qt.darker(selectedColor,1.1) : Qt.lighter(selectedColor,1.1) property color selectedHoverColor: FluTheme.isDark ? Qt.darker(selectedColor,1.1) : Qt.lighter(selectedColor,1.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 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)
id:control
enabled: !disabled enabled: !disabled
focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
padding:0
onClicked: { onClicked: {
if(disabled){ if(disabled){
return return
@ -40,14 +34,11 @@ Button {
} }
selected = !selected selected = !selected
} }
background: Item{ background: Item{
FluFocusRectangle{ FluFocusRectangle{
visible: control.focus visible: control.visualFocus
} }
} }
contentItem: RowLayout{ contentItem: RowLayout{
spacing: 4 spacing: 4
Rectangle{ Rectangle{
@ -82,7 +73,6 @@ Button {
} }
return normalColor return normalColor
} }
FluIcon { FluIcon {
anchors.centerIn: parent anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
@ -95,5 +85,4 @@ Button {
text:control.text text:control.text
} }
} }
} }

8
src/controls/FluFilledButton.qml
View File

@ -15,11 +15,12 @@ Button {
bottomPadding:5 bottomPadding:5
leftPadding:15 leftPadding:15
rightPadding:15 rightPadding:15
Keys.onSpacePressed: control.visualFocus&&clicked()
focusPolicy:Qt.TabFocus
background: Rectangle{ background: Rectangle{
radius: 4 radius: 4
FluFocusRectangle{ FluFocusRectangle{
visible: control.focus visible: control.visualFocus
radius:8 radius:8
} }
color:{ color:{
@ -29,7 +30,6 @@ Button {
return hovered ? hoverColor :normalColor return hovered ? hoverColor :normalColor
} }
} }
contentItem: FluText { contentItem: FluText {
text: control.text text: control.text
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@ -46,6 +46,4 @@ Button {
} }
font.pixelSize: 14 font.pixelSize: 14
} }
} }

34
src/controls/FluIconButton.qml
View File

@ -4,35 +4,18 @@ import FluentUI 1.0
Button { Button {
id:control
width: 30
height: 30
implicitWidth: width
implicitHeight: height
padding: 0
property int iconSize: 20 property int iconSize: 20
property int iconSource property int iconSource
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)
property color color: { property color color: {
if(disabled){ if(disabled){
return disableColor return disableColor
} }
return hovered ? hoverColor : normalColor return hovered ? hoverColor : normalColor
} }
property color textColor: { property color textColor: {
if(FluTheme.isDark){ if(FluTheme.isDark){
if(disabled){ if(disabled){
@ -47,14 +30,22 @@ Button {
} }
} }
id:control
width: 30
height: 30
implicitWidth: width
implicitHeight: height
padding: 0
enabled: !disabled
focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
background: Rectangle{ background: Rectangle{
radius: 4 radius: 4
color:control.color color:control.color
FluFocusRectangle{ FluFocusRectangle{
visible: control.focus visible: control.visualFocus
} }
} }
contentItem: Item{ contentItem: Item{
Text { Text {
id:text_icon id:text_icon
@ -68,7 +59,6 @@ Button {
color:control.textColor color:control.textColor
text: (String.fromCharCode(iconSource).toString(16)); text: (String.fromCharCode(iconSource).toString(16));
} }
FluTooltip{ FluTooltip{
id:tool_tip id:tool_tip
visible: { visible: {
@ -81,8 +71,4 @@ Button {
delay: 1000 delay: 1000
} }
} }
} }

6
src/controls/FluNavigationView.qml
View File

@ -184,9 +184,9 @@ Item {
fontStyle: FluText.Body fontStyle: FluText.Body
} }
FluToggleSwitch{ FluToggleSwitch{
checked: FluTheme.isDark selected: FluTheme.isDark
onCheckedChanged:{ clickFunc:function(){
FluTheme.isDark = checked FluTheme.isDark = !FluTheme.isDark
} }
} }
} }

10
src/controls/FluRadioButton.qml
View File

@ -11,12 +11,14 @@ Button {
id:control id:control
enabled: !disabled enabled: !disabled
focusPolicy:Qt.TabFocus
padding:0 padding:0
background: Item{ background: Item{
FluFocusRectangle{ FluFocusRectangle{
visible: control.focus visible: control.visualFocus
} }
} }
Keys.onSpacePressed: control.visualFocus&&clicked()
contentItem: RowLayout{ contentItem: RowLayout{
Rectangle{ Rectangle{
id:rect_check id:rect_check
@ -93,14 +95,10 @@ Button {
} }
} }
} }
FluText{ FluText{
text: control.text text: control.text
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }
}
}
} }

37
src/controls/FluToggleSwitch.qml
View File

@ -3,23 +3,35 @@ import QtQuick.Controls 2.0
import FluentUI 1.0 import FluentUI 1.0
Button { Button {
id: root
property bool selected: false
property var clickFunc
id: control
width: 40 width: 40
implicitWidth: 40 implicitWidth: 40
height: 20 height: 20
implicitHeight: 20 implicitHeight: 20
checkable: true focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
onClicked: {
if(clickFunc){
clickFunc()
return
}
selected = !selected
}
background : Rectangle { background : Rectangle {
width: root.width width: control.width
height: root.height height: control.height
radius: height / 2 radius: height / 2
FluFocusRectangle{ FluFocusRectangle{
visible: root.focus visible: control.visualFocus
radius: 20 radius: 20
} }
color: { color: {
if(FluTheme.isDark){ if(FluTheme.isDark){
if(checked){ if(selected){
return FluTheme.primaryColor.dark return FluTheme.primaryColor.dark
} }
if(hovered){ if(hovered){
@ -27,7 +39,7 @@ Button {
} }
return "#323232" return "#323232"
}else{ }else{
if(checked){ if(selected){
return FluTheme.primaryColor.dark return FluTheme.primaryColor.dark
} }
if(hovered){ if(hovered){
@ -37,18 +49,19 @@ Button {
} }
} }
border.width: 1 border.width: 1
border.color: checked ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666" border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
Rectangle { Rectangle {
x: checked ? root.implicitWidth - width - 4 : 4 x: selected ? control.implicitWidth - width - 4 : 4
width: root.height - 8 width: control.height - 8
height: root.height - 8 height: control.height - 8
radius: width / 2 radius: width / 2
scale: hovered ? 1.2 : 1.0 scale: hovered ? 1.2 : 1.0
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: checked ? "#FFFFFF" : "#666666" color: selected ? "#FFFFFF" : "#666666"
Behavior on x { Behavior on x {
NumberAnimation { duration: 200 } NumberAnimation { duration: 200 }
} }
} }
} }
} }