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

18
example/T_Theme.qml
View File

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

6
src/controls/FluAppBar.qml
View File

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

8
src/controls/FluButton.qml
View File

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

21
src/controls/FluCheckBox.qml
View File

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

8
src/controls/FluFilledButton.qml
View File

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

34
src/controls/FluIconButton.qml
View File

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

6
src/controls/FluNavigationView.qml
View File

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

8
src/controls/FluRadioButton.qml
View File

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

37
src/controls/FluToggleSwitch.qml
View File

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