update

Make the FluTableView readonly text copiable.

example/CMakeLists.txt

@@ -3,7 +3,6 @@ cmake_minimum_required(VERSION 3.20)
 project(example VERSION 0.1 LANGUAGES CXX)
 
 #配置通用编译
-set(CMAKE_AUTOMOC ON)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 if(APPLE)
     set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
@@ -20,10 +19,17 @@ endif()
 file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,6,0)
+add_definitions(-DVERSION=1,3,7,1)
 
 find_package(Qt6 REQUIRED COMPONENTS Quick)
-qt_standard_project_setup()
+
+if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
+    qt_standard_project_setup()
+else()
+    set(CMAKE_AUTOMOC ON)
+    set(CMAKE_AUTORCC ON)
+    set(CMAKE_AUTOUIC ON)
+endif()
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
@@ -105,10 +111,3 @@ install(TARGETS example
     LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
     RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
 )
-
-qt_generate_deploy_app_script(
-    TARGET example
-    OUTPUT_SCRIPT deploy_script
-    NO_UNSUPPORTED_PLATFORM_ERROR
-)
-install(SCRIPT ${deploy_script})

example/qml/App.qml

@@ -5,7 +5,8 @@ import QtQuick.Layouts
 import FluentUI
 
 Window {
-    id:app
+    id: app
+    flags: Qt.SplashScreen
     Component.onCompleted: {
         FluApp.init(app)
         FluTheme.darkMode = FluDarkMode.System

example/qml/component/CodeExpander.qml

@@ -133,13 +133,12 @@ FluExpander{
                     "FluRemoteLoader",
                     "FluMenuBar",
                     "FluPagination",
-                    "FluRadioButtons"
+                    "FluRadioButtons",
+                    "FluImage",
+                    "FluSpinBox"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");
         return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
     }
-
-
-
 }

example/qml/global/ItemsOriginal.qml

@@ -54,6 +54,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_Text.qml")
             }
         }
+        FluPaneItem{
+            title:"Image"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Image.qml")
+            }
+        }
         FluPaneItem{
             title:"Slider"
             image:"qrc:/example/res/image/control/Slider.png"

example/qml/page/T_DatePicker.qml

@@ -23,6 +23,9 @@ FluScrollablePage{
                 text:"showYear=true"
             }
             FluDatePicker{
+                onCurrentChanged: {
+                    showSuccess(current.toLocaleDateString())
+                }
             }
         }
     }
@@ -50,7 +53,9 @@ FluScrollablePage{
 
             FluDatePicker{
                 showYear:false
-
+                onCurrentChanged: {
+                    showSuccess(current.toLocaleDateString())
+                }
             }
         }
     }

example/qml/page/T_Image.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Image"
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 300
+        paddings: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+            FluImage{
+                width: 384
+                height: 240
+                source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_4.jpg"
+                onStatusChanged:{
+                    if(status === Image.Error){
+                        showError("图片加载失败，请重新加载")
+                    }
+                }
+                clickErrorListener: function(){
+                    source = "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluImage{
+    width: 400
+    height: 300
+    source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
+}'
+    }
+
+}

example/qml/page/T_Pivot.qml

@@ -76,5 +76,4 @@ FluScrollablePage{
 }
 '
     }
-
 }

example/qml/page/T_RemoteLoader.qml

@@ -5,8 +5,10 @@ import QtQuick.Controls
 import FluentUI
 import "qrc:///example/qml/component"
 
-FluRemoteLoader{
-    property int pageMode: FluNavigationView.SingleTop
-    property string url: ''
-    source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
+FluPage{
+    pageMode: FluNavigationView.SingleTop
+    FluRemoteLoader{
+        anchors.fill: parent
+        source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
+    }
 }

example/qml/page/T_TableView.qml

@@ -10,7 +10,29 @@ FluContentPage{
     title:"TableView"
 
     Component.onCompleted: {
-        loadData(1,2000)
+        loadData(1,1000)
+    }
+
+    Component{
+        id:com_action
+        Item{
+            RowLayout{
+                anchors.centerIn: parent
+                FluButton{
+                    text:"删除"
+                    onClicked: {
+                        table_view.closeEditor()
+                        tableModel.removeRow(row)
+                    }
+                }
+                FluFilledButton{
+                    text:"编辑"
+                    onClicked: {
+                        showSuccess(JSON.stringify(tableModel.getRow(row)))
+                    }
+                }
+            }
+        }
     }
 
     function loadData(page,count){
@@ -40,7 +62,12 @@ FluContentPage{
                                 name: getRandomName(),
                                 age:getRandomAge(),
                                 address: getRandomAddresses(),
-                                nickname: getRandomNickname()
+                                nickname: getRandomNickname(),
+                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+                                height:44,
+                                minimumHeight:44,
+                                maximumHeight:300,
+                                action:com_action
                             })
         }
         table_view.dataSource = dataSource
@@ -48,9 +75,9 @@ FluContentPage{
 
     Component{
         id:com_combobox
-
         FluComboBox {
             anchors.fill: parent
+            focus: true
             currentIndex: display
             editable: true
             model: ListModel {
@@ -63,23 +90,30 @@ FluContentPage{
                 currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
                 selectAll()
             }
-            TableView.onCommit: {
+            onCommit: {
                 display = editText
+                tableView.closeEditor()
             }
         }
     }
 
     FluTableView{
         id:table_view
-        anchors.fill: parent
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            bottom: gagination.top
+        }
         anchors.topMargin: 20
         columnSource:[
             {
                 title: '姓名',
                 dataIndex: 'name',
                 width:100,
-                minimumWidth:50
-
+                minimumWidth:80,
+                maximumWidth:200,
+                readOnly:true
             },
             {
                 title: '年龄',
@@ -87,19 +121,57 @@ FluContentPage{
                 editDelegate:com_combobox,
                 width:100,
                 minimumWidth:100,
-                maximumWidth: 100
+                maximumWidth:100
             },
             {
                 title: '住址',
                 dataIndex: 'address',
-                width:200
+                width:200,
+                minimumWidth:100,
+                maximumWidth:250
             },
             {
                 title: '别名',
                 dataIndex: 'nickname',
                 width:100,
-
+                minimumWidth:80,
+                maximumWidth:200
+            },
+            {
+                title: '长字符串',
+                dataIndex: 'longstring',
+                width:200,
+                minimumWidth:100,
+                maximumWidth:300
+            },
+            {
+                title: '操作',
+                dataIndex: 'action',
+                width:160,
+                minimumWidth:160,
+                maximumWidth:160
             }
         ]
     }
+
+    FluPagination{
+        id:gagination
+        anchors{
+            bottom: parent.bottom
+            left: parent.left
+        }
+        pageCurrent: 1
+        itemCount: 100000
+        pageButtonCount: 7
+        __itemPerPage: 1000
+        onRequestPage:
+            (page,count)=> {
+                table_view.closeEditor()
+                loadData(page,count)
+                table_view.resetPosition()
+            }
+    }
+
+
+
 }

example/qml/page/T_TextBox.qml

@@ -166,6 +166,41 @@ FluScrollablePage{
 }'
     }
 
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluSpinBox{
+            Layout.topMargin: 20
+//            disabled: spin_box_switch.checked
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:spin_box_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluSpinBox{
+
+}'
+    }
 
     function generateRandomNames(numNames) {
         const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

example/qml/page/T_TimePicker.qml

@@ -27,6 +27,9 @@ FluScrollablePage{
             }
 
             FluTimePicker{
+                onCurrentChanged: {
+                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
+                }
             }
 
         }
@@ -53,11 +56,14 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePicker.H"
+                text:"hourFormat=FluTimePicker.HH"
             }
 
             FluTimePicker{
                  hourFormat:FluTimePicker.HH
+                 onCurrentChanged: {
+                     showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
+                 }
             }
 
         }

example/qml/window/MainWindow.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt.labs.platform
 import FluentUI
+import example
 import "qrc:///example/qml/component"
 import "qrc:///example/qml/global"
 
