update

example/qml/page/T_TableView.qml

@@ -94,6 +94,10 @@ FluScrollablePage{
         }
     }
 
+    FluText{
+        Layout.topMargin: 20
+        text:"此TableView适用于小数据量，带分页的表格，大数据量请使用TableView2。"
+    }
 
     FluTableView{
         id:table_view

example/qml/page/T_TableView2.qml

@@ -10,7 +10,7 @@ FluContentPage{
     title:"TableView2"
 
     Component.onCompleted: {
-        loadData(1,10)
+        loadData(1,2000)
     }
 
     function loadData(page,count){
@@ -46,6 +46,29 @@ FluContentPage{
         table_view.dataSource = dataSource
     }
 
+    Component{
+        id:com_combobox
+
+        FluComboBox {
+            anchors.fill: parent
+            currentIndex: display
+            editable: true
+            model: ListModel {
+                ListElement { text: 100 }
+                ListElement { text: 300 }
+                ListElement { text: 500 }
+                ListElement { text: 1000 }
+            }
+            Component.onCompleted: {
+                currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
+                selectAll()
+            }
+            TableView.onCommit: {
+                display = editText
+            }
+        }
+    }
+
     FluTableView2{
         id:table_view
         anchors.fill: parent
@@ -60,6 +83,7 @@ FluContentPage{
             {
                 title: '年龄',
                 dataIndex: 'age',
+                editDelegate:com_combobox,
                 width:100,
                 minimumWidth:100
             },

src/imports/FluentUI/Controls/FluComboBox.qml

@@ -24,7 +24,7 @@ ComboBox {
         text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
         palette.text: control.palette.text
         palette.highlightedText: control.palette.highlightedText
-        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
+        font.bold: control.currentIndex === index
         highlighted: control.highlightedIndex === index
         hoverEnabled: control.hoverEnabled
     }
@@ -37,7 +37,6 @@ ComboBox {
         iconSize: 15
         opacity: enabled ? 1 : 0.3
     }
-
     contentItem: T.TextField {
         property bool disabled: !control.editable
         leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
@@ -59,6 +58,7 @@ ComboBox {
         leftInset:1
         topInset:1
         bottomInset:1
+        focus: true
         rightInset:1
         background: FluTextBoxBackground{
             border.width: 0
@@ -74,7 +74,7 @@ ComboBox {
         visible: !control.flat || control.down
         radius: 4
         FluFocusRectangle{
-            visible: control.activeFocus
+            visible: control.visualFocus
             radius:4
             anchors.margins: -2
         }

src/imports/FluentUI/Controls/FluExpander.qml

@@ -57,7 +57,7 @@ Item {
                 iconSize: 15
                 Behavior on rotation {
                     NumberAnimation{
-                        duration: 150
+                        duration: 167
                     }
                 }
             }

src/imports/FluentUI/Controls/FluHorizontalHeaderView.qml

@@ -0,0 +1,27 @@
+import QtQuick
+import QtQuick.Templates as T
+import FluentUI
+
+T.HorizontalHeaderView {
+    id: control
+    implicitWidth: syncView ? syncView.width : 0
+    implicitHeight: Math.max(1, contentHeight)
+    delegate: Rectangle {
+        readonly property real cellPadding: 8
+        implicitWidth: text.implicitWidth + (cellPadding * 2)
+        implicitHeight: Math.max(control.height, 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)
+        border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+        FluText {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            height: parent.height
+            font.bold: true
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+}

src/imports/FluentUI/Controls/FluSlider.qml

@@ -81,7 +81,7 @@ Item{
             }
             Behavior on scale {
                 NumberAnimation{
-                    duration: 150
+                    duration: 167
                 }
             }
         }

src/imports/FluentUI/Controls/FluTableView.qml

@@ -93,7 +93,7 @@ Item {
                             width: 6
                             anchors.centerIn: item_divider
                             visible: item_divider.visible
-                            cursorShape: Qt.SizeHorCursor
+                            cursorShape: Qt.SplitHCursor
                             onPressed:
                                 (mouse)=>{
                                     clickPos = Qt.point(mouse.x, mouse.y)
@@ -207,7 +207,7 @@ Item {
                             id:item_row_control
                             width: layout_table.headerItem.widthByColumnIndex(index)
                             height: item_control.height
-                            focusPolicy:Qt.TabFocus | Qt.ClickFocus
+                            focusPolicy:Qt.TabFocus
                             background: Item{
                                 FluFocusRectangle{
                                     visible: item_row_control.activeFocus
@@ -292,6 +292,5 @@ Item {
     }
     function remove(index){
         model_data_source.remove(index)
-        console.debug(index)
     }
 }

src/imports/FluentUI/Controls/FluTableView2.qml

@@ -10,11 +10,9 @@ Rectangle {
 
     id:control
 
-
-
     property var columnSource
     property var dataSource
-    color: Qt.styleHints.appearance === Qt.Light ? palette.mid : palette.midlight
+    color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     onColumnSourceChanged: {
         if(columnSource.length!==0){
             var com_column = Qt.createComponent("FluTableModelColumn.qml")
@@ -40,63 +38,133 @@ Rectangle {
         })
     }
 
-    TableView {
+    Component{
-        id:table_view
+        id:com_edit
-        anchors.left: header_vertical.right
+        FluTextBox {
-        anchors.top: header_horizontal.bottom
+            anchors.fill: parent
-        anchors.right: parent.right
+            text: display
-        anchors.bottom: parent.bottom
+            verticalAlignment: TextInput.AlignVCenter
-        ListModel{
+            Component.onCompleted: selectAll()
-            id:model_columns
+            TableView.onCommit: {
-        }
+                display = text
-        columnWidthProvider: function(column) {
-            let w = explicitColumnWidth(column)
-            if (w >= 100)
-                return Math.max(100, w);;
-            return implicitColumnWidth(column)
-        }
-        rowHeightProvider: function(row) {
-            let h = explicitRowHeight(row)
-            if (h >= 0)
-                return Math.max(60, h);
-            return implicitRowHeight(row)
-        }
-
-        model: table_model
-        ScrollBar.horizontal: FluScrollBar{}
-        ScrollBar.vertical: FluScrollBar{}
-        clip: true
-        delegate: Rectangle {
-            implicitHeight: 60
-            implicitWidth: columnSource[column].width
-            color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-            FluText {
-                text: display
-                anchors.fill: parent
-                anchors.margins: 10
-                verticalAlignment: Text.AlignVCenter
             }
         }
     }
 
+    ScrollView{
+        id:scroll_table
+        anchors.left: header_vertical.right
+        anchors.top: header_horizontal.bottom
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+        ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+        TableView {
+            id:table_view
+            ListModel{
+                id:model_columns
+            }
+            boundsBehavior: Flickable.StopAtBounds
+            ScrollBar.horizontal: FluScrollBar{}
+            ScrollBar.vertical: FluScrollBar{}
+            selectionModel: ItemSelectionModel {}
+            columnWidthProvider: function(column) {
+                let w = explicitColumnWidth(column)
+                if (w >= 0){
+                    return Math.max(100, w)
+                }
+                return implicitColumnWidth(column)
+            }
+            rowHeightProvider: function(row) {
+                let h = explicitRowHeight(row)
+                if (h >= 0){
+                    return Math.max(40, h)
+                }
+                return implicitRowHeight(row)
+            }
 
-    HorizontalHeaderView {
+            model: table_model
+            clip: true
+            delegate: Rectangle {
+                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))
+                implicitHeight: 40
+                implicitWidth: columnSource[column].width
+                FluText {
+                    text: display
+                    anchors.fill: parent
+                    anchors.margins: 10
+                    elide: Text.ElideRight
+                    verticalAlignment: Text.AlignVCenter
+                }
+                TableView.editDelegate: {
+                    var obj =columnSource[column].editDelegate
+                    if(obj){
+                        return obj
+                    }
+                    return com_edit
+                }
+            }
+        }
+    }
+
+    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)
+            }
+            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
+                    }
+                }
+            }
+        }
+    }
+
+    SelectionRectangle {
+        target: table_view
+        bottomRightHandle:com_handle
+        topLeftHandle: com_handle
+    }
+
+
+    FluHorizontalHeaderView {
         id: header_horizontal
-        anchors.left: table_view.left
+        textRole: "title"
+        model: columnSource
+        anchors.left: scroll_table.left
         anchors.top: parent.top
         syncView: table_view
+        boundsBehavior: Flickable.StopAtBounds
         clip: true
     }
 
-    VerticalHeaderView {
+    FluVerticalHeaderView {
         id: header_vertical
-        anchors.top: table_view.top
+        boundsBehavior: Flickable.StopAtBounds
+        anchors.top: scroll_table.top
         anchors.left: parent.left
         syncView: table_view
         clip: true
     }
 
 
-
 }
 

src/imports/FluentUI/Controls/FluVerticalHeaderView.qml

@@ -0,0 +1,27 @@
+import QtQuick
+import QtQuick.Templates as T
+import FluentUI
+
+T.VerticalHeaderView {
+    id: control
+    implicitWidth: Math.max(1, contentWidth)
+    implicitHeight: syncView ? syncView.height : 0
+    delegate: Rectangle {
+        readonly property real cellPadding: 8
+        implicitWidth: Math.max(control.width, text.implicitWidth + (cellPadding * 2))
+        implicitHeight: 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)
+        border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+        FluText {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            font.bold: true
+            height: parent.height
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+}