From 30531079b5119e9ffdce6cc025aa488e7a15c019 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E5=AD=90=E6=A5=9A=5Czhuzi?= Date: Mon, 29 Apr 2024 10:12:34 +0800 Subject: [PATCH] update --- example/example_en_US.ts | 14 +- example/example_zh_CN.ts | 14 +- example/qml/page/T_TableView.qml | 10 +- .../FluentUI/Controls/FluTableView.qml | 153 ++++++++++++++---- 4 files changed, 144 insertions(+), 47 deletions(-) diff --git a/example/example_en_US.ts b/example/example_en_US.ts index 1d9f801f..8c963611 100644 --- a/example/example_en_US.ts +++ b/example/example_en_US.ts @@ -1964,7 +1964,7 @@ Some contents... - + Name @@ -2019,32 +2019,32 @@ Some contents... - + Address - + Nickname - + Long String - + Options - + <Previous - + Next> diff --git a/example/example_zh_CN.ts b/example/example_zh_CN.ts index fb141605..7c824dda 100644 --- a/example/example_zh_CN.ts +++ b/example/example_zh_CN.ts @@ -2110,7 +2110,7 @@ Some contents... - + Name 名称 @@ -2155,32 +2155,32 @@ Some contents... 头像 - + Address 地址 - + Nickname 昵称 - + Long String 长字符串 - + Options 操作 - + <Previous <上一页 - + Next> 下一页> diff --git a/example/qml/page/T_TableView.qml b/example/qml/page/T_TableView.qml index fe0f6e93..c70b09d1 100644 --- a/example/qml/page/T_TableView.qml +++ b/example/qml/page/T_TableView.qml @@ -499,12 +499,15 @@ FluContentPage{ dataIndex: 'checkbox', width:100, minimumWidth:100, - maximumWidth:100 + maximumWidth:300 }, { title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}), dataIndex: 'avatar', - width:100 + width:100, + minimumWidth:100, + maximumWidth:100, + frozen:true }, { title: table_view.customItem(com_column_filter_name,{title:qsTr("Name")}), @@ -547,7 +550,8 @@ FluContentPage{ dataIndex: 'action', width:160, minimumWidth:160, - maximumWidth:160 + maximumWidth:160, + frozen:true } ] } diff --git a/src/Qt6/imports/FluentUI/Controls/FluTableView.qml b/src/Qt6/imports/FluentUI/Controls/FluTableView.qml index 2872fd71..21eba096 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluTableView.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluTableView.qml @@ -30,12 +30,20 @@ Rectangle { if(columnSource.length!==0){ var columns= [] var headerRow = {} - columnSource.forEach(function(item){ + var offsetX = 0 + for(var i=0;i<=columnSource.length-1;i++){ + var item = columnSource[i] + var w = item.width + if(!w){ + w = d.defaultItemWidth + } + item.x = offsetX + offsetX = offsetX + w var column = Qt.createQmlObject('import Qt.labs.qmlmodels 1.0;TableModelColumn{}',sourceModel); column.display = item.dataIndex columns.push(column) headerRow[item.dataIndex] = item.title - }) + } header_column_model.columns = columns header_column_model.rows = [headerRow] } @@ -48,6 +56,7 @@ Rectangle { property int defaultItemHeight: 42 property var editDelegate property var editPosition + signal tableItemLayout(int column) function getEditDelegate(column){ var obj =control.columnSource[column].editDelegate if(obj){ @@ -189,6 +198,7 @@ Rectangle { id:com_table_delegate MouseArea{ id:item_table_mouse + implicitWidth: TableView.view.width property var _model: model property bool isRowSelected: { if(rowModel === null) @@ -198,17 +208,17 @@ Rectangle { } return false } - TableView.onPooled: { - if(d.editPosition && d.editPosition.row === row && d.editPosition.column === column){ - control.closeEditor() - } - } property bool editVisible: { if(d.editPosition && d.editPosition._key === rowModel._key && d.editPosition.column === column){ return true } return false } + TableView.onPooled: { + if(d.editPosition && d.editPosition.row === row && d.editPosition.column === column){ + control.closeEditor() + } + } hoverEnabled: true onEntered: { d.rowHoverIndex = row @@ -217,21 +227,25 @@ Rectangle { if(editVisible){ updateEditPosition() } + item_table_mouse.updateTableItem() } onHeightChanged: { if(editVisible){ updateEditPosition() } + item_table_mouse.updateTableItem() } onXChanged: { if(editVisible){ updateEditPosition() } + item_table_mouse.updateTableItem() } onYChanged: { if(editVisible){ updateEditPosition() } + item_table_mouse.updateTableItem() } function updateEditPosition(){ var obj = {} @@ -244,6 +258,12 @@ Rectangle { obj.height = item_table_mouse.height - 2 d.editPosition = obj } + function updateTableItem(){ + var columnModel = control.columnSource[column] + columnModel.x = item_table_mouse.x + columnModel.y = item_table_mouse.y + d.tableItemLayout(column) + } Rectangle{ anchors.fill: parent color:{ @@ -271,7 +291,7 @@ Rectangle { } loader_edit.display = item_table_loader.display d.editDelegate = d.getEditDelegate(column) - updateEditPosition() + item_table_mouse.updateEditPosition() } onClicked: (event)=>{ @@ -358,24 +378,24 @@ Rectangle { ScrollBar.horizontal:scroll_bar_h ScrollBar.vertical:scroll_bar_v columnWidthProvider: function(column) { - var columnObject = control.columnSource[column] - var width = columnObject.width + var columnModel = control.columnSource[column] + var width = columnModel.width if(width){ return width } - var minimumWidth = columnObject.minimumWidth + var minimumWidth = columnModel.minimumWidth if(minimumWidth){ return minimumWidth } return d.defaultItemWidth } rowHeightProvider: function(row) { - var rowObject = control.getRow(row) - var height = rowObject.height + var rowModel = control.getRow(row) + var height = rowModel.height if(height){ return height } - var minimumHeight = rowObject._minimumHeight + var minimumHeight = rowModel._minimumHeight if(minimumHeight){ return minimumHeight } @@ -440,6 +460,7 @@ Rectangle { } } } + Component{ id:com_column_header_delegate Rectangle{ @@ -447,7 +468,7 @@ Rectangle { readonly property real cellPadding: 8 property bool canceled: false property var _model: model - readonly property var columnObject : control.columnSource[column] + readonly property var columnModel : control.columnSource[column] implicitWidth: { return (item_column_loader.item && item_column_loader.item.implicitWidth) + (cellPadding * 2) } @@ -507,7 +528,7 @@ Rectangle { property var display: model.display property var tableView: table_view property var sourceModel: control.sourceModel - property bool isObject: typeof(display) == "object" + property bool isObject: typeof(display) == "object" property var options:{ if(isObject){ return display.options @@ -531,7 +552,7 @@ Rectangle { anchors.right: parent.right acceptedButtons: Qt.LeftButton hoverEnabled: true - visible: !(columnObject.width === columnObject.minimumWidth && columnObject.width === columnObject.maximumWidth && columnObject.width) + visible: !(columnModel.width === columnModel.minimumWidth && columnModel.width === columnModel.maximumWidth && columnModel.width) cursorShape: Qt.SplitHCursor preventStealing: true onPressed : @@ -551,9 +572,9 @@ Rectangle { return } var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y) - var minimumWidth = columnObject.minimumWidth - var maximumWidth = columnObject.maximumWidth - var w = columnObject.width + var minimumWidth = columnModel.minimumWidth + var maximumWidth = columnModel.maximumWidth + var w = columnModel.width if(!w){ w = d.defaultItemWidth } @@ -563,7 +584,7 @@ Rectangle { if(!maximumWidth){ maximumWidth = 65535 } - columnObject.width = Math.min(Math.max(minimumWidth, w + delta.x),maximumWidth) + columnModel.width = Math.min(Math.max(minimumWidth, w + delta.x),maximumWidth) table_view.forceLayout() header_horizontal.forceLayout() } @@ -576,7 +597,7 @@ Rectangle { id:item_control readonly property real cellPadding: 8 property bool canceled: false - property var rowObject: control.getRow(row) + property var rowModel: control.getRow(row) implicitWidth: Math.max(30, 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) @@ -642,9 +663,9 @@ Rectangle { cursorShape: Qt.SplitVCursor preventStealing: true visible: { - if(rowObject === null) + if(rowModel === null) return false - return !(rowObject.height === rowObject._minimumHeight && rowObject.height === rowObject._maximumHeight && rowObject.height) + return !(rowModel.height === rowModel._minimumHeight && rowModel.height === rowModel._maximumHeight && rowModel.height) } onPressed : (mouse)=>{ @@ -662,11 +683,11 @@ Rectangle { if(!pressed){ return } - var rowObject = control.getRow(row) + var rowModel = control.getRow(row) var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y) - var minimumHeight = rowObject._minimumHeight - var maximumHeight = rowObject._maximumHeight - var h = rowObject.height + var minimumHeight = rowModel._minimumHeight + var maximumHeight = rowModel._maximumHeight + var h = rowModel.height if(!h){ h = d.defaultItemHeight } @@ -676,8 +697,8 @@ Rectangle { if(!maximumHeight){ maximumHeight = 65535 } - rowObject.height = Math.min(Math.max(minimumHeight, h + delta.y),maximumHeight) - control.setRow(row,rowObject) + rowModel.height = Math.min(Math.max(minimumHeight, h + delta.y),maximumHeight) + control.setRow(row,rowModel) table_view.forceLayout() } } @@ -790,6 +811,78 @@ Rectangle { } } } + + Item{ + anchors{ + left: header_vertical.right + top: parent.top + bottom: parent.bottom + } + + Component{ + id: com_table_frozen + Item{ + id: item_layout_frozen + property var sourceModel:FluTableModel { + columnSource: columnModel + rows: control.sourceModel.rows + } + TableView{ + clip: true + anchors{ + fill: parent + topMargin: header_horizontal.height + } + model: control.sourceModel + delegate: com_table_delegate + syncDirection: Qt.Vertical + syncView: table_view + } + } + } + + Repeater{ + model: control.columnSource + delegate: FluLoader{ + id: item_layout_frozen + readonly property var columnModel : control.columnSource[model.index] + readonly property int index : model.index + width: table_view.columnWidthProvider(index) + Connections{ + target: d + function onTableItemLayout(column){ + if(column === index){ + item_layout_frozen.updateLayout() + } + } + } + Connections{ + target: table_view + function onContentXChanged(){ + item_layout_frozen.updateLayout() + } + } + function updateLayout(){ + width = table_view.columnWidthProvider(index) + x = Qt.binding(function(){ return Math.min(Math.max(columnModel.x - table_view.contentX,0),table_view.width-item_layout_frozen.width) }) + } + Component.onCompleted: { + updateLayout() + } + height: control.height + visible: { + if(modelData.frozen){ + return true + } + return false + } + sourceComponent: visible ? com_table_frozen : undefined + } + } + } + + + FluScrollBar { id: scroll_bar_h anchors{