diff --git a/example/qml/page/T_TableView.qml b/example/qml/page/T_TableView.qml
index b6e3a843..1eaf6619 100644
--- a/example/qml/page/T_TableView.qml
+++ b/example/qml/page/T_TableView.qml
@@ -63,9 +63,10 @@ FluContentPage{
                                 age:getRandomAge(),
                                 address: getRandomAddresses(),
                                 nickname: getRandomNickname(),
-                                height:40,
-                                minimumHeight:40,
-                                maximumHeight:200,
+                                longstring:"测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
+                                height:46,
+                                minimumHeight:46,
+                                maximumHeight:300,
                                 action:com_action
                             })
         }
@@ -136,6 +137,13 @@ FluContentPage{
                 minimumWidth:80,
                 maximumWidth:200
             },
+            {
+                title: '长字符串',
+                dataIndex: 'longstring',
+                width:200,
+                minimumWidth:100,
+                maximumWidth:300
+            },
             {
                 title: '操作',
                 dataIndex: 'action',
diff --git a/example/qml/window/MainWindow.qml b/example/qml/window/MainWindow.qml
index 1b38e5ce..cf4717d0 100644
--- a/example/qml/window/MainWindow.qml
+++ b/example/qml/window/MainWindow.qml
@@ -271,7 +271,9 @@ CustomWindow {
                 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
@@ -288,8 +290,6 @@ CustomWindow {
                 anim_radius.enabled = true
                 canvas.radius = canvas.maxRadius
             },canvas.canvasSize)
-        }else{
-            changeDark()
         }
     }
 
diff --git a/src/imports/FluentUI/Controls/FluComboBox.qml b/src/imports/FluentUI/Controls/FluComboBox.qml
index c9904b7f..a19770dc 100644
--- a/src/imports/FluentUI/Controls/FluComboBox.qml
+++ b/src/imports/FluentUI/Controls/FluComboBox.qml
@@ -67,10 +67,9 @@ ComboBox {
         Component.onCompleted: {
             forceActiveFocus()
         }
-        Keys.onEnterPressed: {
-            control.commit()
-        }
-        Keys.onReturnPressed: {
+        Keys.onEnterPressed: (event)=> handleCommit(event)
+        Keys.onReturnPressed:(event)=> handleCommit(event)
+        function handleCommit(event){
             control.commit()
         }
     }
diff --git a/src/imports/FluentUI/Controls/FluMultilineTextBox.qml b/src/imports/FluentUI/Controls/FluMultilineTextBox.qml
index aa89fd30..89f8f959 100644
--- a/src/imports/FluentUI/Controls/FluMultilineTextBox.qml
+++ b/src/imports/FluentUI/Controls/FluMultilineTextBox.qml
@@ -35,11 +35,17 @@ TextArea{
     }
     selectByMouse: true
     background: FluTextBoxBackground{ inputItem: control }
-    Keys.onEnterPressed: {
-        control.commit()
-    }
-    Keys.onBackPressed: {
-        control.commit()
+    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
diff --git a/src/imports/FluentUI/Controls/FluNavigationView.qml b/src/imports/FluentUI/Controls/FluNavigationView.qml
index 21557324..28e269f5 100644
--- a/src/imports/FluentUI/Controls/FluNavigationView.qml
+++ b/src/imports/FluentUI/Controls/FluNavigationView.qml
@@ -958,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]
@@ -976,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){
@@ -1009,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)
@@ -1033,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
diff --git a/src/imports/FluentUI/Controls/FluPasswordBox.qml b/src/imports/FluentUI/Controls/FluPasswordBox.qml
index 3dfae874..54f61f8d 100644
--- a/src/imports/FluentUI/Controls/FluPasswordBox.qml
+++ b/src/imports/FluentUI/Controls/FluPasswordBox.qml
@@ -51,11 +51,13 @@ TextField{
             }
         }
     }
-    Keys.onEnterPressed: {
-        control.commit()
-    }
-    Keys.onBackPressed: {
-        control.commit()
+    Keys.onEnterPressed: (event)=> d.handleCommit(event)
+    Keys.onReturnPressed:(event)=> d.handleCommit(event)
+    QtObject{
+        id:d
+        function handleCommit(event){
+            control.commit()
+        }
     }
     FluIconButton{
         id:btn_reveal
diff --git a/src/imports/FluentUI/Controls/FluScrollBar.qml b/src/imports/FluentUI/Controls/FluScrollBar.qml
index 9c3a982d..00d34c47 100644
--- a/src/imports/FluentUI/Controls/FluScrollBar.qml
+++ b/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
+                }
+            }
+        ]
     }
 }