@@ -112,6 +113,12 @@ CustomWindow {
             }
             Row{
                 z:8
+                anchors{
+                    top: parent.top
+                    left: parent.left
+                    topMargin: FluTools.isMacos() ? 20 : 5
+                    leftMargin: 5
+                }
                 FluIconButton{
                     iconSource: FluentIcons.ChromeBack
                     width: 30
@@ -134,6 +141,7 @@ CustomWindow {
 
             FluRemoteLoader{
                 id:loader
+                lazy: true
                 anchors.fill: parent
                 //                source: "http://localhost:9000/RemoteComponent.qml"
                 source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
@@ -200,54 +208,12 @@ CustomWindow {
         }
     }
 
-    Image{
-        id:img_cache
-        visible: false
+    CircularReveal{
+        id:reveal
+        target:window.contentItem
         anchors.fill: parent
-    }
-
-    Canvas{
-        id:canvas
-        anchors.fill: parent
-        property int centerX: canvas.width / 2
-        property int centerY: canvas.height / 2
-        property real radius: 0
-        property int maxRadius: 0
-        property url imageUrl
-        Behavior on radius{
-            id:anim_radius
-            NumberAnimation {
-                target: canvas
-                property: "radius"
-                duration: 333
-                easing.type: Easing.OutCubic
-            }
-        }
-        onRadiusChanged: {
-            canvas.requestPaint()
-        }
-        onPaint: {
-            var ctx = canvas.getContext("2d");
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.clearRect(0, 0, canvasSize.width, canvasSize.height);
-            ctx.save()
-            if(img_cache.source.toString().length!==0){
-                try{
-                    ctx.drawImage(img_cache, 0, 0,  canvasSize.width, canvasSize.height, 0, 0,  canvasSize.width, canvasSize.height)
-                }catch(e){
-                    img_cache.source = ""
-                }
-            }
-            clearArc(ctx, centerX, centerY, radius)
-            ctx.restore()
-        }
-        function clearArc(ctx,x, y, radius, startAngle, endAngle) {
-            ctx.beginPath()
-            ctx.globalCompositeOperation = 'destination-out'
-            ctx.fillStyle = 'black'
-            ctx.arc(x, y, radius, 0, 2*Math.PI);
-            ctx.fill();
-            ctx.closePath();
+        onImageChanged: {
+            changeDark()
         }
     }
 
@@ -256,32 +222,23 @@ CustomWindow {
     }
 
     function handleDarkChanged(button){
-        var changeDark = function(){
-            if(FluTheme.dark){
-                FluTheme.darkMode = FluDarkMode.Light
-            }else{
-                FluTheme.darkMode = FluDarkMode.Dark
-            }
-        }
-        if(FluTools.isWin()){
+        if(FluTools.isMacos()){
+            changeDark()
+        }else{
             var target = window.contentItem
             var pos = button.mapToItem(target,0,0)
             var mouseX = pos.x
             var mouseY = pos.y
-            canvas.maxRadius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
-            target.grabToImage(function(result) {
-                img_cache.source = result.url
-                canvas.requestPaint()
-                changeDark()
-                canvas.centerX = mouseX
-                canvas.centerY = mouseY
-                anim_radius.enabled = false
-                canvas.radius = 0
-                anim_radius.enabled = true
-                canvas.radius = canvas.maxRadius
-            },canvas.canvasSize)
+            var radius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
+            reveal.start(reveal.width*Screen.devicePixelRatio,reveal.height*Screen.devicePixelRatio,Qt.point(mouseX,mouseY),radius)
+        }
+    }
+
+    function changeDark(){
+        if(FluTheme.dark){
+            FluTheme.darkMode = FluDarkMode.Light
         }else{
-            changeDark()
+            FluTheme.darkMode = FluDarkMode.Dark
         }
     }
 

example/src/component/CircularReveal.cpp

@@ -0,0 +1,45 @@
+#include "CircularReveal.h"
+#include <QGuiApplication>
+#include <QQuickItemGrabResult>
+#include <QPainterPath>
+
+CircularReveal::CircularReveal(QQuickItem* parent) : QQuickPaintedItem(parent)
+{
+    _anim = new QPropertyAnimation(this, "radius", this);
+    _anim->setDuration(333);
+    _anim->setEasingCurve(QEasingCurve::OutCubic);
+    connect(_anim, &QPropertyAnimation::finished,this,[=](){
+        setVisible(false);
+    });
+    connect(this,&CircularReveal::radiusChanged,this,[=](){
+        update();
+    });
+}
+
+void CircularReveal::paint(QPainter* painter)
+{
+    painter->save();
+    painter->drawImage(QRect(0, 0, static_cast<int>(width()), static_cast<int>(height())), _source);
+    QPainterPath path;
+    path.moveTo(_center.x(),_center.y());
+    path.addEllipse(QPointF(_center.x(),_center.y()), _radius, _radius);
+    painter->setCompositionMode(QPainter::CompositionMode_Clear);
+    painter->fillPath(path, Qt::black);
+    painter->restore();
+}
+
+void CircularReveal::start(int w,int h,const QPoint& center,int radius){
+    _anim->setStartValue(0);
+    _anim->setEndValue(radius);
+    _center = center;
+    _grabResult = _target->grabToImage(QSize(w,h));
+    connect(_grabResult.data(), &QQuickItemGrabResult::ready, this, &CircularReveal::handleGrabResult);
+}
+
+void CircularReveal::handleGrabResult(){
+    _grabResult.data()->image().swap(_source);
+    update();
+    setVisible(true);
+    Q_EMIT imageChanged();
+    _anim->start();
+}

example/src/component/CircularReveal.h

@@ -0,0 +1,28 @@
+#ifndef CIRCULARREVEAL_H
+#define CIRCULARREVEAL_H
+
+#include <QQuickItem>
+#include <QQuickPaintedItem>
+#include <QPainter>
+#include <QPropertyAnimation>
+#include "src/stdafx.h"
+
+class CircularReveal : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(QQuickItem*,target)
+    Q_PROPERTY_AUTO(int,radius)
+public:
+    CircularReveal(QQuickItem* parent = nullptr);
+    void paint(QPainter* painter) override;
+    Q_INVOKABLE void start(int w,int h,const QPoint& center,int radius);
+    Q_SIGNAL void imageChanged();
+    Q_SLOT void handleGrabResult();
+private:
+    QImage _source;
+    QPropertyAnimation* _anim;
+    QPoint _center;
+    QSharedPointer<QQuickItemGrabResult>  _grabResult;
+};
+
+#endif // CIRCULARREVEAL_H

example/src/main.cpp

@@ -6,6 +6,7 @@
 #include <QProcess>
 #include <FramelessHelper/Quick/framelessquickmodule.h>
 #include <FramelessHelper/Core/private/framelessconfig_p.h>
+#include "src/component/CircularReveal.h"
 #include "AppInfo.h"
 
 FRAMELESSHELPER_USE_NAMESPACE
@@ -37,6 +38,8 @@ int main(int argc, char *argv[])
     app.setQuitOnLastWindowClosed(false);
     QQmlApplicationEngine engine;
     FramelessHelper::Quick::registerTypes(&engine);
+    qmlRegisterType<CircularReveal>("example", 1, 0, "CircularReveal");
+
     appInfo->init(&engine);
     const QUrl url(QStringLiteral("qrc:/example/qml/App.qml"));
     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,

src/CMakeLists.txt

@@ -3,7 +3,6 @@ cmake_minimum_required(VERSION 3.20)
 project(fluentuiplugin LANGUAGES CXX)
 
 #配置通用编译
-set(CMAKE_AUTOMOC ON)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 if(APPLE)
     set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
@@ -13,10 +12,17 @@ endif()
 set(QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,6,0)
+add_definitions(-DVERSION=1,3,7,1)
 
 find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
-qt_standard_project_setup()
+
+if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
+    qt_standard_project_setup()
+else()
+    set(CMAKE_AUTOMOC ON)
+    set(CMAKE_AUTORCC ON)
+    set(CMAKE_AUTOUIC ON)
+endif()
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
@@ -62,9 +68,9 @@ qt_add_qml_module(fluentuiplugin
 
 #链接库
 target_link_libraries(fluentuiplugin PUBLIC
-    Qt::Core
-    Qt::Quick
-    Qt::Qml
+    Qt::CorePrivate
+    Qt::QuickPrivate
+    Qt::QmlPrivate
 )
 
 #安装

src/FluApp.cpp

@@ -38,13 +38,13 @@ void FluApp::run(){
 
 void FluApp::navigate(const QString& route,const QJsonObject& argument,FluRegister* fluRegister){
     if(!routes().contains(route)){
-        qErrnoWarning("没有找到当前路由");
+        qCritical()<<"No route found "<<route;
         return;
     }
     QQmlEngine *engine = qmlEngine(appWindow);
     QQmlComponent component(engine, routes().value(route).toString());
     if (component.isError()) {
-        qWarning() << component.errors();
+        qCritical() << component.errors();
         return;
     }
     QVariantMap properties;
@@ -109,3 +109,11 @@ QJsonArray FluApp::awesomelist(const QString& keyword)
 void FluApp::closeApp(){
     qApp->exit(0);
 }
+
+void FluApp::deleteWindow(QQuickWindow* window){
+    if(window){
+        wnds.remove(window->winId());
+        window->deleteLater();
+        window = nullptr;
+    }
+}

src/FluApp.h

@@ -73,6 +73,8 @@ public:
      */
     Q_INVOKABLE void closeApp();
 
+    Q_INVOKABLE void deleteWindow(QQuickWindow* window);
+
 public:
     /**
      * @brief wnds

src/FluTools.cpp

@@ -2,6 +2,7 @@
 #include <QGuiApplication>
 #include <QClipboard>
 #include <QUuid>
+#include <QCursor>
 
 FluTools* FluTools::m_instance = nullptr;
 
@@ -63,6 +64,33 @@ bool FluTools::isWin(){
 #endif
 }
 
+int FluTools::qtMajor(){
+    const QString qtVersion = QString::fromLatin1(qVersion());
+    const QStringList versionParts = qtVersion.split('.');
+    return versionParts[0].toInt();
+}
+
+int FluTools::qtMinor(){
+    const QString qtVersion = QString::fromLatin1(qVersion());
+    const QStringList versionParts = qtVersion.split('.');
+    return versionParts[1].toInt();
+}
+
 void FluTools::setQuitOnLastWindowClosed(bool val){
     qApp->setQuitOnLastWindowClosed(val);
 }
+
+void FluTools::setOverrideCursor(Qt::CursorShape shape){
+    qApp->setOverrideCursor(QCursor(shape));
+}
+
+void FluTools::restoreOverrideCursor(){
+    qApp->restoreOverrideCursor();
+}
+
+void FluTools::deleteItem(QObject *p){
+    if(p){
+        delete p;
+        p = nullptr;
+    }
+}

src/FluTools.h

@@ -50,6 +50,15 @@ public:
 
     Q_INVOKABLE void setQuitOnLastWindowClosed(bool val);
 
+    Q_INVOKABLE int qtMajor();
+
+    Q_INVOKABLE int qtMinor();
+
+    Q_INVOKABLE void setOverrideCursor(Qt::CursorShape shape);
+
+    Q_INVOKABLE void restoreOverrideCursor();
+
+    Q_INVOKABLE void deleteItem(QObject *p);
 };
 
 #endif // FLUTOOLS_H

src/WindowHelper.cpp

@@ -1,7 +1,6 @@
 #include "WindowHelper.h"
 
 #include "FluRegister.h"
-#include "FluApp.h"
 
 WindowHelper::WindowHelper(QObject *parent)
     : QObject{parent}
@@ -19,10 +18,3 @@ QVariant WindowHelper::createRegister(QQuickWindow* window,const QString& path){
     p->path(path);
     return  QVariant::fromValue(p);
 }
-
-void WindowHelper::deleteWindow(){
-    if(this->window){
-        FluApp::getInstance()->wnds.remove(this->window->winId());
-        this->window->deleteLater();
-    }
-}

src/WindowHelper.h

@@ -24,11 +24,6 @@ public:
      */
     Q_INVOKABLE void initWindow(QQuickWindow* window);
 
-    /**
-     * @brief deleteWindow 销毁窗口，释放资源，QML中的Window close并不会销毁窗口，只是把窗口隐藏了
-     */
-    Q_INVOKABLE void deleteWindow();
-
     /**
      * @brief createRegister 创建一个FluRegsiter对象，在FluWindow中registerForWindowResult方法调用
      * @param window

src/imports/FluentUI/Controls/FluCalendarView.qml

@@ -243,8 +243,6 @@ Item {
             }
             FluTextButton{
                 id:title
-                leftPadding: 0
-                rightPadding: 0
                 anchors{
                     verticalCenter: parent.verticalCenter
                     left: parent.left

src/imports/FluentUI/Controls/FluComboBox.qml

@@ -6,6 +6,7 @@ import QtQuick.Templates as T
 
 ComboBox {
     id: control
+    signal commit
     property bool disabled: false
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
@@ -43,7 +44,8 @@ ComboBox {
         topPadding: 6 - control.padding
         bottomPadding: 6 - control.padding
         renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-        selectionColor: FluTheme.primaryColor.lightest
+        selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+        selectedTextColor: color
         text: control.editable ? control.editText : control.displayText
         enabled: control.editable
         autoScroll: control.editable
@@ -57,17 +59,24 @@ ComboBox {
         leftInset:1
         topInset:1
         bottomInset:1
-        focus: true
         rightInset:1
         background: FluTextBoxBackground{
             border.width: 0
             inputItem: contentItem
         }
+        Component.onCompleted: {
+            forceActiveFocus()
+        }
+        Keys.onEnterPressed: (event)=> handleCommit(event)
+        Keys.onReturnPressed:(event)=> handleCommit(event)
+        function handleCommit(event){
+            control.commit()
+        }
     }
 
     background: Rectangle {
         implicitWidth: 140
-        implicitHeight: 28
+        implicitHeight: 32
         border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
         border.width: 1
         visible: !control.flat || control.down

src/imports/FluentUI/Controls/FluCopyableText.qml

@@ -14,15 +14,19 @@ TextEdit {
     leftPadding: 0
     rightPadding: 0
     topPadding: 0
+    selectByMouse: true
+    selectedTextColor: color
     bottomPadding: 0
-    selectionColor: FluTheme.primaryColor.lightest
+    selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
     font:FluTextStyle.Body
     onSelectedTextChanged: {
         control.forceActiveFocus()
     }
-    TapHandler {
+    MouseArea{
+        anchors.fill: parent
+        cursorShape: Qt.IBeamCursor
         acceptedButtons: Qt.RightButton
-        onTapped: control.echoMode !== TextInput.Password && menu.popup()
+        onClicked: control.echoMode !== TextInput.Password && menu.popup()
     }
     FluTextBoxMenu{
         id:menu

src/imports/FluentUI/Controls/FluDatePicker.qml

@@ -8,11 +8,9 @@ Rectangle {
     property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property var window : Window.window
     property bool showYear: true
-    property bool changeFlag: true
-    readonly property var rowData: ["","",""]
-    id:root
+    property var current
+    id:control
     color: {
         if(mouse_area.containsMouse){
             return hoverColor
@@ -24,6 +22,13 @@ Rectangle {
     radius: 4
     border.width: 1
     border.color: dividerColor
+    Item{
+        id:d
+        property var window: Window.window
+        property bool changeFlag: true
+        property var rowData: ["","",""]
+        visible: false
+    }
     MouseArea{
         id:mouse_area
         hoverEnabled: true
@@ -317,8 +322,19 @@ Rectangle {
                         }
                         text: "确定"
                         onClicked: {
-                            changeFlag = false
+                            d.changeFlag = false
                             popup.close()
+                            const year = text_year.text
+                            const month = text_month.text
+                            const day = text_day.text
+                            const date = new Date()
+                            date.setFullYear(parseInt(year));
+                            date.setMonth(parseInt(month) - 1);
+                            date.setDate(parseInt(day));
+                            date.setHours(0);
+                            date.setMinutes(0);
+                            date.setSeconds(0);
+                            current = date
                         }
                     }
                 }
@@ -326,10 +342,10 @@ Rectangle {
         }
         y:35
         function showPopup() {
-            changeFlag = true
-            rowData[0] = text_year.text
-            rowData[1] = text_month.text
-            rowData[2] = text_day.text
+            d.changeFlag = true
+            d.rowData[0] = text_year.text
+            d.rowData[1] = text_month.text
+            d.rowData[2] = text_day.text
             const now = new Date();
             var year = text_year.text === "年"? now.getFullYear() : Number(text_year.text);
             var month = text_month.text === "月"? now.getMonth() + 1 : Number(text_month.text);
@@ -342,21 +358,21 @@ Rectangle {
             list_view_3.model = generateMonthDaysArray(year,month)
             list_view_3.currentIndex = list_view_3.model.indexOf(day)
             text_day.text = day
-            var pos = root.mapToItem(null, 0, 0)
-            if(window.height>pos.y+root.height+container.height){
-                popup.y = root.height
+            var pos = control.mapToItem(null, 0, 0)
+            if(d.window.height>pos.y+control.height+container.height){
+                popup.y = control.height
             } else if(pos.y>container.height){
                 popup.y = -container.height
             } else {
-                popup.y = window.height-(pos.y+container.height)
+                popup.y = d.window.height-(pos.y+container.height)
             }
             popup.open()
         }
         onClosed: {
-            if(changeFlag){
-                text_year.text = rowData[0]
-                text_month.text = rowData[1]
-                text_day.text = rowData[2]
+            if(d.changeFlag){
+                text_year.text = d.rowData[0]
+                text_month.text = d.rowData[1]
+                text_day.text = d.rowData[2]
             }
         }
     }

src/imports/FluentUI/Controls/FluImage.qml

@@ -0,0 +1,44 @@
+import QtQuick
+import QtQuick.Controls
+import FluentUI
+
+Item {
+    property alias sourceSize : image.sourceSize
+    property alias fillMode : image.fillMode
+    property url source
+    property string errorButtonText: "重新加载"
+    property var status
+    property var clickErrorListener : function(){
+        image.source = ""
+        image.source = control.source
+    }
+    id: control
+    Image{
+        id:image
+        anchors.fill: parent
+        source: control.source
+        opacity: control.status === Image.Ready
+        onStatusChanged:{
+            control.status = image.status
+        }
+        Behavior on opacity {
+            NumberAnimation{
+                duration: 83
+            }
+        }
+    }
+    Rectangle{
+        anchors.fill: parent
+        color: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
+        FluProgressRing{
+            anchors.centerIn: parent
+            visible: control.status === Image.Loading
+        }
+        FluFilledButton{
+            text: control.errorButtonText
+            anchors.centerIn: parent
+            visible: control.status === Image.Error
+            onClicked: clickErrorListener()
+        }
+    }
+}

src/imports/FluentUI/Controls/FluMultilineTextBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 TextArea{
+    signal commit
     property bool disabled: false
     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)
@@ -21,8 +22,11 @@ TextArea{
     }
     font:FluTextStyle.Body
     wrapMode: Text.WrapAnywhere
+    padding: 8
+    leftPadding: 8
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTheme.primaryColor.lightest
+    selectedTextColor: color
+    selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor
@@ -34,9 +38,23 @@ TextArea{
     }
     selectByMouse: true
     background: FluTextBoxBackground{ inputItem: control }
-    TapHandler {
+    Keys.onEnterPressed: (event)=> d.handleCommit(event)
+    Keys.onReturnPressed:(event)=> d.handleCommit(event)
+    QtObject{
+        id:d
+        function handleCommit(event){
+            if(event.modifiers & Qt.ControlModifier){
+                insert(control.cursorPosition, "\n")
+                return
+            }
+            control.commit()
+        }
+    }
+    MouseArea{
+        anchors.fill: parent
+        cursorShape: Qt.IBeamCursor
         acceptedButtons: Qt.RightButton
-        onTapped: control.echoMode !== TextInput.Password && menu.popup()
+        onClicked: control.echoMode !== TextInput.Password && menu.popup()
     }
     FluTextBoxMenu{
         id:menu

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -31,7 +31,6 @@ Item {
     id:control
     QtObject{
         id:d
-        property var pageMap: ({})
         property var stackItems: []
         property int displayMode: FluNavigationView.Open
         property bool enableNavigationPanel: false
@@ -121,8 +120,7 @@ Item {
             }
             Behavior on height {
                 NumberAnimation{
-                    duration: 167
-                    easing.type: Easing.InCubic
+                    duration: 83
                 }
             }
         }
@@ -138,8 +136,7 @@ Item {
             }
             Behavior on height {
                 NumberAnimation{
-                    duration: 167
-                    easing.type: Easing.InCubic
+                    duration: 83
                 }
             }
             width: layout_list.width
@@ -330,8 +327,7 @@ Item {
         Item{
             Behavior on height {
                 NumberAnimation{
-                    duration: 167
-                    easing.type: Easing.InCubic
+                    duration: 83
                 }
             }
             clip: true
@@ -522,7 +518,7 @@ Item {
                 disabled:  nav_swipe.depth <= 1
                 iconSize: 13
                 onClicked: {
-                    nav_swipe.pop()
+                    FluTools.deleteItem(nav_swipe.pop())
                     d.stackItems.pop()
                     var item = d.stackItems[d.stackItems.length-1]
                     if(item.idx<(nav_list.count - layout_footer.count)){
@@ -685,7 +681,6 @@ Item {
             }
             return "transparent"
         }
-        clip: true
         x: visible ? 0 : -width
         Behavior on width {
             NumberAnimation{
@@ -955,7 +950,6 @@ Item {
                 radius: 4
             }
             color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
-
         }
         function showPopup(pos,model){
             control_popup.x = pos.x
@@ -964,6 +958,13 @@ Item {
             control_popup.open()
         }
     }
+    Component{
+        id:com_placeholder
+        Item{
+            property int pageMode: FluNavigationView.SingleInstance
+            property string url
+        }
+    }
     function collapseAll(){
         for(var i=0;i<nav_list.model.length;i++){
             var item = nav_list.model[i]
@@ -982,18 +983,8 @@ Item {
     function getItems(){
         return nav_list.model
     }
-
-
-    Component{
-        id:com_placeholder
-        Item{
-            property int pageMode: FluNavigationView.SingleInstance
-            property string url
-        }
-    }
-
     function push(url,argument={}){
-        let page = nav_swipe.find(function(item) {
+        var page = nav_swipe.find(function(item) {
             return item.url === url;
         })
         if(page){
@@ -1002,7 +993,7 @@ Item {
             case FluNavigationView.SingleTask:
                 while(nav_swipe.currentItem !== page)
                 {
-                    nav_swipe.pop()
+                    FluTools.deleteItem(nav_swipe.pop())
                     d.stackItems.pop()
                 }
                 return
@@ -1015,22 +1006,22 @@ Item {
             default:
             }
         }
-        var comp = Qt.createComponent(url)
-        if (comp.status === Component.Ready) {
-            //先判断nav_swipe2中是否有当前url数据
-            var pageIndex = -1
-            for(var i=0;i<nav_swipe2.children.length;i++){
-                var item =  nav_swipe2.children[i]
-                if(item.url === url){
-                    pageIndex = i
-                    break
-                }
+
+        var pageIndex = -1
+        for(var i=0;i<nav_swipe2.children.length;i++){
+            var item =  nav_swipe2.children[i]
+            if(item.url === url){
+                pageIndex = i
+                break
             }
-            var options = Object.assign(argument,{url:url})
-            if(pageIndex!==-1){
-                nav_swipe2.currentIndex = pageIndex
-                nav_swipe.push(com_placeholder,options)
-            }else{
+        }
+        var options = Object.assign(argument,{url:url})
+        if(pageIndex!==-1){
+            nav_swipe2.currentIndex = pageIndex
+            nav_swipe.push(com_placeholder,options)
+        }else{
+            var comp = Qt.createComponent(url)
+            if (comp.status === Component.Ready) {
                 var obj  = comp.createObject(nav_swipe,options)
                 if(obj.pageMode === FluNavigationView.SingleInstance){
                     nav_swipe.push(com_placeholder,options)
@@ -1039,11 +1030,11 @@ Item {
                 }else{
                     nav_swipe.push(obj)
                 }
+            }else{
+                console.error(comp.errorString())
             }
-            d.stackItems.push(nav_list.model[nav_list.currentIndex])
-        }else{
-            console.error(comp.errorString())
         }
+        d.stackItems.push(nav_list.model[nav_list.currentIndex])
     }
     function getCurrentIndex(){
         return nav_list.currentIndex

src/imports/FluentUI/Controls/FluPasswordBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 TextField{
+    signal commit
     property bool disabled: false
     property int iconSource: 0
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@@ -21,9 +22,12 @@ TextField{
         return normalColor
     }
     font:FluTextStyle.Body
+    padding: 8
+    leftPadding: 8
     echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTheme.primaryColor.lightest
+    selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+    selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor
@@ -50,6 +54,14 @@ TextField{
             }
         }
     }
+    Keys.onEnterPressed: (event)=> d.handleCommit(event)
+    Keys.onReturnPressed:(event)=> d.handleCommit(event)
+    QtObject{
+        id:d
+        function handleCommit(event){
+            control.commit()
+        }
+    }
     FluIconButton{
         id:btn_reveal
         iconSource:FluentIcons.RevealPasswordMedium
@@ -64,10 +76,6 @@ TextField{
             rightMargin: icon_end.visible ? 25 : 5
         }
     }
-    TapHandler {
-        acceptedButtons: Qt.RightButton
-        onTapped: control.echoMode !== TextInput.Password && menu.popup()
-    }
     FluTextBoxMenu{
         id:menu
         inputItem: control

src/imports/FluentUI/Controls/FluRemoteLoader.qml

@@ -4,15 +4,20 @@ import FluentUI
 
 FluStatusView {
     property url source: ""
+    property bool lazy: false
     color:"transparent"
     id:control
     onErrorClicked: {
         reload()
     }
+    Component.onCompleted: {
+        if(!lazy){
+            loader.source = control.source
+        }
+    }
     Loader{
         id:loader
         anchors.fill: parent
-        source: control.source
         asynchronous: true
         onStatusChanged: {
             if(status === Loader.Error){

src/imports/FluentUI/Controls/FluScrollBar.qml

@@ -1,189 +1,88 @@
 import QtQuick
-import QtQuick.Controls.Basic
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 import FluentUI
 
-ScrollBar {
-    property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
-    property color handleHoverColor: Qt.lighter(handleNormalColor)
-    property color handlePressColor: Qt.darker(handleNormalColor)
-    property bool expand: false
+T.ScrollBar {
     id: control
+
+    property color color : FluTheme.dark ? Qt.rgba(159/255,159/255,159/255,1) : Qt.rgba(138/255,138/255,138/255,1)
+    property color pressedColor: FluTheme.dark ? Qt.darker(color,1.2) : Qt.lighter(color,1.2)
+
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                             implicitContentWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                              implicitContentHeight + topPadding + bottomPadding)
-    visible: control.policy !== ScrollBar.AlwaysOff
-    minimumSize: 0.3
-    topPadding:{
-        if(vertical){
-            if(expand)
-                return 15
-            return 2
-        }else{
-            if(expand){
-                return 2
-            }
-            return 4
-        }
-    }
-    bottomPadding:{
-        if(vertical){
-            if(expand)
-                return 15
-            return 2
-        }else{
-            if(expand){
-                return 2
-            }
-            return 4
-        }
-    }
-    leftPadding:{
-        if(vertical){
-            if(expand){
-                return 2
-            }
-            return 4
-        }else{
-            if(expand)
-                return 15
-            return 2
-        }
-    }
-    rightPadding:{
-        if(vertical){
-            if(expand){
-                return 2
-            }
-            return 4
-        }else{
-            if(expand)
-                return 15
-            return 2
-        }
-    }
-    Behavior on topPadding {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    Behavior on bottomPadding {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    Behavior on leftPadding {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    Behavior on rightPadding {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    contentItem: Rectangle {
-        id:item_react
-        implicitWidth: expand ? 8 : 2
-        implicitHeight:  expand ? 8 : 2
-        radius: width / 2
-        color: control.pressed?handlePressColor:control.hovered?handleHoverColor:handleNormalColor
-        opacity:(control.policy === ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
-    }
-    background:  Rectangle{
-        radius: 5
-        color: {
-            if(expand && item_react.opacity){
-                if(FluTheme.dark){
-                    return Qt.rgba(0,0,0,1)
+
+    padding: 2
+    visible: control.policy !== T.ScrollBar.AlwaysOff
+    minimumSize: Math.max(orientation === Qt.Horizontal ? height / width : width / height,0.3)
+    contentItem: Item {
+        property bool collapsed: (control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0))
+        implicitWidth: control.interactive ? 6 : 2
+        implicitHeight: control.interactive ? 6 : 2
+
+        Rectangle{
+            id:rect_bar
+            width:  vertical ? 2 : parent.width
+            height: horizontal  ? 2 : parent.height
+            color:{
+                if(control.pressed){
+                    return control.pressedColor
                 }
-                return Qt.rgba(1,1,1,1)
+                return control .color
             }
-            return Qt.rgba(0,0,0,0)
-        }
-        MouseArea{
-            id:mouse_item
-            hoverEnabled: true
-            anchors.fill: parent
-            onEntered: {
-                timer.restart()
+            anchors{
+                right: vertical ? parent.right : undefined
+                bottom: horizontal ? parent.bottom : undefined
             }
-            onExited: {
-                timer.restart()
+            radius: width / 2
+            visible: control.size < 1.0
+        }
+        states: [
+            State{
+                name:"hide"
+                when: contentItem.collapsed
+                PropertyChanges {
+                    target: rect_bar
+                    width:  vertical ? 6 : parent.width
+                    height: horizontal  ? 6 : parent.height
+                }
             }
-        }
-    }
-    Timer{
-        id:timer
-        interval: 800
-        onTriggered: {
-            expand = mouse_item.containsMouse || btn_top.hovered || btn_bottom.hovered || btn_left.hovered || btn_right.hovered
-        }
-    }
-    Behavior on implicitWidth {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    FluIconButton{
-        id:btn_top
-        iconSource: FluentIcons.CaretSolidUp
-        anchors.horizontalCenter: parent.horizontalCenter
-        width:10
-        height:10
-        z:100
-        iconColor: hovered ? FluColors.Black : FluColors.Grey120
-        iconSize: 8
-        anchors.top: parent.top
-        anchors.topMargin: 4
-        visible:vertical && expand && item_react.opacity
-        onClicked:{
-            decrease()
-        }
-    }
-    FluIconButton{
-        id:btn_bottom
-        iconSource: FluentIcons.CaretSolidDown
-        visible:vertical && expand && item_react.opacity
-        width:10
-        height:10
-        iconSize: 8
-        iconColor: hovered ? FluColors.Black : FluColors.Grey120
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 4
-        onClicked:{
-            increase()
-        }
-    }
-    FluIconButton{
-        id:btn_left
-        iconSource: FluentIcons.CaretSolidLeft
-        visible:!vertical && expand && item_react.opacity
-        width:10
-        height:10
-        iconSize: 8
-        iconColor: hovered ? FluColors.Black : FluColors.Grey120
-        anchors.leftMargin: 4
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: parent.left
-        onClicked:{
-            decrease()
-        }
-    }
-    FluIconButton{
-        id:btn_right
-        iconSource: FluentIcons.CaretSolidRight
-        visible:!vertical && expand && item_react.opacity
-        width:10
-        height:10
-        iconSize: 8
-        iconColor: hovered ? FluColors.Black : FluColors.Grey120
-        anchors.rightMargin: 4
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.right: parent.right
-        onClicked:{
-            increase()
-        }
+            ,State{
+                name:"show"
+                when: !contentItem.expand
+                PropertyChanges {
+                    target: rect_bar
+                    width:  vertical ? 2 : parent.width
+                    height: horizontal  ? 2 : parent.height
+                }
+            }
+        ]
+        transitions:[
+            Transition {
+                from: "hide"
+                SequentialAnimation {
+                    PauseAnimation { duration: 450 }
+                    NumberAnimation {
+                        target: rect_bar
+                        properties: vertical ? "width"  : "height"
+                        duration: 167
+                        easing.type: Easing.InCubic
+                        to:2
+                    }
+                }
+            }
+            ,Transition {
+                from: "show"
+                NumberAnimation {
+                    target: rect_bar
+                    properties: vertical ? "width"  : "height"
+                    duration: 167
+                    easing.type: Easing.InCubic
+                    to:6
+                }
+            }
+        ]
     }
 }

src/imports/FluentUI/Controls/FluScrollablePage.qml

@@ -41,6 +41,8 @@ FluPage {
         contentWidth: parent.width
         contentHeight: container.height
         ScrollBar.vertical: FluScrollBar {
+            anchors.right: flickview.right
+            anchors.rightMargin: 2
         }
         anchors{
             top: text_title.bottom

src/imports/FluentUI/Controls/FluSlider.qml

@@ -42,27 +42,31 @@ T.Slider {
             }
         }
     }
+    background: Item {
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: control.horizontal ? 180 : 6
+        implicitHeight: control.horizontal ? 6 : 180
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
+        Rectangle{
+            anchors.fill: parent
+            anchors.margins: 1
+            radius: 2
+            color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
+        }
+        scale: control.horizontal && control.mirrored ? -1 : 1
+        Rectangle {
+            y: control.horizontal ? 0 : control.visualPosition * parent.height
+            width: control.horizontal ? control.position * parent.width : 6
+            height: control.horizontal ? 6 : control.position * parent.height
+            radius: 3
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+        }
+    }
     FluTooltip{
         parent: control.handle
         visible: control.tooltipEnabled && control.pressed
         text:String(control.value)
     }
-    background: Rectangle {
-        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
-        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
-        implicitWidth: control.horizontal ? 180 : 4
-        implicitHeight: control.horizontal ? 4 : 180
-        width: control.horizontal ? control.availableWidth : implicitWidth
-        height: control.horizontal ? implicitHeight : control.availableHeight
-        radius: 3
-        color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
-        scale: control.horizontal && control.mirrored ? -1 : 1
-        Rectangle {
-            y: control.horizontal ? 0 : control.visualPosition * parent.height
-            width: control.horizontal ? control.position * parent.width : 4
-            height: control.horizontal ? 4 : control.position * parent.height
-            radius: 2
-            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
-        }
-    }
 }

src/imports/FluentUI/Controls/FluSpinBox.qml

@@ -0,0 +1,147 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI
+
+Rectangle{
+    readonly property string displayText : d._displayText
+    property int from: 0
+    property int to: 99
+    property var validator: IntValidator {
+        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
+            closeRightMargin: 55
+            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
+        text: control.displayText
+        MouseArea{
+            anchors.fill: parent
+            onClicked: {
+                edit_loader.sourceComponent = com_edit
+            }
+        }
+    }
+    Loader{
+        id:edit_loader
+        anchors.fill: parent
+    }
+    FluIconButton{
+        id:btn_up
+        width: 20
+        height: 20
+        iconSize: 16
+        iconSource: FluentIcons.ChevronUp
+        enabled: Number(control.displayText) !== control.to
+        anchors{
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            rightMargin: 30
+        }
+        onClicked: {
+            d._displayText = String(Math.min(Number(d._displayText)+1,control.to))
+        }
+        MouseArea{
+            anchors.fill: parent
+            onReleased: {
+                timer.stop()
+            }
+            TapHandler{
+                onTapped: {
+                    btn_up.clicked()
+                }
+                onCanceled: {
+                    timer.stop()
+                }
+                onLongPressed: {
+                    timer.isUp = true
+                    timer.start()
+                }
+            }
+        }
+    }
+    FluIconButton{
+        id:btn_down
+        iconSource: FluentIcons.ChevronDown
+        width: 20
+        height: 20
+        iconSize: 16
+        enabled: Number(control.displayText) !== control.from
+        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()
+            }
+            TapHandler{
+                onTapped: {
+                    btn_down.clicked()
+                }
+                onCanceled: {
+                    timer.stop()
+                }
+                onLongPressed: {
+                    timer.isUp = false
+                    timer.start()
+                }
+            }
+        }
+    }
+    Timer{
+        id:timer
+        property bool isUp : true
+        interval: 50
+        repeat: true
+        onTriggered: {
+            if(isUp){
+                btn_up.clicked()
+            }else{
+                btn_down.clicked()
+            }
+        }
+    }
+}

src/imports/FluentUI/Controls/FluTableView.qml

@@ -8,6 +8,9 @@ import FluentUI
 Rectangle {
     property var columnSource
     property var dataSource
+    property color selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+    property color hoverButtonColor: Qt.alpha(selectionColor,0.2)
+    property color pressedButtonColor: Qt.alpha(selectionColor,0.4)
     id:control
     color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     onColumnSourceChanged: {
@@ -15,14 +18,40 @@ Rectangle {
             var com_column = Qt.createComponent("FluTableModelColumn.qml")
             if (com_column.status === Component.Ready) {
                 var columns= []
+                var header_rows = {}
                 columnSource.forEach(function(item){
                     var column = com_column.createObject(table_model,{display:item.dataIndex});
                     columns.push(column)
+                    header_rows[item.dataIndex] = item.title
                 })
                 table_model.columns = columns
+                header_model.columns = columns
+                d.header_rows = [header_rows]
             }
         }
     }
+    QtObject{
+        id:d
+        property var header_rows:[]
+        property bool selectionFlag: true
+        function obtEditDelegate(column,row){
+            var display = table_model.data(table_model.index(row,column),"display")
+            var cellItem = table_view.itemAtCell(column, row)
+            var cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
+            item_loader.column = column
+            item_loader.row = row
+            item_loader.x = table_view.contentX + cellPosition.x
+            item_loader.y = table_view.contentY + cellPosition.y
+            item_loader.width = table_view.columnWidthProvider(column)
+            item_loader.height = table_view.rowHeightProvider(row)
+            item_loader.display = display
+            var obj =columnSource[column].editDelegate
+            if(obj){
+                return obj
+            }
+            return com_edit
+        }
+    }
     onDataSourceChanged: {
         table_model.clear()
         dataSource.forEach(function(item){
@@ -34,13 +63,75 @@ Rectangle {
     }
     Component{
         id:com_edit
-        FluTextBox {
+        Item{
             anchors.fill: parent
-            text: display
-            verticalAlignment: TextInput.AlignVCenter
-            Component.onCompleted: selectAll()
-            TableView.onCommit: {
-                display = text
+            ScrollView{
+                id:item_scroll
+                clip: true
+                anchors.fill: parent
+                ScrollBar.vertical: FluScrollBar{
+                    parent: item_scroll
+                    x: item_scroll.mirrored ? 0 : item_scroll.width - width
+                    y: item_scroll.topPadding
+                    height: item_scroll.availableHeight
+                    active: item_scroll.ScrollBar.horizontal.active
+                }
+                FluMultilineTextBox {
+                    id:text_box
+                    text: display
+                    readOnly: true === columnSource[column].readOnly
+                    verticalAlignment: TextInput.AlignVCenter
+                    Component.onCompleted: {
+                        forceActiveFocus()
+                        selectAll()
+                    }
+                    rightPadding: 24
+                    onCommit: {
+                        if(!readOnly){
+                            display = text
+                        }
+                        tableView.closeEditor()
+                    }
+                }
+            }
+            FluIconButton{
+                iconSource:FluentIcons.ChromeClose
+                iconSize: 10
+                width: 20
+                height: 20
+                visible: {
+                    if(text_box.readOnly)
+                        return false
+                    return text_box.text !== ""
+                }
+                anchors{
+                    verticalCenter: parent.verticalCenter
+                    right: parent.right
+                    rightMargin: 5
+                }
+                onClicked:{
+                    text_box.text = ""
+                }
+            }
+        }
+    }
+    Component{
+        id:com_text
+        FluText {
+            id:item_text
+            text: itemData
+            anchors.fill: parent
+            anchors.margins: 10
+            elide: Text.ElideRight
+            wrapMode: Text.WrapAnywhere
+            verticalAlignment: Text.AlignVCenter
+            HoverHandler{
+                id: hover_handler
+            }
+            FluTooltip{
+                text: item_text.text
+                delay: 500
+                visible: item_text.contentWidth < item_text.implicitWidth && item_text.contentHeight < item_text.implicitHeight &&  hover_handler.hovered
             }
         }
     }
@@ -60,105 +151,323 @@ Rectangle {
             boundsBehavior: Flickable.StopAtBounds
             ScrollBar.horizontal: FluScrollBar{}
             ScrollBar.vertical: FluScrollBar{}
-            selectionModel: ItemSelectionModel {}
-            columnWidthProvider: function(column) {
-                let w = explicitColumnWidth(column)
-                if (w >= 0){
-                    var minimumWidth = columnSource[column].minimumWidth
-                    var maximumWidth = columnSource[column].maximumWidth
-                    if(!minimumWidth){
-                        minimumWidth = 100
+            selectionModel: ItemSelectionModel {
+                id:selection_model
+                model: table_model
+                onSelectionChanged: {
+                    if(selection_rect.dragging){
+                        d.selectionFlag = !d.selectionFlag
                     }
-                    if(!maximumWidth){
-                        maximumWidth = 65535
-                    }
-
-                    return Math.min(Math.max(minimumWidth, w),maximumWidth)
                 }
-                return implicitColumnWidth(column)
+            }
+            columnWidthProvider: function(column) {
+                var w = columnSource[column].width
+                if(column === item_loader.column){
+                    item_loader.width = w
+                }
+                if(column === item_loader.column-1){
+                    let cellItem = table_view.itemAtCell(item_loader.column, item_loader.row)
+                    if(cellItem){
+                        let cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
+                        item_loader.x = table_view.contentX + cellPosition.x
+                    }
+                }
+                return w
             }
             rowHeightProvider: function(row) {
-                let h = explicitRowHeight(row)
-                if (h >= 0){
-                    return Math.max(40, h)
+                var h = table_model.getRow(row).height
+                if(row === item_loader.row){
+                    item_loader.height = h
                 }
-                return implicitRowHeight(row)
+                if(row === item_loader.row-1){
+                    let cellItem = table_view.itemAtCell(item_loader.column, item_loader.row)
+                    if(cellItem){
+                        let cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
+                        item_loader.y = table_view.contentY + cellPosition.y
+                    }
+                }
+                return h
             }
             model: table_model
             clip: true
             delegate: Rectangle {
+                id:item_table
+                property var position: Qt.point(column,row)
                 required property bool selected
-                required property bool current
-                color: selected ? FluTheme.primaryColor.lightest: (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
                 implicitWidth: columnSource[column].width
-                FluText {
-                    text: display
+                Rectangle{
                     anchors.fill: parent
-                    anchors.margins: 10
-                    elide: Text.ElideRight
-                    verticalAlignment: Text.AlignVCenter
+                    visible: item_loader.sourceComponent === null
+                    color: selected ? control.selectionColor : "#00000000"
                 }
-                TableView.editDelegate: {
-                    var obj =columnSource[column].editDelegate
-                    if(obj){
-                        return obj
+                MouseArea{
+                    anchors.fill: parent
+                    acceptedButtons: Qt.LeftButton
+                    onPressed:{
+                        closeEditor()
+                        table_view.interactive = false
                     }
-                    return com_edit
+                    onReleased: {
+                        table_view.interactive = true
+                    }
+                    onDoubleClicked:{
+                        if(display instanceof Component){
+                            return
+                        }
+                        item_loader.sourceComponent = d.obtEditDelegate(column,row)
+                    }
+                    onClicked:
+                        (event)=>{
+                            item_loader.sourceComponent = null
+                            if(!(event.modifiers & Qt.ControlModifier)){
+                                selection_model.clear()
+                            }
+                            selection_model.select(table_model.index(row,column),ItemSelectionModel.Select)
+                            d.selectionFlag = !d.selectionFlag
+                            event.accepted = true
+                        }
                 }
+                Loader{
+                    property var itemData: display
+                    property var tableView: table_view
+                    property var tableModel: table_model
+                    property var position: item_table.position
+                    property int row: position.y
+                    property int column: position.x
+                    anchors.fill: parent
+                    sourceComponent: {
+                        if(itemData instanceof Component){
+                            return itemData
+                        }
+                        return com_text
+                    }
+                }
+            }
+        }
+        Loader{
+            id:item_loader
+            z:2
+            property var display
+            property int column
+            property int row
+            property var tableView: control
+            sourceComponent: null
+            onDisplayChanged: {
+                var obj = table_model.getRow(row)
+                obj[columnSource[column].dataIndex] = display
+                table_model.setRow(row,obj)
             }
         }
     }
     Component{
         id:com_handle
-        FluControl {
-            width: 24
-            height: 24
-            background: Rectangle{
-                radius: 12
-                color: FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+        Item {}
+    }
+    SelectionRectangle {
+        id:selection_rect
+        target: {
+            if(item_loader.sourceComponent){
+                return null
             }
-            visible: SelectionRectangle.control.active
-            FluShadow{
-                radius: 12
-            }
-            Rectangle{
-                width: 24
-                height: 24
-                radius: 12
-                scale: pressed?4/10:hovered?6/10:5/10
-                color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
-                anchors.centerIn: parent
-                Behavior on scale {
-                    NumberAnimation{
-                        duration: 167
-                    }
-                }
+            return table_view
+        }
+        bottomRightHandle:com_handle
+        topLeftHandle: com_handle
+        onDraggingChanged: {
+            if(!dragging){
+                table_view.interactive = true
             }
         }
     }
-    SelectionRectangle {
-        target: table_view
-        bottomRightHandle:com_handle
-        topLeftHandle: com_handle
-    }
-    FluHorizontalHeaderView {
+    TableView {
         id: header_horizontal
-        textRole: "title"
-        model: columnSource
+        model: TableModel{
+            id:header_model
+            rows: d.header_rows
+        }
+        syncDirection: Qt.Horizontal
         anchors.left: scroll_table.left
         anchors.top: parent.top
+        implicitWidth: syncView ? syncView.width : 0
+        implicitHeight: Math.max(1, contentHeight)
         syncView: table_view
         boundsBehavior: Flickable.StopAtBounds
         clip: true
+        delegate: FluControl {
+            id:column_item_control
+            readonly property real cellPadding: 8
+            readonly property var obj : columnSource[column]
+            implicitWidth: column_text.implicitWidth + (cellPadding * 2)
+            implicitHeight: Math.max(header_horizontal.height, column_text.implicitHeight + (cellPadding * 2))
+            Rectangle{
+                anchors.fill: parent
+                color:{
+                    d.selectionFlag
+                    if(column_item_control.pressed){
+                        return control.pressedButtonColor
+                    }
+                    if(selection_model.isColumnSelected(column)){
+                        return control.hoverButtonColor
+                    }
+                    return column_item_control.hovered ? control.hoverButtonColor :  FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+                }
+                border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+            }
+            FluText {
+                id: column_text
+                text: model.display
+                width: parent.width
+                height: parent.height
+                font.bold:{
+                    d.selectionFlag
+                    return selection_model.columnIntersectsSelection(column)
+                }
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+            onClicked: {
+                closeEditor()
+                selection_model.clear()
+                for(var i=0;i<=table_view.rows;i++){
+                    selection_model.select(table_model.index(i,column),ItemSelectionModel.Select)
+                }
+                d.selectionFlag = !d.selectionFlag
+            }
+            MouseArea{
+                property point clickPos: "0,0"
+                height: parent.height
+                width: 6
+                anchors.right: parent.right
+                acceptedButtons: Qt.LeftButton
+                visible: !(obj.width === obj.minimumWidth && obj.width === obj.maximumWidth)
+                cursorShape: Qt.SplitHCursor
+                preventStealing: true
+                propagateComposedEvents: true
+                onPressed :
+                    (mouse)=>{
+                        FluTools.setOverrideCursor(Qt.SplitHCursor)
+                        clickPos = Qt.point(mouse.x, mouse.y)
+                    }
+                onReleased:{
+                    FluTools.restoreOverrideCursor()
+                }
+                onPositionChanged:
+                    (mouse)=>{
+                        var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
+                        var minimumWidth = obj.minimumWidth
+                        var maximumWidth = obj.maximumWidth
+                        if(!minimumWidth){
+                            minimumWidth = 100
+                        }
+                        if(!maximumWidth){
+                            maximumWidth = 65535
+                        }
+                        obj.width = Math.min(Math.max(minimumWidth, obj.width + delta.x),maximumWidth)
+                        table_view.forceLayout()
+                    }
+            }
+        }
     }
-    FluVerticalHeaderView {
+    TableView {
         id: header_vertical
         boundsBehavior: Flickable.StopAtBounds
         anchors.top: scroll_table.top
         anchors.left: parent.left
+        implicitWidth: Math.max(1, contentWidth)
+        implicitHeight: syncView ? syncView.height : 0
+        syncDirection: Qt.Vertical
         syncView: table_view
         clip: true
+        model: TableModel{
+            TableModelColumn {}
+            rows: {
+                if(dataSource)
+                    return dataSource
+                return []
+            }
+        }
+        delegate: FluControl{
+            id:item_control
+            readonly property real cellPadding: 8
+            implicitWidth: Math.max(header_vertical.width, row_text.implicitWidth + (cellPadding * 2))
+            implicitHeight: row_text.implicitHeight + (cellPadding * 2)
+            Rectangle{
+                anchors.fill: parent
+                color: {
+                    d.selectionFlag
+                    if(item_control.pressed){
+                        return control.pressedButtonColor
+                    }
+                    if(selection_model.isRowSelected(row)){
+                        return control.hoverButtonColor
+                    }
+                    return item_control.hovered ? control.hoverButtonColor :  FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+                }
+                border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+            }
+            FluText{
+                id:row_text
+                anchors.centerIn: parent
+                text: row + 1
+                font.bold:{
+                    d.selectionFlag
+                    return selection_model.rowIntersectsSelection(row)
+                }
+            }
+            onClicked: {
+                closeEditor()
+                selection_model.clear()
+                for(var i=0;i<=columnSource.length;i++){
+                    selection_model.select(table_model.index(row,i),ItemSelectionModel.Select)
+                }
+                d.selectionFlag = !d.selectionFlag
+            }
+            MouseArea{
+                property point clickPos: "0,0"
+                height: 6
+                width: parent.width
+                anchors.bottom: parent.bottom
+                acceptedButtons: Qt.LeftButton
+                cursorShape: Qt.SplitVCursor
+                preventStealing: true
+                visible: {
+                    var obj = table_model.getRow(row)
+                    return !(obj.height === obj.minimumHeight && obj.width === obj.maximumHeight)
+                }
+                propagateComposedEvents: true
+                onPressed :
+                    (mouse)=>{
+                        FluTools.setOverrideCursor(Qt.SplitVCursor)
+                        clickPos = Qt.point(mouse.x, mouse.y)
+                    }
+                onReleased:{
+                    FluTools.restoreOverrideCursor()
+                }
+                onPositionChanged:
+                    (mouse)=>{
+                        var obj = table_model.getRow(row)
+                        var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
+                        var minimumHeight = obj.minimumHeight
+                        var maximumHeight = obj.maximumHeight
+                        if(!minimumHeight){
+                            minimumHeight = 44
+                        }
+                        if(!maximumHeight){
+                            maximumHeight = 65535
+                        }
+                        obj.height = Math.min(Math.max(minimumHeight, obj.height + delta.y),maximumHeight)
+                        table_model.setRow(row,obj)
+                        table_view.forceLayout()
+                    }
+            }
+        }
+    }
+    function closeEditor(){
+        item_loader.sourceComponent = null
+    }
+    function resetPosition(){
+        table_view.positionViewAtCell(Qt.point(0, 0),Qt.AlignTop|Qt.AlignLeft)
     }
 }
-

src/imports/FluentUI/Controls/FluTextBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 TextField{
+    signal commit
     property bool disabled: false
     property int iconSource: 0
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@@ -11,8 +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 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 int closeRightMargin: icon_end.visible ? 25 : 5
     id:control
     width: 300
+    padding: 8
+    leftPadding: 8
     enabled: !disabled
     color: {
         if(!enabled){
@@ -22,7 +26,8 @@ TextField{
     }
     font:FluTextStyle.Body
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTheme.primaryColor.lightest
+    selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+    selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor
@@ -49,26 +54,39 @@ TextField{
             }
         }
     }
+    Keys.onEnterPressed: (event)=> d.handleCommit(event)
+    Keys.onReturnPressed:(event)=> d.handleCommit(event)
+    QtObject{
+        id:d
+        function handleCommit(event){
+            control.commit()
+        }
+    }
+    MouseArea{
+        anchors.fill: parent
+        cursorShape: Qt.IBeamCursor
+        acceptedButtons: Qt.RightButton
+        onClicked: control.echoMode !== TextInput.Password && menu.popup()
+    }
     FluIconButton{
         iconSource:FluentIcons.ChromeClose
         iconSize: 10
         width: 20
         height: 20
-        opacity: 0.5
-        visible: control.text !== ""
+        visible: {
+            if(control.readOnly)
+                return false
+            return control.text !== ""
+        }
         anchors{
             verticalCenter: parent.verticalCenter
             right: parent.right
-            rightMargin: icon_end.visible ? 25 : 5
+            rightMargin: closeRightMargin
         }
         onClicked:{
             control.text = ""
         }
     }
-    TapHandler {
-        acceptedButtons: Qt.RightButton
-        onTapped: control.echoMode !== TextInput.Password && menu.popup()
-    }
     FluTextBoxMenu{
         id:menu
         inputItem: control

src/imports/FluentUI/Controls/FluTextBoxMenu.qml

@@ -12,9 +12,7 @@ FluMenu{
     animEnabled: false
     width: 120
     onVisibleChanged: {
-        if(visible){
-            inputItem.forceActiveFocus()
-        }
+        inputItem.forceActiveFocus()
     }
     Connections{
         target: inputItem

src/imports/FluentUI/Controls/FluTimePicker.qml

@@ -12,10 +12,10 @@ Rectangle {
     property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property var window : Window.window
     property int hourFormat: FluTimePicker.H
     property int isH: hourFormat === FluTimePicker.H
-    id:root
+    property var current
+    id:control
     color: {
         if(mouse_area.containsMouse){
             return hoverColor
@@ -27,6 +27,13 @@ Rectangle {
     radius: 4
     border.width: 1
     border.color: dividerColor
+    Item{
+        id:d
+        property var window: Window.window
+        property bool changeFlag: true
+        property var rowData: ["","",""]
+        visible: false
+    }
     MouseArea{
         id:mouse_area
         hoverEnabled: true
@@ -312,8 +319,24 @@ Rectangle {
                         }
                         text: "确定"
                         onClicked: {
-                            changeFlag = false
+                            d.changeFlag = false
                             popup.close()
+                            const hours = text_hour.text
+                            const minutes = text_minute.text
+                            const period = text_ampm.text
+                            const date = new Date()
+                            var hours24 = parseInt(hours);
+                            if(control.hourFormat === FluTimePicker.H){
+                                if (hours === "12") {
+                                    hours24 = (period === "上午") ? 0 : 12;
+                                } else {
+                                    hours24 = (period === "上午") ? hours24 : hours24 + 12;
+                                }
+                            }
+                            date.setHours(hours24);
+                            date.setMinutes(parseInt(minutes));
+                            date.setSeconds(0);
+                            current = date
                         }
                     }
                 }
@@ -321,10 +344,10 @@ Rectangle {
         }
         y:35
         function showPopup() {
-            changeFlag = true
-            rowData[0] = text_hour.text
-            rowData[1] = text_minute.text
-            rowData[2] = text_ampm.text
+            d.changeFlag = true
+            d.rowData[0] = text_hour.text
+            d.rowData[1] = text_minute.text
+            d.rowData[2] = text_ampm.text
 
             var now = new Date();
 
@@ -353,27 +376,24 @@ Rectangle {
             if(isH){
                 text_ampm.text = ampm
             }
-
-            var pos = root.mapToItem(null, 0, 0)
-            if(window.height>pos.y+root.height+container.height){
-                popup.y = root.height
+            var pos = control.mapToItem(null, 0, 0)
+            if(d.window.height>pos.y+control.height+container.height){
+                popup.y = control.height
             } else if(pos.y>container.height){
                 popup.y = -container.height
             } else {
-                popup.y = window.height-(pos.y+container.height)
+                popup.y = d.window.height-(pos.y+container.height)
             }
             popup.open()
         }
         onClosed: {
-            if(changeFlag){
-                text_hour.text = rowData[0]
-                text_minute.text = rowData[1]
-                text_ampm.text = rowData[2]
+            if(d.changeFlag){
+                text_hour.text = d.rowData[0]
+                text_minute.text = d.rowData[1]
+                text_ampm.text = d.rowData[2]
             }
         }
     }
-    property bool changeFlag: true
-    readonly property var rowData: ["","",""]
     function generateArray(start, n) {
         var arr = [];
         for (var i = start; i <= n; i++) {

src/imports/FluentUI/Controls/FluWindow.qml

@@ -44,11 +44,6 @@ Window {
         id: bg
         anchors.fill: parent
         color: backgroundColor
-        Behavior on color{
-            ColorAnimation {
-                duration: 300
-            }
-        }
     }
     Item{
         id:container
@@ -78,7 +73,7 @@ Window {
         return helper.createRegister(window,path)
     }
     function deleteWindow(){
-        helper.deleteWindow()
+        FluApp.deleteWindow(window)
     }
     function onResult(data){
         if(pageRegister){