update

example/qml/page/T_TableView.qml

@@ -10,7 +10,7 @@ FluContentPage{
     title:"TableView"
 
     Component.onCompleted: {
-        loadData(1,2000)
+        loadData(1,1000)
     }
 
     function loadData(page,count){
@@ -40,7 +40,10 @@ FluContentPage{
                                 name: getRandomName(),
                                 age:getRandomAge(),
                                 address: getRandomAddresses(),
-                                nickname: getRandomNickname()
+                                nickname: getRandomNickname(),
+                                height:40,
+                                minimumHeight:40,
+                                maximumHeight:200
                             })
         }
         table_view.dataSource = dataSource
@@ -79,8 +82,8 @@ FluContentPage{
                 title: '姓名',
                 dataIndex: 'name',
                 width:100,
-                minimumWidth:50
+                minimumWidth:80,
-
+                maximumWidth:200
             },
             {
                 title: '年龄',
@@ -88,17 +91,21 @@ 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
+                width:100,
+                minimumWidth:80,
+                maximumWidth:200
             }
         ]
     }

src/FluTools.cpp

@@ -2,6 +2,7 @@
 #include <QGuiApplication>
 #include <QClipboard>
 #include <QUuid>
+#include <QCursor>
 
 FluTools* FluTools::m_instance = nullptr;
 
@@ -78,3 +79,11 @@ int FluTools::qtMinor(){
 void FluTools::setQuitOnLastWindowClosed(bool val){
     qApp->setQuitOnLastWindowClosed(val);
 }
+
+void FluTools::setOverrideCursor(Qt::CursorShape shape){
+    qApp->setOverrideCursor(QCursor(shape));
+}
+
+void FluTools::restoreOverrideCursor(){
+    qApp->restoreOverrideCursor();
+}

src/FluTools.h

@@ -54,6 +54,10 @@ public:
 
     Q_INVOKABLE int qtMinor();
 
+    Q_INVOKABLE void setOverrideCursor(Qt::CursorShape shape);
+
+    Q_INVOKABLE void restoreOverrideCursor();
+
 };
 
 #endif // FLUTOOLS_H

src/imports/FluentUI/Controls/FluTableView.qml

@@ -15,14 +15,23 @@ 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
+                console.debug(JSON.stringify(header_rows))
+                d.header_rows = [header_rows]
             }
         }
     }
+    QtObject{
+        id:d
+        property var header_rows:[]
+    }
     onDataSourceChanged: {
         table_model.clear()
         dataSource.forEach(function(item){
@@ -57,7 +66,6 @@ Rectangle {
         anchors.bottom: parent.bottom
         ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
         ScrollBar.vertical.policy: ScrollBar.AlwaysOff
-
         TableView {
             id:table_view
             ListModel{
@@ -66,68 +74,36 @@ Rectangle {
             boundsBehavior: Flickable.StopAtBounds
             ScrollBar.horizontal: FluScrollBar{}
             ScrollBar.vertical: FluScrollBar{}
-            selectionModel: ItemSelectionModel {}
+            selectionModel: ItemSelectionModel {
+                id:selection_model
+            }
             columnWidthProvider: function(column) {
-                var w
+                var w = columnSource[column].width
-                var minimumWidth = columnSource[column].minimumWidth
+                if(column === item_loader.column){
-                var maximumWidth = columnSource[column].maximumWidth
+                    item_loader.width = w
-                if(FluTools.qtMajor()>=6 && FluTools.qtMinor()>=5){
-                    w = explicitColumnWidth(column)
-                    if (w >= 0){
-                        if(!minimumWidth){
-                            minimumWidth = 100
-                        }
-                        if(!maximumWidth){
-                            maximumWidth = 65535
-                        }
-                        w = Math.min(Math.max(minimumWidth, w),maximumWidth)
-                        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
-                    }
-                    return implicitColumnWidth(column)
-                }else{
-                    w = implicitColumnWidth(column)
-                    if(!minimumWidth){
-                        minimumWidth = 100
-                    }
-                    if(!maximumWidth){
-                        maximumWidth = 65535
-                    }
-                    return Math.min(Math.max(minimumWidth, w),maximumWidth)
                 }
+                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) {
-                var h
+                var h = table_model.getRow(row).height
-                if(FluTools.qtMajor()>=6 && FluTools.qtMinor()>=5){
+                if(row === item_loader.row){
-                    h = explicitRowHeight(row)
+                    item_loader.height = h
-                    if (h >= 0){
-                        h = Math.max(40, h)
-                        if(row === item_loader.row){
-                            item_loader.height = h
-                        }
-                        if(row === item_loader.row - 1){
-                            var cellItem = table_view.itemAtCell(item_loader.column, item_loader.row)
-                            if(cellItem){
-                                var cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
-                                item_loader.y = table_view.contentY + cellPosition.y
-                            }
-                        }
-                        return h
-                    }
-                    return implicitRowHeight(row)
-                }else{
-                    h = implicitRowHeight(row)
-                    return Math.max(40, h)
                 }
+                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
@@ -217,27 +193,161 @@ Rectangle {
         }
     }
     SelectionRectangle {
-        target: table_view
+        target: {
+            if(item_loader.sourceComponent){
+                return null
+            }
+            return table_view
+        }
         bottomRightHandle:com_handle
         topLeftHandle: com_handle
     }
-    FluHorizontalHeaderView {
+    TableView {
         id: header_horizontal
-        textRole: "title"
+        model: TableModel{
-        model: columnSource
+            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: Rectangle {
+            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))
+            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: column_text
+                text: display
+                width: parent.width
+                height: parent.height
+                font.bold: true
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+            TapHandler{
+                onDoubleTapped: {
+                    selection_model.clear()
+                    for(var i=0;i<=table_view.rows;i++){
+                        selection_model.select(table_view.index(i,column),ItemSelectionModel.Select)
+                    }
+                }
+            }
+            MouseArea{
+                property point clickPos: "0,0"
+                height: parent.height
+                width: 4
+                anchors.right: parent.right
+                acceptedButtons: Qt.LeftButton
+                visible: !(obj.width === obj.maximumWidth && 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: 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)
+            border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+            FluText{
+                id:row_text
+                anchors.centerIn: parent
+                text: row + 1
+            }
+            TapHandler{
+                onDoubleTapped: {
+                    selection_model.clear()
+                    for(var i=0;i<=columnSource.length;i++){
+                        selection_model.select(table_view.index(row,i),ItemSelectionModel.Select)
+                    }
+                }
+            }
+            MouseArea{
+                property point clickPos: "0,0"
+                height: 4
+                width: parent.width
+                anchors.bottom: parent.bottom
+                acceptedButtons: Qt.LeftButton
+                cursorShape: Qt.SplitVCursor
+                preventStealing: true
+                visible: !(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 delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
+                        var minimumHeight = obj.minimumHeight
+                        var maximumHeight = obj.maximumHeight
+                        if(!minimumHeight){
+                            minimumHeight = 40
+                        }
+                        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(){
@@ -245,4 +355,3 @@ Rectangle {
     }
 
 }
-