diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml
index 8204d112..19eb3734 100644
--- a/example/T_Buttons.qml
+++ b/example/T_Buttons.qml
@@ -40,8 +40,6 @@ FluScrollablePage{
FluToggleSwitch{
id:button_switch
Layout.alignment: Qt.AlignRight
- }
- FluText{
text:"Disabled"
}
}
@@ -73,8 +71,6 @@ FluScrollablePage{
FluToggleSwitch{
id:filled_button_switch
Layout.alignment: Qt.AlignRight
- }
- FluText{
text:"Disabled"
}
}
@@ -108,8 +104,6 @@ FluScrollablePage{
FluToggleSwitch{
id:icon_button_switch
Layout.alignment: Qt.AlignRight
- }
- FluText{
text:"Disabled"
}
}
@@ -151,8 +145,6 @@ FluScrollablePage{
FluToggleSwitch{
id:drop_down_button_switch
Layout.alignment: Qt.AlignRight
- }
- FluText{
text:"Disabled"
}
}
@@ -194,8 +186,6 @@ FluScrollablePage{
FluToggleSwitch{
id:radio_button_switch
Layout.alignment: Qt.AlignRight
- }
- FluText{
text:"Disabled"
}
}
@@ -226,8 +216,6 @@ FluScrollablePage{
FluToggleSwitch{
id:check_box_switch
Layout.alignment: Qt.AlignRight
- }
- FluText{
text:"Disabled"
}
}
diff --git a/example/T_Rectangle.qml b/example/T_Rectangle.qml
index af9feb5b..6897204f 100644
--- a/example/T_Rectangle.qml
+++ b/example/T_Rectangle.qml
@@ -21,6 +21,8 @@ FluScrollablePage{
height: 50
color:"#744da9"
radius:[15,15,15,15]
+ FluBadge{
+ }
}
FluRectangle{
width: 50
diff --git a/example/T_TextBox.qml b/example/T_TextBox.qml
index 78305710..2b9cb1e7 100644
--- a/example/T_TextBox.qml
+++ b/example/T_TextBox.qml
@@ -13,17 +13,26 @@ FluScrollablePage{
Layout.topMargin: 20
placeholderText: "单行输入框"
Layout.preferredWidth: 300
+ disabled:toggle_switch.selected
}
FluMultiLineTextBox{
Layout.topMargin: 20
Layout.preferredWidth: 300
placeholderText: "多行输入框"
+ disabled:toggle_switch.selected
}
FluAutoSuggestBox{
Layout.topMargin: 20
values:generateRandomNames(100)
placeholderText: "AutoSuggestBox"
Layout.preferredWidth: 300
+ disabled:toggle_switch.selected
+ }
+
+ FluToggleSwitch{
+ id:toggle_switch
+ text:"Disabled"
+ Layout.topMargin: 20
}
function generateRandomNames(numNames) {
diff --git a/example/T_ToggleSwitch.qml b/example/T_ToggleSwitch.qml
index 8523cde9..b730336b 100644
--- a/example/T_ToggleSwitch.qml
+++ b/example/T_ToggleSwitch.qml
@@ -12,4 +12,8 @@ FluScrollablePage{
FluToggleSwitch{
Layout.topMargin: 20
}
+ FluToggleSwitch{
+ Layout.topMargin: 20
+ text:"Disabled"
+ }
}
diff --git a/example/T_Tooltip.qml b/example/T_Tooltip.qml
new file mode 100644
index 00000000..ce6da794
--- /dev/null
+++ b/example/T_Tooltip.qml
@@ -0,0 +1,75 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+ title:"TextBox"
+
+ FluText{
+ Layout.topMargin: 20
+ text:"鼠标悬停不动,弹出Tooltip"
+ }
+
+
+ FluArea{
+ width: parent.width
+ Layout.topMargin: 20
+ height: 68
+ paddings: 10
+
+ Column{
+ spacing: 5
+ anchors{
+ verticalCenter: parent.verticalCenter
+ left: parent.left
+ }
+ FluText{
+ text:"FluIconButton的text属性自带Tooltip效果"
+ }
+ FluIconButton{
+ iconSource:FluentIcons.ChromeCloseContrast
+ iconSize: 15
+ text:"删除"
+ onClicked:{
+ showSuccess("点击IconButton")
+ }
+ }
+ }
+ }
+
+ FluArea{
+ width: parent.width
+ Layout.topMargin: 20
+ height: 68
+ paddings: 10
+
+ Column{
+ spacing: 5
+ anchors{
+ verticalCenter: parent.verticalCenter
+ left: parent.left
+ }
+ FluText{
+ text:"给一个Button添加Tooltip效果"
+ }
+ FluButton{
+ id:button_1
+ text:"删除"
+ onClicked:{
+ showSuccess("点击一个Button")
+ }
+ FluTooltip{
+ visible: button_1.hovered
+ text:button_1.text
+ delay: 1000
+ }
+ }
+ }
+ }
+
+
+}
diff --git a/example/page/MainPage.qml b/example/page/MainPage.qml
index d86aaf81..a87df03a 100644
--- a/example/page/MainPage.qml
+++ b/example/page/MainPage.qml
@@ -123,6 +123,13 @@ FluWindow {
}
}
+ FluPaneItem{
+ title:"Tooltip"
+ onTap:{
+ nav_view.push("qrc:/T_Tooltip.qml")
+ }
+ }
+
FluPaneItem{
title:"Menu"
onTap:{
diff --git a/example/qml.qrc b/example/qml.qrc
index 136840ae..6f21880c 100644
--- a/example/qml.qrc
+++ b/example/qml.qrc
@@ -40,5 +40,6 @@
res/image/banner_3.jpg
res/image/logo_openai.png
page/ChatPage.qml
+ T_Tooltip.qml
diff --git a/src/Fluent.cpp b/src/Fluent.cpp
index 386bcf76..3c21506f 100644
--- a/src/Fluent.cpp
+++ b/src/Fluent.cpp
@@ -35,6 +35,7 @@ void Fluent::registerTypes(const char *uri){
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea");
+ qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluBadge.qml"),uri,major,minor,"FluBadge");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluContentPage.qml"),uri,major,minor,"FluContentPage");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluScrollablePage.qml"),uri,major,minor,"FluScrollablePage");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemHeader.qml"),uri,major,minor,"FluPaneItemHeader");
diff --git a/src/FramelessView.h b/src/FramelessView.h
index a120307d..61d07fb6 100644
--- a/src/FramelessView.h
+++ b/src/FramelessView.h
@@ -4,9 +4,6 @@
#include
#include
-//无边框窗口,主要用来实现自定义标题栏。
-//Windows平台支持拖动和改变大小,支持Aero效果
-//非Windows平台,去掉边框,不做其它处理。由Qml模拟resize和拖动。
class FramelessViewPrivate;
class FramelessView : public QQuickView
{
diff --git a/src/controls/FluAutoSuggestBox.qml b/src/controls/FluAutoSuggestBox.qml
index 8704f84d..e73ce6ad 100644
--- a/src/controls/FluAutoSuggestBox.qml
+++ b/src/controls/FluAutoSuggestBox.qml
@@ -8,11 +8,18 @@ TextField{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
property int iconSource: 0
+ property bool disabled: false
signal itemClicked(string data)
id:input
width: 300
- color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
+ enabled: !disabled
+ color: {
+ if(disabled){
+ return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+ }
+ return FluTheme.isDark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
+ }
selectionColor: {
if(FluTheme.isDark){
return FluTheme.primaryColor.lighter
@@ -22,6 +29,9 @@ TextField{
}
renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
placeholderTextColor: {
+ if(disabled){
+ return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+ }
if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
}
diff --git a/src/controls/FluBadge.qml b/src/controls/FluBadge.qml
new file mode 100644
index 00000000..30828f21
--- /dev/null
+++ b/src/controls/FluBadge.qml
@@ -0,0 +1,11 @@
+import QtQuick 2.15
+
+Item {
+
+ property bool isDot: false
+
+ Rectangle{
+
+ }
+
+}
diff --git a/src/controls/FluMultiLineTextBox.qml b/src/controls/FluMultiLineTextBox.qml
index dae21ae5..52708c08 100644
--- a/src/controls/FluMultiLineTextBox.qml
+++ b/src/controls/FluMultiLineTextBox.qml
@@ -6,10 +6,17 @@ TextArea{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
+ property bool disabled: false
id:input
width: 300
- color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
+ color: {
+ if(disabled){
+ return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+ }
+ return FluTheme.isDark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
+ }
+ enabled: !disabled
wrapMode: Text.WrapAnywhere
renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
selectByMouse: true
@@ -24,6 +31,9 @@ TextArea{
inputItem: input
}
placeholderTextColor: {
+ if(disabled){
+ return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+ }
if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
}
diff --git a/src/controls/FluShadow.qml b/src/controls/FluShadow.qml
index 7e8863a1..490718a2 100644
--- a/src/controls/FluShadow.qml
+++ b/src/controls/FluShadow.qml
@@ -4,7 +4,7 @@ Item {
id:root
anchors.fill: parent
anchors.margins: -4
- property color color: FluTheme.isDark ? "#FFFFFF" : "#000000"
+ property color color: FluTheme.isDark ? "#FFFFFF" : "#999999"
property int radius: 4
diff --git a/src/controls/FluTextBox.qml b/src/controls/FluTextBox.qml
index 11e9005d..6f4ecfdf 100644
--- a/src/controls/FluTextBox.qml
+++ b/src/controls/FluTextBox.qml
@@ -6,10 +6,17 @@ TextField{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
+ property bool disabled: false
id:input
width: 300
- color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
+ enabled: !disabled
+ color: {
+ if(disabled){
+ return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+ }
+ return FluTheme.isDark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
+ }
renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: {
if(FluTheme.isDark){
@@ -19,6 +26,9 @@ TextField{
}
}
placeholderTextColor: {
+ if(disabled){
+ return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+ }
if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
}
diff --git a/src/controls/FluTextBoxBackground.qml b/src/controls/FluTextBoxBackground.qml
index c02f0b50..ad31bae4 100644
--- a/src/controls/FluTextBoxBackground.qml
+++ b/src/controls/FluTextBoxBackground.qml
@@ -9,10 +9,13 @@ Rectangle{
radius: 4
layer.enabled: true
color: {
- if(input.focus){
+ if(inputItem.disabled){
+ return FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+ }
+ if(inputItem.focus){
return FluTheme.isDark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
}
- if(input.hovered){
+ if(inputItem.hovered){
return FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
}
return FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
@@ -25,16 +28,22 @@ Rectangle{
}
}
border.width: 1
- border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
+ border.color: {
+ if(inputItem.disabled){
+ return FluTheme.isDark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
+ }
+ return FluTheme.isDark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
+ }
Rectangle{
width: parent.width
- height: input.focus ? 3 : 1
+ height: inputItem.focus ? 3 : 1
anchors.bottom: parent.bottom
+ visible: !inputItem.disabled
color: {
if(FluTheme.isDark){
- input.focus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1)
+ inputItem.focus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1)
}else{
- return input.focus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1)
+ return inputItem.focus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1)
}
}
Behavior on height{
diff --git a/src/controls/FluToggleSwitch.qml b/src/controls/FluToggleSwitch.qml
index b1bc0c7f..ad627a8c 100644
--- a/src/controls/FluToggleSwitch.qml
+++ b/src/controls/FluToggleSwitch.qml
@@ -1,6 +1,7 @@
import QtQuick 2.0
import QtQuick.Controls 2.0
import FluentUI 1.0
+import QtQuick.Layouts 1.15
Button {
@@ -8,10 +9,8 @@ Button {
property var clickFunc
id: control
- width: 40
- implicitWidth: 40
height: 20
- implicitHeight: 20
+ implicitHeight: height
focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
onClicked: {
@@ -21,50 +20,68 @@ Button {
}
selected = !selected
}
- background : Rectangle {
- width: control.width
- height: control.height
- radius: height / 2
- FluFocusRectangle{
- visible: control.visualFocus
- radius: 20
- }
- color: {
- if(FluTheme.isDark){
- if(selected){
- return FluTheme.primaryColor.dark
- }
- if(hovered){
- return "#3E3E3C"
- }
- return "#323232"
- }else{
- if(selected){
- return FluTheme.primaryColor.dark
- }
- if(hovered){
- return "#F4F4F4"
- }
- return "#FFFFFF"
- }
- }
- border.width: 1
- border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
+
+ contentItem: Item{}
+
+ background : RowLayout{
+ spacing: 0
Rectangle {
- 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: selected ? "#FFFFFF" : "#666666"
- Behavior on x {
- NumberAnimation { duration: 200 }
+ id:control_backgound
+ width: 40
+ height: control.height
+ radius: height / 2
+ smooth: true
+ antialiasing: true
+ FluFocusRectangle{
+ visible: control.visualFocus
+ radius: 20
}
- Behavior on scale {
- NumberAnimation { duration: 150 }
+ color: {
+ if(FluTheme.isDark){
+ if(selected){
+ return FluTheme.primaryColor.dark
+ }
+ if(hovered){
+ return "#3E3E3C"
+ }
+ return "#323232"
+ }else{
+ if(selected){
+ return FluTheme.primaryColor.dark
+ }
+ if(hovered){
+ return "#F4F4F4"
+ }
+ return "#FFFFFF"
+ }
+ }
+ border.width: 1
+ border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
+ Rectangle {
+ x: selected ? control_backgound.width - width - 4 : 4
+ width: control.height - 8
+ height: control.height - 8
+ radius: width / 2
+ antialiasing: true
+ scale: hovered ? 1.2 : 1.0
+ smooth: true
+ anchors.verticalCenter: parent.verticalCenter
+ color: selected ? "#FFFFFF" : "#666666"
+ Behavior on x {
+ NumberAnimation { duration: 200 }
+ }
+ Behavior on scale {
+ NumberAnimation { duration: 150 }
+ }
}
}
+
+ FluText{
+ text: control.text
+ Layout.leftMargin: 5
+ visible: text !== ""
+ }
+
}
}
diff --git a/src/res.qrc b/src/res.qrc
index da22a17d..287a7693 100644
--- a/src/res.qrc
+++ b/src/res.qrc
@@ -48,5 +48,6 @@
controls/FluCalendarDatePicker.qml
controls/FluFocusRectangle.qml
controls/FluCarousel.qml
+ controls/FluBadge.qml