This commit is contained in:
zhuzichu 2023-07-26 11:02:33 +08:00
parent 5d902dc66e
commit 502044ebd2
5 changed files with 158 additions and 163 deletions

View File

@ -8,6 +8,9 @@ if(APPLE)
set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
endif()
#import example
set(QML_IMPORT_PATH ${CMAKE_BINARY_DIR}/example CACHE STRING "Qt Creator extra QML import paths" FORCE)
#FluentUI
if(FLUENTUI_BUILD_STATIC_LIB)
add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
@ -87,7 +90,7 @@ endif()
#qml
qt_add_qml_module(example
URI example
URI "example"
VERSION 1.0
QML_FILES ${qml_files}
RESOURCES ${resource_files}

View File

@ -164,6 +164,7 @@ FluScrollablePage{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluSpinBox{
}'
}

View File

@ -58,32 +58,26 @@ else()
set(LIB_TYPE "SHARED")
endif()
qt_add_library(${PROJECT_NAME} ${LIB_TYPE})
if (FLUENTUI_BUILD_STATIC_LIB)
qt_add_qml_module(${PROJECT_NAME}
#使PLUGIN_TARGET
OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
VERSION 1.0
URI "FluentUI"
TYPEINFO "plugins.qmltypes"
SOURCES ${sources_files} fluentui.rc
QML_FILES ${qml_files}
RESOURCES ${resource_files}
)
set(PLUGIN_TARGET_NAME "")
else()
qt_add_qml_module(${PROJECT_NAME}
#fluentuiplugin.dllfluentuipluginplugin.dll
PLUGIN_TARGET fluentuiplugin
OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
VERSION 1.0
URI "FluentUI"
#qmltypesfluentuiplugin.qmltypes使import FluentUIplugins.qmltypes
TYPEINFO "plugins.qmltypes"
SOURCES ${sources_files} fluentui.rc
QML_FILES ${qml_files}
RESOURCES ${resource_files}
)
#使 QML
set(PLUGIN_TARGET_NAME ${PROJECT_NAME})
endif()
qt_add_qml_module(${PROJECT_NAME}
PLUGIN_TARGET ${PLUGIN_TARGET_NAME}
OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
VERSION 1.0
URI "FluentUI"
#qmltypesfluentuiplugin.qmltypes使import FluentUIplugins.qmltypes
TYPEINFO "plugins.qmltypes"
SOURCES ${sources_files} fluentui.rc
QML_FILES ${qml_files}
RESOURCES ${resource_files}
)
#
target_link_libraries(${PROJECT_NAME} PUBLIC
Qt::CorePrivate

View File

@ -1,160 +1,157 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Controls.impl
import QtQuick.Templates as T
import FluentUI
Rectangle{
readonly property string displayText : d._displayText
T.SpinBox {
id: control
property bool disabled: false
property int from: 0
property int to: 99
property var validator: IntValidator {
property color normalColor: FluTheme.dark ? Qt.rgba(56/255,56/255,56/255,1) : Qt.rgba(232/255,232/255,232/255,1)
property color hoverColor: FluTheme.dark ? Qt.rgba(64/255,64/255,64/255,1) : Qt.rgba(224/255,224/255,224/255,1)
property color pressedColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(216/255,216/255,216/255,1)
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentItem.implicitWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
up.implicitIndicatorHeight, down.implicitIndicatorHeight)
leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
rightPadding: padding + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
enabled: !disabled
validator: IntValidator {
locale: control.locale.name
bottom: Math.min(control.from, control.to)
top: Math.max(control.from, control.to)
}
id:control
implicitWidth: 200
implicitHeight: 34
radius: 4
color: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
border.width: 1
border.color: FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
QtObject{
id:d
property string _displayText: "0"
}
Component{
id:com_edit
FluTextBox{
rightPadding: 80
iconRightMargin: 55
disabled: control.disabled
validator: control.validator
text: d._displayText
Component.onCompleted: {
forceActiveFocus()
}
onCommit: {
var number = Number(text)
if(number>=control.from && number<=control.to){
d._displayText = String(number)
}
edit_loader.sourceComponent = null
}
onActiveFocusChanged: {
if(!activeFocus){
edit_loader.sourceComponent = null
}
}
}
}
FluTextBox{
id:text_number
anchors.fill: parent
readOnly: true
rightPadding: 80
disabled: control.disabled
contentItem: TextInput {
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/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 placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
z: 2
text: control.displayText
MouseArea{
clip: width < implicitWidth
padding: 6
font: control.font
color: {
if(!enabled){
return disableColor
}
return normalColor
}
selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
selectedTextColor: color
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
readOnly: !control.editable
validator: control.validator
inputMethodHints: control.inputMethodHints
Rectangle{
width: parent.width
height: contentItem.activeFocus ? 3 : 1
anchors.bottom: parent.bottom
visible: contentItem.enabled
color: {
if(FluTheme.dark){
contentItem.activeFocus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1)
}else{
return contentItem.activeFocus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1)
}
}
Behavior on height{
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 83
easing.type: Easing.OutCubic
}
}
}
}
up.indicator: FluItem {
x: control.mirrored ? 0 : control.width - width
height: control.height
implicitWidth: 32
implicitHeight: 32
radius: [0,4,4,0]
Rectangle{
anchors.fill: parent
onClicked: {
edit_loader.sourceComponent = com_edit
color: {
if(control.up.pressed){
return control.pressedColor
}
if(control.up.hovered){
return control.hoverColor
}
return control.normalColor
}
}
Rectangle {
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: parent.width / 3
height: 2
color: enabled ? FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1) : FluColors.Grey90
}
Rectangle {
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: 2
height: parent.width / 3
color: enabled ? FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1) : FluColors.Grey90
}
}
Loader{
id:edit_loader
anchors.fill: parent
}
FluIconButton{
id:btn_up
width: 20
height: 20
iconSize: 16
disabled: {
if(control.disabled===true){
return true
}
return Number(control.displayText) === control.to
}
iconSource: FluentIcons.ChevronUp
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 30
}
onClicked: {
d._displayText = String(Math.min(Number(d._displayText)+1,control.to))
}
MouseArea{
down.indicator: FluItem {
x: control.mirrored ? parent.width - width : 0
height: control.height
implicitWidth: 32
implicitHeight: 32
radius: [4,0,0,4]
Rectangle{
anchors.fill: parent
onReleased: {
timer.stop()
}
TapHandler{
onTapped: {
btn_up.clicked()
}
onCanceled: {
timer.stop()
}
onLongPressed: {
timer.isUp = true
timer.start()
}
color: {
if(control.down.pressed){
return control.pressedColor
}
if(control.down.hovered){
return control.hoverColor
}
return normalColor
}
}
Rectangle {
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: parent.width / 3
height: 2
color: enabled ? FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1) : FluColors.Grey90
}
}
FluIconButton{
id:btn_down
iconSource: FluentIcons.ChevronDown
width: 20
height: 20
disabled: {
if(control.disabled === true){
return true
background: Rectangle {
implicitWidth: 136
radius: 4
border.width: 1
border.color: {
if(contentItem.disabled){
return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
}
return Number(control.displayText) === control.from
return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
}
iconSize: 16
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 5
}
onClicked: {
d._displayText = String(Math.max(Number(d._displayText)-1,control.from))
}
MouseArea{
anchors.fill: parent
onReleased: {
timer.stop()
color: {
if(contentItem.disabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
}
TapHandler{
onTapped: {
btn_down.clicked()
}
onCanceled: {
timer.stop()
}
onLongPressed: {
timer.isUp = false
timer.start()
}
if(contentItem.activeFocus){
return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
}
}
}
Timer{
id:timer
property bool isUp : true
interval: 50
repeat: true
onTriggered: {
if(isUp){
btn_up.clicked()
}else{
btn_down.clicked()
if(contentItem.hovered){
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
}
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
}
}
}

View File

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