diff --git a/src/imports/FluentUI/Controls/FluScrollablePage.qml b/src/imports/FluentUI/Controls/FluScrollablePage.qml
index ae344620..547cd373 100644
--- a/src/imports/FluentUI/Controls/FluScrollablePage.qml
+++ b/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
diff --git a/src/imports/FluentUI/Controls/FluTableView.qml b/src/imports/FluentUI/Controls/FluTableView.qml
index 245ce65f..71870d8b 100644
--- a/src/imports/FluentUI/Controls/FluTableView.qml
+++ b/src/imports/FluentUI/Controls/FluTableView.qml
@@ -30,6 +30,23 @@ Rectangle {
     QtObject{
         id:d
         property var header_rows:[]
+        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()
@@ -42,20 +59,55 @@ Rectangle {
     }
     Component{
         id:com_edit
-        FluTextBox {
+        Item{
             anchors.fill: parent
-            text: display
-            readOnly: true === columnSource[column].readOnly
-            verticalAlignment: TextInput.AlignVCenter
-            Component.onCompleted: {
-                forceActiveFocus()
-                selectAll()
-            }
-            onCommit: {
-                if(!readOnly){
-                    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 = ""
                 }
-                tableView.closeEditor()
             }
         }
     }
@@ -144,7 +196,7 @@ Rectangle {
                             return
                         }
                         selection_model.setCurrentIndex(table_model.index(row,column), ItemSelectionModel.Current)
-                        item_loader.sourceComponent = obtEditDelegate(column,row)
+                        item_loader.sourceComponent = d.obtEditDelegate(column,row)
                         var index = table_model.index(row,column)
                     }
                     onTapped: {
@@ -178,29 +230,12 @@ Rectangle {
             property int row
             property var tableView: control
             onDisplayChanged: {
-                table_model.setData(table_model.index(row,column),"display",display)
+                var obj = table_model.getRow(row)
+                obj[columnSource[column].dataIndex] = display
+                table_model.setRow(row,obj)
             }
         }
     }
-
-    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
-    }
-
     Component{
         id:com_handle
         FluControl {
@@ -332,7 +367,6 @@ Rectangle {
         }
         delegate: Rectangle{
             readonly property real cellPadding: 8
-            readonly property var obj : table_model.getRow(row)
             implicitWidth: Math.max(header_vertical.width, row_text.implicitWidth + (cellPadding * 2))
             implicitHeight: row_text.implicitHeight + (cellPadding * 2)
             color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
@@ -358,7 +392,10 @@ Rectangle {
                 acceptedButtons: Qt.LeftButton
                 cursorShape: Qt.SplitVCursor
                 preventStealing: true
-                visible: !(obj.height === obj.minimumHeight && obj.width === obj.maximumHeight)
+                visible: {
+                    var obj = table_model.getRow(row)
+                    return !(obj.height === obj.minimumHeight && obj.width === obj.maximumHeight)
+                }
                 propagateComposedEvents: true
                 onPressed :
                     (mouse)=>{
@@ -370,11 +407,12 @@ Rectangle {
                 }
                 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 = 40
+                            minimumHeight = 46
                         }
                         if(!maximumHeight){
                             maximumHeight = 65535
diff --git a/src/imports/FluentUI/Controls/FluTextBox.qml b/src/imports/FluentUI/Controls/FluTextBox.qml
index 111a0388..54fb863e 100644
--- a/src/imports/FluentUI/Controls/FluTextBox.qml
+++ b/src/imports/FluentUI/Controls/FluTextBox.qml
@@ -33,12 +33,6 @@ TextField{
         }
         return placeholderNormalColor
     }
-    Keys.onEnterPressed: {
-        control.commit()
-    }
-    Keys.onReturnPressed: {
-        control.commit()
-    }
     selectByMouse: true
     rightPadding: icon_end.visible ? 50 : 30
     background: FluTextBoxBackground{
@@ -56,6 +50,14 @@ 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
@@ -67,7 +69,6 @@ TextField{
         iconSize: 10
         width: 20
         height: 20
-        opacity: 0.5
         visible: {
             if(control.readOnly)
                 return false