This commit is contained in:
朱子楚\zhuzi 2023-09-13 21:24:02 +08:00
parent 3b61985cfe
commit af74f35e43
16 changed files with 114 additions and 137 deletions

View File

@ -28,6 +28,7 @@ Window {
FluApp.init(app) FluApp.init(app)
FluTheme.darkMode = FluThemeType.System FluTheme.darkMode = FluThemeType.System
FluTheme.enableAnimation = true FluTheme.enableAnimation = true
FluTheme.nativeText = true
FluApp.routes = { FluApp.routes = {
"/":"qrc:/example/qml/window/MainWindow.qml", "/":"qrc:/example/qml/window/MainWindow.qml",
"/about":"qrc:/example/qml/window/AboutWindow.qml", "/about":"qrc:/example/qml/window/AboutWindow.qml",

View File

@ -28,6 +28,7 @@ Window {
FluApp.init(app) FluApp.init(app)
FluTheme.darkMode = FluThemeType.System FluTheme.darkMode = FluThemeType.System
FluTheme.enableAnimation = true FluTheme.enableAnimation = true
FluTheme.nativeText = true
FluApp.routes = { FluApp.routes = {
"/":"qrc:/example/qml/window/MainWindow.qml", "/":"qrc:/example/qml/window/MainWindow.qml",
"/about":"qrc:/example/qml/window/AboutWindow.qml", "/about":"qrc:/example/qml/window/AboutWindow.qml",

View File

@ -38,7 +38,6 @@ FluPopup {
right: parent.right right: parent.right
} }
} }
Flickable{ Flickable{
id:sroll_message id:sroll_message
contentWidth: width contentWidth: width
@ -47,11 +46,10 @@ FluPopup {
left: parent.left left: parent.left
right: parent.right right: parent.right
} }
boundsBehavior:Flickable.StopAtBounds
contentHeight: text_message.height contentHeight: text_message.height
clip: true
height: Math.min(text_message.height,300) height: Math.min(text_message.height,300)
ScrollBar.vertical: FluScrollBar {} ScrollBar.vertical: FluScrollBar {}
FluText{ FluText{
id:text_message id:text_message
font: FluTextStyle.Body font: FluTextStyle.Body
@ -63,9 +61,7 @@ FluPopup {
rightPadding: 20 rightPadding: 20
bottomPadding: 14 bottomPadding: 14
} }
} }
Rectangle{ Rectangle{
id:layout_actions id:layout_actions
height: 68 height: 68
@ -140,4 +136,3 @@ FluPopup {
} }
} }
} }

View File

@ -20,8 +20,8 @@ TextArea{
} }
font:FluTextStyle.Body font:FluTextStyle.Body
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
padding: 8 padding: 7
leftPadding: padding+2 leftPadding: padding+4
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectedTextColor: color selectedTextColor: color
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6) selectionColor: FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6)

View File

