main
zhuzihcu 2023-03-20 18:22:32 +08:00
parent 9545175445
commit e29cb7433e
17 changed files with 220 additions and 68 deletions

View File

@ -40,8 +40,6 @@ FluScrollablePage{
FluToggleSwitch{ FluToggleSwitch{
id:button_switch id:button_switch
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
}
FluText{
text:"Disabled" text:"Disabled"
} }
} }
@ -73,8 +71,6 @@ FluScrollablePage{
FluToggleSwitch{ FluToggleSwitch{
id:filled_button_switch id:filled_button_switch
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
}
FluText{
text:"Disabled" text:"Disabled"
} }
} }
@ -108,8 +104,6 @@ FluScrollablePage{
FluToggleSwitch{ FluToggleSwitch{
id:icon_button_switch id:icon_button_switch
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
}
FluText{
text:"Disabled" text:"Disabled"
} }
} }
@ -151,8 +145,6 @@ FluScrollablePage{
FluToggleSwitch{ FluToggleSwitch{
id:drop_down_button_switch id:drop_down_button_switch
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
}
FluText{
text:"Disabled" text:"Disabled"
} }
} }
@ -194,8 +186,6 @@ FluScrollablePage{
FluToggleSwitch{ FluToggleSwitch{
id:radio_button_switch id:radio_button_switch
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
}
FluText{
text:"Disabled" text:"Disabled"
} }
} }
@ -226,8 +216,6 @@ FluScrollablePage{
FluToggleSwitch{ FluToggleSwitch{
id:check_box_switch id:check_box_switch
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
}
FluText{
text:"Disabled" text:"Disabled"
} }
} }

View File

@ -21,6 +21,8 @@ FluScrollablePage{
height: 50 height: 50
color:"#744da9" color:"#744da9"
radius:[15,15,15,15] radius:[15,15,15,15]
FluBadge{
}
} }
FluRectangle{ FluRectangle{
width: 50 width: 50

View File

@ -13,17 +13,26 @@ FluScrollablePage{
Layout.topMargin: 20 Layout.topMargin: 20
placeholderText: "单行输入框" placeholderText: "单行输入框"
Layout.preferredWidth: 300 Layout.preferredWidth: 300
disabled:toggle_switch.selected
} }
FluMultiLineTextBox{ FluMultiLineTextBox{
Layout.topMargin: 20 Layout.topMargin: 20
Layout.preferredWidth: 300 Layout.preferredWidth: 300
placeholderText: "多行输入框" placeholderText: "多行输入框"
disabled:toggle_switch.selected
} }
FluAutoSuggestBox{ FluAutoSuggestBox{
Layout.topMargin: 20 Layout.topMargin: 20
values:generateRandomNames(100) values:generateRandomNames(100)
placeholderText: "AutoSuggestBox" placeholderText: "AutoSuggestBox"
Layout.preferredWidth: 300 Layout.preferredWidth: 300
disabled:toggle_switch.selected
}
FluToggleSwitch{
id:toggle_switch
text:"Disabled"
Layout.topMargin: 20
} }
function generateRandomNames(numNames) { function generateRandomNames(numNames) {

View File

@ -12,4 +12,8 @@ FluScrollablePage{
FluToggleSwitch{ FluToggleSwitch{
Layout.topMargin: 20 Layout.topMargin: 20
} }
FluToggleSwitch{
Layout.topMargin: 20
text:"Disabled"
}
} }

75
example/T_Tooltip.qml Normal file
View File

@ -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
}
}
}
}
}

View File

