update

example/qml/page/T_TableView.qml

@@ -63,9 +63,10 @@ FluContentPage{
                                 age:getRandomAge(),
                                 address: getRandomAddresses(),
                                 nickname: getRandomNickname(),
-                                height:40,
+                                longstring:"测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
-                                minimumHeight:40,
+                                height:46,
-                                maximumHeight:200,
+                                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',

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()
         }
     }
 

src/imports/FluentUI/Controls/FluComboBox.qml

@@ -67,10 +67,9 @@ ComboBox {
         Component.onCompleted: {
             forceActiveFocus()
         }
-        Keys.onEnterPressed: {
+        Keys.onEnterPressed: (event)=> handleCommit(event)
-            control.commit()
+        Keys.onReturnPressed:(event)=> handleCommit(event)
-        }
+        function handleCommit(event){
-        Keys.onReturnPressed: {
             control.commit()
         }
     }

src/imports/FluentUI/Controls/FluMultilineTextBox.qml

@@ -35,11 +35,17 @@ TextArea{
     }
     selectByMouse: true
     background: FluTextBoxBackground{ inputItem: control }
-    Keys.onEnterPressed: {
+    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()
         }
-    Keys.onBackPressed: {
-        control.commit()
     }
     MouseArea{
         anchors.fill: parent

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,9 +1006,7 @@ 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]
@@ -1025,6 +1020,8 @@ Item {
             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,12 +1030,12 @@ Item {
                 }else{
                     nav_swipe.push(obj)
                 }
-            }
-            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

@@ -51,11 +51,13 @@ TextField{
             }
         }
     }
-    Keys.onEnterPressed: {
+    Keys.onEnterPressed: (event)=> d.handleCommit(event)
+    Keys.onReturnPressed:(event)=> d.handleCommit(event)
+    QtObject{
+        id:d
+        function handleCommit(event){
             control.commit()
         }
-    Keys.onBackPressed: {
-        control.commit()
     }
     FluIconButton{
         id:btn_reveal

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 {
+T.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
     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
+    padding: 2
-    topPadding:{
+    visible: control.policy !== T.ScrollBar.AlwaysOff
-        if(vertical){
+    minimumSize: Math.max(orientation === Qt.Horizontal ? height / width : width / height,0.3)
-            if(expand)
+    contentItem: Item {
-                return 15
+        property bool collapsed: (control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0))
-            return 2
+        implicitWidth: control.interactive ? 6 : 2
-        }else{
+        implicitHeight: control.interactive ? 6 : 2
-            if(expand){
+
-                return 2
+        Rectangle{
-            }
+            id:rect_bar
-            return 4
+            width:  vertical ? 2 : parent.width
-        }
+            height: horizontal  ? 2 : parent.height
-    }
-    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(control.pressed){
-                if(FluTheme.dark){
+                    return control.pressedColor
-                    return Qt.rgba(0,0,0,1)
                 }
-                return Qt.rgba(1,1,1,1)
+                return control .color
             }
-            return Qt.rgba(0,0,0,0)
+            anchors{
+                right: vertical ? parent.right : undefined
+                bottom: horizontal ? parent.bottom : undefined
             }
-        MouseArea{
+            radius: width / 2
-            id:mouse_item
+            visible: control.size < 1.0
-            hoverEnabled: true
-            anchors.fill: parent
-            onEntered: {
-                timer.restart()
         }
-            onExited: {
+        states: [
-                timer.restart()
+            State{
+                name:"hide"
+                when: contentItem.collapsed
+                PropertyChanges {
+                    target: rect_bar
+                    width:  vertical ? 6 : parent.width
+                    height: horizontal  ? 6 : parent.height
                 }
             }
-    }
+            ,State{
-    Timer{
+                name:"show"
-        id:timer
+                when: !contentItem.expand
-        interval: 800
+                PropertyChanges {
-        onTriggered: {
+                    target: rect_bar
-            expand = mouse_item.containsMouse || btn_top.hovered || btn_bottom.hovered || btn_left.hovered || btn_right.hovered
+                    width:  vertical ? 2 : parent.width
+                    height: horizontal  ? 2 : parent.height
                 }
             }
-    Behavior on implicitWidth {
+        ]
+        transitions:[
+            Transition {
+                from: "hide"
+                SequentialAnimation {
+                    PauseAnimation { duration: 450 }
                     NumberAnimation {
-            duration: 150
+                        target: rect_bar
-        }
+                        properties: vertical ? "width"  : "height"
-    }
+                        duration: 167
-    FluIconButton{
+                        easing.type: Easing.InCubic
-        id:btn_top
+                        to:2
-        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()
                     }
                 }
             }
+            ,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/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,8 +59,21 @@ Rectangle {
     }
     Component{
         id:com_edit
-        FluTextBox {
+        Item{
             anchors.fill: parent
+            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
@@ -51,6 +81,7 @@ Rectangle {
                         forceActiveFocus()
                         selectAll()
                     }
+                    rightPadding: 24
                     onCommit: {
                         if(!readOnly){
                             display = text
@@ -59,6 +90,27 @@ Rectangle {
                     }
                 }
             }
+            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 {
@@ -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

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