mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-07-04 00:55:30 +08:00
update
This commit is contained in:
@ -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");
|
||||
|
@ -4,9 +4,6 @@
|
||||
#include <QQuickView>
|
||||
#include <QRegion>
|
||||
|
||||
//无边框窗口,主要用来实现自定义标题栏。
|
||||
//Windows平台支持拖动和改变大小,支持Aero效果
|
||||
//非Windows平台,去掉边框,不做其它处理。由Qml模拟resize和拖动。
|
||||
class FramelessViewPrivate;
|
||||
class FramelessView : public QQuickView
|
||||
{
|
||||
|
@ -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)
|
||||
}
|
||||
|
11
src/controls/FluBadge.qml
Normal file
11
src/controls/FluBadge.qml
Normal file
@ -0,0 +1,11 @@
|
||||
import QtQuick 2.15
|
||||
|
||||
Item {
|
||||
|
||||
property bool isDot: false
|
||||
|
||||
Rectangle{
|
||||
|
||||
}
|
||||
|
||||
}
|
@ -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)
|
||||
}
|
||||
|
@ -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
|
||||
|
||||
|
@ -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)
|
||||
}
|
||||
|
@ -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{
|
||||
|
@ -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 !== ""
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -48,5 +48,6 @@
|
||||
<file>controls/FluCalendarDatePicker.qml</file>
|
||||
<file>controls/FluFocusRectangle.qml</file>
|
||||
<file>controls/FluCarousel.qml</file>
|
||||
<file>controls/FluBadge.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
Reference in New Issue
Block a user