@ -123,6 +123,13 @@ FluWindow {
} }
} }
FluPaneItem{
title:"Tooltip"
onTap:{
nav_view.push("qrc:/T_Tooltip.qml")
}
}
FluPaneItem{ FluPaneItem{
title:"Menu" title:"Menu"
onTap:{ onTap:{

View File

@ -40,5 +40,6 @@
<file>res/image/banner_3.jpg</file> <file>res/image/banner_3.jpg</file>
<file>res/image/logo_openai.png</file> <file>res/image/logo_openai.png</file>
<file>page/ChatPage.qml</file> <file>page/ChatPage.qml</file>
<file>T_Tooltip.qml</file>
</qresource> </qresource>
</RCC> </RCC>

View File

@ -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/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/FluContentPage.qml"),uri,major,minor,"FluContentPage");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluScrollablePage.qml"),uri,major,minor,"FluScrollablePage"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluScrollablePage.qml"),uri,major,minor,"FluScrollablePage");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemHeader.qml"),uri,major,minor,"FluPaneItemHeader"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemHeader.qml"),uri,major,minor,"FluPaneItemHeader");

View File

@ -4,9 +4,6 @@
#include <QQuickView> #include <QQuickView>
#include <QRegion> #include <QRegion>
//无边框窗口,主要用来实现自定义标题栏。
//Windows平台支持拖动和改变大小支持Aero效果
//非Windows平台去掉边框不做其它处理。由Qml模拟resize和拖动。
class FramelessViewPrivate; class FramelessViewPrivate;
class FramelessView : public QQuickView class FramelessView : public QQuickView
{ {

View File

@ -8,11 +8,18 @@ TextField{
property int fontStyle: FluText.Body property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize property int pixelSize : FluTheme.textSize
property int iconSource: 0 property int iconSource: 0
property bool disabled: false
signal itemClicked(string data) signal itemClicked(string data)
id:input id:input
width: 300 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: { selectionColor: {
if(FluTheme.isDark){ if(FluTheme.isDark){
return FluTheme.primaryColor.lighter return FluTheme.primaryColor.lighter
@ -22,6 +29,9 @@ TextField{
} }
renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
placeholderTextColor: { 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){ if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
} }

11
src/controls/FluBadge.qml Normal file
View File

@ -0,0 +1,11 @@
import QtQuick 2.15
Item {
property bool isDot: false
Rectangle{
}
}

View File

@ -6,10 +6,17 @@ TextArea{
property int fontStyle: FluText.Body property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize property int pixelSize : FluTheme.textSize
property bool disabled: false
id:input id:input
width: 300 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 wrapMode: Text.WrapAnywhere
renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
selectByMouse: true selectByMouse: true
@ -24,6 +31,9 @@ TextArea{
inputItem: input inputItem: input
} }
placeholderTextColor: { 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){ if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
} }

View File

@ -4,7 +4,7 @@ Item {
id:root id:root
anchors.fill: parent anchors.fill: parent
anchors.margins: -4 anchors.margins: -4
property color color: FluTheme.isDark ? "#FFFFFF" : "#000000" property color color: FluTheme.isDark ? "#FFFFFF" : "#999999"
property int radius: 4 property int radius: 4

View File

@ -6,10 +6,17 @@ TextField{
property int fontStyle: FluText.Body property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize property int pixelSize : FluTheme.textSize
property bool disabled: false
id:input id:input
width: 300 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 renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: { selectionColor: {
if(FluTheme.isDark){ if(FluTheme.isDark){
@ -19,6 +26,9 @@ TextField{
} }
} }
placeholderTextColor: { 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){ if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
} }

View File

@ -9,10 +9,13 @@ Rectangle{
radius: 4 radius: 4
layer.enabled: true layer.enabled: true
color: { 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) 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(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) 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.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{ Rectangle{
width: parent.width width: parent.width
height: input.focus ? 3 : 1 height: inputItem.focus ? 3 : 1
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
visible: !inputItem.disabled
color: { color: {
if(FluTheme.isDark){ 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{ }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{ Behavior on height{

View File

@ -1,6 +1,7 @@
import QtQuick 2.0 import QtQuick 2.0
import QtQuick.Controls 2.0 import QtQuick.Controls 2.0
import FluentUI 1.0 import FluentUI 1.0
import QtQuick.Layouts 1.15
Button { Button {
@ -8,10 +9,8 @@ Button {
property var clickFunc property var clickFunc
id: control id: control
width: 40
implicitWidth: 40
height: 20 height: 20
implicitHeight: 20 implicitHeight: height
focusPolicy:Qt.TabFocus focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked() Keys.onSpacePressed: control.visualFocus&&clicked()
onClicked: { onClicked: {
@ -21,10 +20,18 @@ Button {
} }
selected = !selected selected = !selected
} }
background : Rectangle {
width: control.width contentItem: Item{}
background : RowLayout{
spacing: 0
Rectangle {
id:control_backgound
width: 40
height: control.height height: control.height
radius: height / 2 radius: height / 2
smooth: true
antialiasing: true
FluFocusRectangle{ FluFocusRectangle{
visible: control.visualFocus visible: control.visualFocus
radius: 20 radius: 20
@ -51,11 +58,13 @@ Button {
border.width: 1 border.width: 1
border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666" border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
Rectangle { Rectangle {
x: selected ? control.implicitWidth - width - 4 : 4 x: selected ? control_backgound.width - width - 4 : 4
width: control.height - 8 width: control.height - 8
height: control.height - 8 height: control.height - 8
radius: width / 2 radius: width / 2
antialiasing: true
scale: hovered ? 1.2 : 1.0 scale: hovered ? 1.2 : 1.0
smooth: true
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: selected ? "#FFFFFF" : "#666666" color: selected ? "#FFFFFF" : "#666666"
Behavior on x { Behavior on x {
@ -67,4 +76,12 @@ Button {
} }
} }
FluText{
text: control.text
Layout.leftMargin: 5
visible: text !== ""
}
}
} }

View File

@ -48,5 +48,6 @@
<file>controls/FluCalendarDatePicker.qml</file> <file>controls/FluCalendarDatePicker.qml</file>
<file>controls/FluFocusRectangle.qml</file> <file>controls/FluFocusRectangle.qml</file>
<file>controls/FluCarousel.qml</file> <file>controls/FluCarousel.qml</file>
<file>controls/FluBadge.qml</file>
</qresource> </qresource>
</RCC> </RCC>