@ -20,8 +20,8 @@ TextField{
return normalColor return normalColor
} }
font:FluTextStyle.Body font:FluTextStyle.Body
padding: 8 padding: 7
leftPadding: padding+2 leftPadding: padding+4
echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6) selectionColor: FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6)
@ -36,22 +36,9 @@ TextField{
return placeholderNormalColor return placeholderNormalColor
} }
selectByMouse: true selectByMouse: true
rightPadding: icon_end.visible ? 50 : 30
background: FluTextBoxBackground{ background: FluTextBoxBackground{
inputItem: control inputItem: control
implicitWidth: 240 implicitWidth: 240
FluIcon{
id:icon_end
iconSource: control.iconSource
iconSize: 15
opacity: 0.5
visible: control.iconSource != 0
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 5
}
}
} }
Keys.onEnterPressed: (event)=> d.handleCommit(event) Keys.onEnterPressed: (event)=> d.handleCommit(event)
Keys.onReturnPressed:(event)=> d.handleCommit(event) Keys.onReturnPressed:(event)=> d.handleCommit(event)
@ -65,16 +52,16 @@ TextField{
id:btn_reveal id:btn_reveal
iconSource:FluentIcons.RevealPasswordMedium iconSource:FluentIcons.RevealPasswordMedium
iconSize: 10 iconSize: 10
width: 20 width: 30
height: 20 height: 20
verticalPadding: 0 verticalPadding: 0
horizontalPadding: 0 horizontalPadding: 0
opacity: 0.5 iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1)
visible: control.text !== "" visible: control.text !== ""
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
right: parent.right right: parent.right
rightMargin: icon_end.visible ? 25 : 5 rightMargin: 5
} }
} }
FluTextBoxMenu{ FluTextBoxMenu{

View File

@ -48,7 +48,7 @@ T.SpinBox {
inputMethodHints: control.inputMethodHints inputMethodHints: control.inputMethodHints
Rectangle{ Rectangle{
width: parent.width width: parent.width
height: contentItem.activeFocus ? 3 : 1 height: contentItem.activeFocus ? 2 : 1
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
visible: contentItem.enabled visible: contentItem.enabled
color: { color: {

View File

@ -142,7 +142,10 @@ Rectangle {
id:item_text id:item_text
text: itemData text: itemData
anchors.fill: parent anchors.fill: parent
anchors.margins: 10 leftPadding: 11
rightPadding: 11
topPadding: 6
bottomPadding: 6
elide: Text.ElideRight elide: Text.ElideRight
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter

View File

@ -1,4 +1,5 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15 import QtQuick.Controls 2.15
import FluentUI 1.0 import FluentUI 1.0
@ -11,11 +12,11 @@ TextField{
property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
property int iconRightMargin: icon_end.visible ? 25 : 5 property int iconRightMargin: icon_end.visible ? 40 : 5
property bool cleanEnabled: true property bool cleanEnabled: true
id:control id:control
padding: 8 padding: 7
leftPadding: padding+2 leftPadding: padding+4
enabled: !disabled enabled: !disabled
color: { color: {
if(!enabled){ if(!enabled){
@ -25,7 +26,7 @@ TextField{
} }
font:FluTextStyle.Body font:FluTextStyle.Body
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor:FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6) selectionColor: FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6)
selectedTextColor: color selectedTextColor: color
placeholderTextColor: { placeholderTextColor: {
if(!enabled){ if(!enabled){
@ -41,18 +42,6 @@ TextField{
background: FluTextBoxBackground{ background: FluTextBoxBackground{
inputItem: control inputItem: control
implicitWidth: 240 implicitWidth: 240
FluIcon{
id:icon_end
iconSource: control.iconSource
iconSize: 15
opacity: 0.5
visible: control.iconSource != 0
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 5
}
}
} }
Keys.onEnterPressed: (event)=> d.handleCommit(event) Keys.onEnterPressed: (event)=> d.handleCommit(event)
Keys.onReturnPressed:(event)=> d.handleCommit(event) Keys.onReturnPressed:(event)=> d.handleCommit(event)
@ -68,11 +57,20 @@ TextField{
acceptedButtons: Qt.RightButton acceptedButtons: Qt.RightButton
onClicked: control.echoMode !== TextInput.Password && menu.popup() onClicked: control.echoMode !== TextInput.Password && menu.popup()
} }
RowLayout{
height: parent.height
anchors{
right: parent.right
rightMargin: 5
}
spacing: 4
FluIconButton{ FluIconButton{
iconSource:FluentIcons.ChromeClose iconSource: FluentIcons.Cancel
iconSize: 10 iconSize: 12
width: 20 Layout.preferredWidth: 30
height: 20 Layout.preferredHeight: 20
Layout.alignment: Qt.AlignVCenter
iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1)
verticalPadding: 0 verticalPadding: 0
horizontalPadding: 0 horizontalPadding: 0
visible: { visible: {
@ -83,19 +81,23 @@ TextField{
return false return false
return control.text !== "" return control.text !== ""
} }
anchors{ contentDescription:"Clean"
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: control.iconRightMargin
}
contentDescription:"清空"
onClicked:{ onClicked:{
control.text = "" control.text = ""
} }
} }
FluIcon{
id:icon_end
iconSource: control.iconSource
iconSize: 12
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: 10
iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1)
visible: control.iconSource != 0
}
}
FluTextBoxMenu{ FluTextBoxMenu{
id:menu id:menu
inputItem: control inputItem: control
} }
} }

View File

@ -36,14 +36,14 @@ Rectangle{
} }
Rectangle{ Rectangle{
width: parent.width width: parent.width
height: inputItem.activeFocus ? 3 : 1 height: inputItem.activeFocus ? 2 : 1
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
visible: !inputItem.disabled visible: !inputItem.disabled
color: { color: {
if(FluTheme.dark){ if(FluTheme.dark){
inputItem.activeFocus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1) return inputItem.activeFocus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1)
}else{ }else{
return inputItem.activeFocus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1) return inputItem.activeFocus ? FluTheme.primaryColor.dark : Qt.rgba(134/255,134/255,134/255,1)
} }
} }
Behavior on height{ Behavior on height{

View File

@ -38,7 +38,6 @@ FluPopup {
right: parent.right right: parent.right
} }
} }
Flickable{ Flickable{
id:sroll_message id:sroll_message
contentWidth: width contentWidth: width
@ -47,11 +46,10 @@ FluPopup {
left: parent.left left: parent.left
right: parent.right right: parent.right
} }
boundsBehavior:Flickable.StopAtBounds
contentHeight: text_message.height contentHeight: text_message.height
clip: true
height: Math.min(text_message.height,300) height: Math.min(text_message.height,300)
ScrollBar.vertical: FluScrollBar {} ScrollBar.vertical: FluScrollBar {}
FluText{ FluText{
id:text_message id:text_message
font: FluTextStyle.Body font: FluTextStyle.Body
@ -63,9 +61,7 @@ FluPopup {
rightPadding: 20 rightPadding: 20
bottomPadding: 14 bottomPadding: 14
} }
} }
Rectangle{ Rectangle{
id:layout_actions id:layout_actions
height: 68 height: 68

View File

@ -22,7 +22,7 @@ TextArea{
font:FluTextStyle.Body font:FluTextStyle.Body
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
padding: 8 padding: 8
leftPadding: padding+2 leftPadding: padding+4
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectedTextColor: color selectedTextColor: color
selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6) selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)

View File

@ -21,11 +21,11 @@ TextField{
return normalColor return normalColor
} }
font:FluTextStyle.Body font:FluTextStyle.Body
padding: 8 padding: 7
leftPadding: padding+2 leftPadding: padding+4
echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6) selectionColor: FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6)
selectedTextColor: color selectedTextColor: color
placeholderTextColor: { placeholderTextColor: {
if(!enabled){ if(!enabled){
@ -37,22 +37,9 @@ TextField{
return placeholderNormalColor return placeholderNormalColor
} }
selectByMouse: true selectByMouse: true
rightPadding: icon_end.visible ? 50 : 30
background: FluTextBoxBackground{ background: FluTextBoxBackground{
inputItem: control inputItem: control
implicitWidth: 240 implicitWidth: 240
FluIcon{
id:icon_end
iconSource: control.iconSource
iconSize: 15
opacity: 0.5
visible: control.iconSource != 0
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 5
}
}
} }
Keys.onEnterPressed: (event)=> d.handleCommit(event) Keys.onEnterPressed: (event)=> d.handleCommit(event)
Keys.onReturnPressed:(event)=> d.handleCommit(event) Keys.onReturnPressed:(event)=> d.handleCommit(event)
@ -66,16 +53,16 @@ TextField{
id:btn_reveal id:btn_reveal
iconSource:FluentIcons.RevealPasswordMedium iconSource:FluentIcons.RevealPasswordMedium
iconSize: 10 iconSize: 10
width: 20 width: 30
height: 20 height: 20
verticalPadding: 0 verticalPadding: 0
horizontalPadding: 0 horizontalPadding: 0
opacity: 0.5 iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1)
visible: control.text !== "" visible: control.text !== ""
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
right: parent.right right: parent.right
rightMargin: icon_end.visible ? 25 : 5 rightMargin: 5
} }
} }
FluTextBoxMenu{ FluTextBoxMenu{

View File

@ -49,7 +49,7 @@ T.SpinBox {
inputMethodHints: control.inputMethodHints inputMethodHints: control.inputMethodHints
Rectangle{ Rectangle{
width: parent.width width: parent.width
height: contentItem.activeFocus ? 3 : 1 height: contentItem.activeFocus ? 2 : 1
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
visible: contentItem.enabled visible: contentItem.enabled
color: { color: {

View File

@ -144,9 +144,12 @@ Rectangle {
id:item_text id:item_text
text: itemData text: itemData
anchors.fill: parent anchors.fill: parent
anchors.margins: 10
elide: Text.ElideRight elide: Text.ElideRight
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
leftPadding: 11
rightPadding: 11
topPadding: 6
bottomPadding: 6
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
HoverHandler{ HoverHandler{
id: hover_handler id: hover_handler
@ -230,7 +233,7 @@ Rectangle {
clip: true clip: true
delegate: Rectangle { delegate: Rectangle {
id:item_table id:item_table
property var position: Qt.point(column,row) property point position: Qt.point(column,row)
required property bool selected required property bool selected
color: (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06)) color: (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06))
implicitHeight: 40 implicitHeight: 40
@ -283,7 +286,7 @@ Rectangle {
property var itemData: display property var itemData: display
property var tableView: table_view property var tableView: table_view
property var tableModel: table_model property var tableModel: table_model
property var position: item_table.position property point position: item_table.position
property int row: position.y property int row: position.y
property int column: position.x property int column: position.x
anchors.fill: parent anchors.fill: parent

View File

@ -1,5 +1,6 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Basic import QtQuick.Controls.Basic
import FluentUI import FluentUI
@ -12,11 +13,11 @@ TextField{
property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
property int iconRightMargin: icon_end.visible ? 25 : 5 property int iconRightMargin: icon_end.visible ? 40 : 5
property bool cleanEnabled: true property bool cleanEnabled: true
id:control id:control
padding: 8 padding: 7
leftPadding: padding+2 leftPadding: padding+4
enabled: !disabled enabled: !disabled
color: { color: {
if(!enabled){ if(!enabled){
@ -26,7 +27,7 @@ TextField{
} }
font:FluTextStyle.Body font:FluTextStyle.Body
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6) selectionColor: FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6)
selectedTextColor: color selectedTextColor: color
placeholderTextColor: { placeholderTextColor: {
if(!enabled){ if(!enabled){
@ -42,18 +43,6 @@ TextField{
background: FluTextBoxBackground{ background: FluTextBoxBackground{
inputItem: control inputItem: control
implicitWidth: 240 implicitWidth: 240
FluIcon{
id:icon_end
iconSource: control.iconSource
iconSize: 15
opacity: 0.5
visible: control.iconSource != 0
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 5
}
}
} }
Keys.onEnterPressed: (event)=> d.handleCommit(event) Keys.onEnterPressed: (event)=> d.handleCommit(event)
Keys.onReturnPressed:(event)=> d.handleCommit(event) Keys.onReturnPressed:(event)=> d.handleCommit(event)
@ -69,11 +58,20 @@ TextField{
acceptedButtons: Qt.RightButton acceptedButtons: Qt.RightButton
onClicked: control.echoMode !== TextInput.Password && menu.popup() onClicked: control.echoMode !== TextInput.Password && menu.popup()
} }
RowLayout{
height: parent.height
anchors{
right: parent.right
rightMargin: 5
}
spacing: 4
FluIconButton{ FluIconButton{
iconSource:FluentIcons.ChromeClose iconSource: FluentIcons.Cancel
iconSize: 10 iconSize: 12
width: 20 Layout.preferredWidth: 30
height: 20 Layout.preferredHeight: 20
Layout.alignment: Qt.AlignVCenter
iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1)
verticalPadding: 0 verticalPadding: 0
horizontalPadding: 0 horizontalPadding: 0
visible: { visible: {
@ -84,19 +82,23 @@ TextField{
return false return false
return control.text !== "" return control.text !== ""
} }
anchors{ contentDescription:"Clean"
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: control.iconRightMargin
}
contentDescription:"清空"
onClicked:{ onClicked:{
control.text = "" control.text = ""
} }
} }
FluIcon{
id:icon_end
iconSource: control.iconSource
iconSize: 12
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: 10
iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1)
visible: control.iconSource != 0
}
}
FluTextBoxMenu{ FluTextBoxMenu{
id:menu id:menu
inputItem: control inputItem: control
} }
} }

View File

@ -36,14 +36,14 @@ Rectangle{
} }
Rectangle{ Rectangle{
width: parent.width width: parent.width
height: inputItem.activeFocus ? 3 : 1 height: inputItem.activeFocus ? 2 : 1
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
visible: !inputItem.disabled visible: !inputItem.disabled
color: { color: {
if(FluTheme.dark){ if(FluTheme.dark){
inputItem.activeFocus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1) return inputItem.activeFocus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1)
}else{ }else{
return inputItem.activeFocus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1) return inputItem.activeFocus ? FluTheme.primaryColor.dark : Qt.rgba(134/255,134/255,134/255,1)
} }
} }
Behavior on height{ Behavior on height{