From bf001d99d2f28095d635e05dd74e5eaed4273f12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E5=AD=90=E6=A5=9A=5Czhuzi?= Date: Tue, 30 Apr 2024 12:59:09 +0800 Subject: [PATCH] update --- example/example_en_US.ts | 28 +- example/example_zh_CN.ts | 28 +- example/qml/page/T_TableView.qml | 31 +- example/qml/window/MainWindow.qml | 2 +- .../imports/FluentUI/Controls/FluComboBox.qml | 2 + .../FluentUI/Controls/FluScrollBar.qml | 2 +- .../FluentUI/Controls/FluTableView.qml | 352 +++++++++++++----- .../imports/FluentUI/Controls/FluWindow.qml | 1 - .../imports/FluentUI/Controls/FluComboBox.qml | 2 + .../FluentUI/Controls/FluScrollBar.qml | 2 +- .../FluentUI/Controls/FluTableView.qml | 257 ++++++++----- .../imports/FluentUI/Controls/FluWindow.qml | 1 - 12 files changed, 474 insertions(+), 234 deletions(-) diff --git a/example/example_en_US.ts b/example/example_en_US.ts index 8c963611..7ed2f842 100644 --- a/example/example_en_US.ts +++ b/example/example_en_US.ts @@ -1964,7 +1964,7 @@ Some contents... - + Name @@ -1984,67 +1984,67 @@ Some contents... - + Age - + Clear All - + Delete Selection - + Add a row of Data - + Insert a Row - + Focus not acquired: Please click any item in the form as the target for insertion! - + Avatar - + Address - + Nickname - + Long String - + Options - + <Previous - + Next> diff --git a/example/example_zh_CN.ts b/example/example_zh_CN.ts index 7c824dda..de111fa9 100644 --- a/example/example_zh_CN.ts +++ b/example/example_zh_CN.ts @@ -2110,7 +2110,7 @@ Some contents... - + Name 名称 @@ -2130,67 +2130,67 @@ Some contents... 全选 - + Age 年龄 - + Clear All 清除所有 - + Insert a Row 插入一行 - + Focus not acquired: Please click any item in the form as the target for insertion! 焦点未获取：请点击表格中的任意一项，作为插入的靶点！ - + Avatar 头像 - + Address 地址 - + Nickname 昵称 - + Long String 长字符串 - + Options 操作 - + <Previous <上一页 - + Next> 下一页> - + Delete Selection 删除选中 - + Add a row of Data 添加一行数据 diff --git a/example/qml/page/T_TableView.qml b/example/qml/page/T_TableView.qml index c70b09d1..962afb3a 100644 --- a/example/qml/page/T_TableView.qml +++ b/example/qml/page/T_TableView.qml @@ -244,7 +244,9 @@ FluContentPage{ clickListener: function(){ root.selectedAll = !root.selectedAll var checked = root.selectedAll - model.display = table_view.customItem(com_column_checbox,{"checked":checked}) + var columnModel = model.display + columnModel.title = table_view.customItem(com_column_checbox,{"checked":checked}) + model.display = columnModel for(var i =0;i< table_view.rows ;i++){ var rowData = table_view.getRow(i) rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked}) @@ -271,7 +273,9 @@ FluContentPage{ } Component.onCompleted: { currentIndex=["100","300","500","1000"].findIndex((element) => element === display) - selectAll() + console.debug(textBox) + textBox.forceActiveFocus() + textBox.selectAll() } onCommit: { editTextChaged(editText) @@ -287,12 +291,14 @@ FluContentPage{ anchors.fill: parent focus: true Component.onCompleted: { + console.debug("333333") var data = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"] var result = data.map(function(item) { return {title: item}; }); items = result textbox.text= String(display) + forceActiveFocus() selectAll() } onCommit: { @@ -345,7 +351,9 @@ FluContentPage{ cursorShape: Qt.PointingHandCursor onClicked: { custom_update_dialog.showDialog(options.title,function(text){ - itemModel.display = table_view.customItem(com_column_update_title,{"title":text}) + var columnModel = model.display + columnModel.title = table_view.customItem(com_column_update_title,{"title":text}) + model.display = columnModel }) } } @@ -499,21 +507,20 @@ FluContentPage{ dataIndex: 'checkbox', width:100, minimumWidth:100, - maximumWidth:300 - }, - { - title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}), - dataIndex: 'avatar', - width:100, - minimumWidth:100, - maximumWidth:100, - frozen:true + maximumWidth:300, + frozen: true }, { title: table_view.customItem(com_column_filter_name,{title:qsTr("Name")}), dataIndex: 'name', readOnly:true }, + { + title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}), + dataIndex: 'avatar', + width:100, + frozen:true + }, { title: table_view.customItem(com_column_sort_age,{sort:0}), dataIndex: 'age', diff --git a/example/qml/window/MainWindow.qml b/example/qml/window/MainWindow.qml index 8b92bedc..4fff0309 100644 --- a/example/qml/window/MainWindow.qml +++ b/example/qml/window/MainWindow.qml @@ -15,7 +15,7 @@ FluWindow { title: "FluentUI" width: 1000 height: 680 - minimumWidth: 680 + minimumWidth: 1000 minimumHeight: 200 launchMode: FluWindowType.SingleTask fitsAppBarWindows: true diff --git a/src/Qt5/imports/FluentUI/Controls/FluComboBox.qml b/src/Qt5/imports/FluentUI/Controls/FluComboBox.qml index 4618f2fd..279fb0f3 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluComboBox.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluComboBox.qml @@ -11,6 +11,7 @@ T.ComboBox { property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1) property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) + property alias textBox: text_field implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, @@ -39,6 +40,7 @@ T.ComboBox { opacity: enabled ? 1 : 0.3 } contentItem: T.TextField { + id: text_field property bool disabled: !control.editable leftPadding: !control.mirrored ? 10 : control.editable && activeFocus ? 3 : 1 rightPadding: control.mirrored ? 10 : control.editable && activeFocus ? 3 : 1 diff --git a/src/Qt5/imports/FluentUI/Controls/FluScrollBar.qml b/src/Qt5/imports/FluentUI/Controls/FluScrollBar.qml index 2057963f..87953811 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluScrollBar.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluScrollBar.qml @@ -171,7 +171,7 @@ T.ScrollBar { ,Transition { to: "show" SequentialAnimation { - PauseAnimation { duration: 450 } + PauseAnimation { duration: 150 } NumberAnimation { target: rect_bar properties: vertical ? "width" : "height" diff --git a/src/Qt5/imports/FluentUI/Controls/FluTableView.qml b/src/Qt5/imports/FluentUI/Controls/FluTableView.qml index 2f19e373..2e04312e 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluTableView.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluTableView.qml @@ -30,12 +30,19 @@ 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] + if(!item.width){ + item.width = d.defaultItemWidth + } + item.x = offsetX + offsetX = offsetX + item.width var column = Qt.createQmlObject('import Qt.labs.qmlmodels 1.0;TableModelColumn{}',sourceModel); column.display = item.dataIndex columns.push(column) - headerRow[item.dataIndex] = item.title - }) + headerRow[item.dataIndex] = item + } header_column_model.columns = columns header_column_model.rows = [headerRow] } @@ -48,6 +55,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){ @@ -64,15 +72,15 @@ Rectangle { sourceModel.rows = dataSource } TableModel{ - id:header_column_model + id: header_column_model TableModelColumn { display : "title"} } TableModel{ - id:header_row_model + id: header_row_model TableModelColumn { display: "rowIndex" } } FluTableSortProxyModel{ - id:table_sort_model + id: table_sort_model model: control.sourceModel } Component{ @@ -189,7 +197,20 @@ Rectangle { id:com_table_delegate MouseArea{ id:item_table_mouse + implicitWidth: TableView.view.width property var _model: model + property bool isMainTable: TableView.view == table_view + property var currentTableView: TableView.view + visible: { + if(isMainTable && columnModel.frozen){ + return false + } + if(!isMainTable){ + if(currentTableView.dataIndex !== columnModel.dataIndex) + return false + } + return true + } property bool isRowSelected: { if(rowModel === null) return false @@ -198,17 +219,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 +238,33 @@ Rectangle { if(editVisible){ updateEditPosition() } + if(isMainTable){ + updateTableItem() + } } onHeightChanged: { if(editVisible){ updateEditPosition() } + if(isMainTable){ + updateTableItem() + } } onXChanged: { if(editVisible){ updateEditPosition() } + if(isMainTable){ + updateTableItem() + } } onYChanged: { if(editVisible){ updateEditPosition() } + if(isMainTable){ + updateTableItem() + } } function updateEditPosition(){ var obj = {} @@ -244,6 +277,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 +310,7 @@ Rectangle { } loader_edit.display = item_table_loader.display d.editDelegate = d.getEditDelegate(column) - updateEditPosition() + item_table_mouse.updateEditPosition() } onClicked: (event)=>{ @@ -297,12 +336,50 @@ Rectangle { } anchors.fill: parent sourceComponent: { - if(isObject){ - return display.comId + if(item_table_mouse.visible){ + if(isObject){ + return display.comId + } + return com_text } - return com_text + return undefined } } + FluLoader{ + id: loader_edit + property var tableView: control + property var display + property int column: { + if(d.editPosition){ + return d.editPosition.column + } + return 0 + } + property int row: { + if(d.editPosition){ + return d.editPosition.row + } + return 0 + } + anchors{ + fill: parent + margins: 1 + } + signal editTextChaged(string text) + sourceComponent: { + if(item_table_mouse.visible && d.editPosition && d.editPosition.column === model.column && d.editPosition.row === model.row){ + return d.editDelegate + } + return undefined + } + onEditTextChaged: + (text)=>{ + var obj = control.getRow(row) + obj[control.columnSource[column].dataIndex] = text + control.setRow(row,obj) + } + z:999 + } Item{ anchors.fill: parent visible: item_table_mouse.isRowSelected @@ -358,24 +435,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 } @@ -388,70 +465,37 @@ Rectangle { table_view.flick(0,1) } delegate: com_table_delegate - FluLoader{ - id:loader_edit - property var tableView: control - property var display - property int column: { - if(d.editPosition){ - return d.editPosition.column - } - return 0 - } - property int row: { - if(d.editPosition){ - return d.editPosition.row - } - return 0 - } - signal editTextChaged(string text) - sourceComponent: d.editPosition ? d.editDelegate : undefined - onEditTextChaged: - (text)=>{ - var obj = control.getRow(row) - obj[control.columnSource[column].dataIndex] = text - control.setRow(row,obj) - } - width: { - if(d.editPosition){ - return d.editPosition.width - } - return 0 - } - height: { - if(d.editPosition){ - return d.editPosition.height - } - return 0 - } - x:{ - if(d.editPosition){ - return d.editPosition.x - } - return 0 - } - y:{ - if(d.editPosition){ - return d.editPosition.y - } - return 0 - } - z:999 - } } } + Component{ id:com_column_header_delegate Rectangle{ - id:column_item_control + id: column_item_control + property var currentTableView : TableView.view readonly property real cellPadding: 8 property bool canceled: false property var _model: model - readonly property var columnObject : control.columnSource[column] - implicitWidth: { - return (item_column_loader.item && item_column_loader.item.implicitWidth) + (cellPadding * 2) + readonly property var columnModel : control.columnSource[_index] + readonly property int _index : { + const isDataIndex = (element) => { + return element.dataIndex === display.dataIndex + } + return control.columnSource.findIndex(isDataIndex) + } + readonly property bool isHeaderHorizontal: TableView.view == header_horizontal + implicitWidth: { + if(column_item_control.isHeaderHorizontal){ + return (item_column_loader.item && item_column_loader.item.implicitWidth) + (cellPadding * 2) + } + return TableView.view.width + } + implicitHeight: { + if(column_item_control.isHeaderHorizontal){ + return Math.max(36, (item_column_loader.item&&item_column_loader.item.implicitHeight) + (cellPadding * 2)) + } + return TableView.view.height } - implicitHeight: Math.max(36, (item_column_loader.item&&item_column_loader.item.implicitHeight) + (cellPadding * 2)) color: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1) Rectangle{ border.color: control.borderColor @@ -472,7 +516,7 @@ Rectangle { width: 1 height: parent.height anchors.left: parent.left - visible: column !== 0 + visible: column_item_control._index !== 0 color:"#00000000" } Rectangle{ @@ -481,7 +525,7 @@ Rectangle { height: parent.height anchors.right: parent.right color:"#00000000" - visible: column === table_view.columns - 1 + visible: column_item_control._index === table_view.columns - 1 } MouseArea{ id:column_item_control_mouse @@ -504,17 +548,17 @@ Rectangle { FluLoader{ id:item_column_loader property var model: column_item_control._model - property var display: model.display + property var display: model.display.title 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 } return {} } - property int column: model.column + property int column: column_item_control._index width: parent.width height: parent.height sourceComponent: { @@ -531,7 +575,7 @@ Rectangle { anchors.right: parent.right acceptedButtons: Qt.LeftButton hoverEnabled: true - visible: !(columnObject.width === columnObject.minimumWidth && columnObject.width === columnObject.maximumWidth && columnObject.width) + visible: !columnModel.frozen && !(columnModel.width === columnModel.minimumWidth && columnModel.width === columnModel.maximumWidth && columnModel.width) cursorShape: Qt.SplitHCursor preventStealing: true onPressed : @@ -551,9 +595,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,9 +607,10 @@ 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() +// column_item_control.currentTableView.forceLayout() } } } @@ -576,7 +621,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 +687,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 +707,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 +721,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 +835,123 @@ Rectangle { } } } + Item{ + anchors{ + left: header_vertical.right + top: parent.top + bottom: parent.bottom + right: parent.right + } + Component{ + id: com_table_frozen + Rectangle{ + id: item_layout_frozen + anchors.fill: parent + color: { + if(Window.active){ + return FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) :Qt.rgba(1,1,1,1) + } + return FluTheme.dark ? Qt.rgba(56/255,56/255,56/255,1) :Qt.rgba(243/255,243/255,243/255,1) + } + Rectangle{ + z:99 + anchors.fill: parent + border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,0.6) : Qt.rgba(191/255,191/255,191/255,0.3) + FluShadow{ + radius: 0 + anchors.fill: parent + } + color: "#00000000" + } + TableView { + id:item_table_frozen_header + model: header_column_model + boundsBehavior: Flickable.StopAtBounds + clip: true + interactive: false + anchors{ + left: parent.left + right: parent.right + top: parent.top + bottom: item_table_frozen.top + } + delegate: com_column_header_delegate + } + TableView{ + property string dataIndex: columnModel.dataIndex + id: item_table_frozen + clip: true + interactive: false + anchors{ + fill: parent + topMargin: header_horizontal.height + } + boundsBehavior: TableView.StopAtBounds + model: table_sort_model + delegate: com_table_delegate + syncDirection: Qt.Vertical + syncView: table_view + Component.onCompleted: { + item_table_frozen_header.contentX = columnModel.width * _index + item_table_frozen.contentX = columnModel.width * _index + } + } + } + } + Repeater{ + model: control.columnSource + delegate: FluLoader{ + id: item_layout_frozen + readonly property int _index : model.index + readonly property var columnModel : control.columnSource[_index] + Connections{ + target: d + function onTableItemLayout(column){ + if(item_layout_frozen._index === column){ + updateLayout() + } + } + } + Connections{ + target: table_view + function onContentXChanged(){ + updateLayout() + } + } + function updateLayout(){ + width = table_view.columnWidthProvider(_index) + x = Qt.binding(function(){ + var minX = 0 + var maxX = table_view.width-item_layout_frozen.width + for(var i=0;i<_index;i++){ + var item = control.columnSource[i] + if(item.frozen){ + minX = minX + item.width + } + } + for(i=_index+1;i{ + var obj = control.getRow(row) + obj[control.columnSource[column].dataIndex] = text + control.setRow(row,obj) + } + z:999 + } Item{ anchors.fill: parent visible: item_table_mouse.isRowSelected @@ -408,71 +465,37 @@ Rectangle { table_view.flick(0,1) } delegate: com_table_delegate - FluLoader{ - id:loader_edit - property var tableView: control - property var display - property int column: { - if(d.editPosition){ - return d.editPosition.column - } - return 0 - } - property int row: { - if(d.editPosition){ - return d.editPosition.row - } - return 0 - } - signal editTextChaged(string text) - sourceComponent: d.editPosition ? d.editDelegate : undefined - onEditTextChaged: - (text)=>{ - var obj = control.getRow(row) - obj[control.columnSource[column].dataIndex] = text - control.setRow(row,obj) - } - width: { - if(d.editPosition){ - return d.editPosition.width - } - return 0 - } - height: { - if(d.editPosition){ - return d.editPosition.height - } - return 0 - } - x:{ - if(d.editPosition){ - return d.editPosition.x - } - return 0 - } - y:{ - if(d.editPosition){ - return d.editPosition.y - } - return 0 - } - z:999 - } } } Component{ id:com_column_header_delegate Rectangle{ - id:column_item_control + id: column_item_control + property var currentTableView : TableView.view readonly property real cellPadding: 8 property bool canceled: false property var _model: model - readonly property var columnModel : control.columnSource[column] - implicitWidth: { - return (item_column_loader.item && item_column_loader.item.implicitWidth) + (cellPadding * 2) + readonly property var columnModel : control.columnSource[_index] + readonly property int _index : { + const isDataIndex = (element) => { + return element.dataIndex === display.dataIndex + } + return control.columnSource.findIndex(isDataIndex) + } + readonly property bool isHeaderHorizontal: TableView.view == header_horizontal + implicitWidth: { + if(column_item_control.isHeaderHorizontal){ + return (item_column_loader.item && item_column_loader.item.implicitWidth) + (cellPadding * 2) + } + return TableView.view.width + } + implicitHeight: { + if(column_item_control.isHeaderHorizontal){ + return Math.max(36, (item_column_loader.item&&item_column_loader.item.implicitHeight) + (cellPadding * 2)) + } + return TableView.view.height } - implicitHeight: Math.max(36, (item_column_loader.item&&item_column_loader.item.implicitHeight) + (cellPadding * 2)) color: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1) Rectangle{ border.color: control.borderColor @@ -493,7 +516,7 @@ Rectangle { width: 1 height: parent.height anchors.left: parent.left - visible: column !== 0 + visible: column_item_control._index !== 0 color:"#00000000" } Rectangle{ @@ -502,7 +525,7 @@ Rectangle { height: parent.height anchors.right: parent.right color:"#00000000" - visible: column === table_view.columns - 1 + visible: column_item_control._index === table_view.columns - 1 } MouseArea{ id:column_item_control_mouse @@ -525,7 +548,7 @@ Rectangle { FluLoader{ id:item_column_loader property var model: column_item_control._model - property var display: model.display + property var display: model.display.title property var tableView: table_view property var sourceModel: control.sourceModel property bool isObject: typeof(display) == "object" @@ -535,7 +558,7 @@ Rectangle { } return {} } - property int column: model.column + property int column: column_item_control._index width: parent.width height: parent.height sourceComponent: { @@ -552,7 +575,7 @@ Rectangle { anchors.right: parent.right acceptedButtons: Qt.LeftButton hoverEnabled: true - visible: !(columnModel.width === columnModel.minimumWidth && columnModel.width === columnModel.maximumWidth && columnModel.width) + visible: !columnModel.frozen && !(columnModel.width === columnModel.minimumWidth && columnModel.width === columnModel.maximumWidth && columnModel.width) cursorShape: Qt.SplitHCursor preventStealing: true onPressed : @@ -587,6 +610,7 @@ Rectangle { columnModel.width = Math.min(Math.max(minimumWidth, w + delta.x),maximumWidth) table_view.forceLayout() header_horizontal.forceLayout() +// column_item_control.currentTableView.forceLayout() } } } @@ -811,60 +835,108 @@ Rectangle { } } } - Item{ anchors{ left: header_vertical.right top: parent.top bottom: parent.bottom + right: parent.right } - Component{ id: com_table_frozen - Item{ + Rectangle{ id: item_layout_frozen - property var sourceModel:FluTableModel { - columnSource: columnModel - rows: control.sourceModel.rows + anchors.fill: parent + color: { + if(Window.active){ + return FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) :Qt.rgba(1,1,1,1) + } + return FluTheme.dark ? Qt.rgba(56/255,56/255,56/255,1) :Qt.rgba(243/255,243/255,243/255,1) + } + Rectangle{ + z:99 + anchors.fill: parent + border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,0.6) : Qt.rgba(191/255,191/255,191/255,0.3) + FluShadow{ + radius: 0 + anchors.fill: parent + } + color: "#00000000" + } + TableView { + id:item_table_frozen_header + model: header_column_model + boundsBehavior: Flickable.StopAtBounds + clip: true + interactive: false + anchors{ + left: parent.left + right: parent.right + top: parent.top + bottom: item_table_frozen.top + } + delegate: com_column_header_delegate } TableView{ + property string dataIndex: columnModel.dataIndex + id: item_table_frozen clip: true + interactive: false anchors{ fill: parent topMargin: header_horizontal.height } - model: control.sourceModel + boundsBehavior: TableView.StopAtBounds + model: table_sort_model delegate: com_table_delegate syncDirection: Qt.Vertical syncView: table_view + Component.onCompleted: { + item_table_frozen_header.contentX = columnModel.width * _index + item_table_frozen.contentX = columnModel.width * _index + } } } } - 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) + readonly property int _index : model.index + readonly property var columnModel : control.columnSource[_index] Connections{ target: d function onTableItemLayout(column){ - if(column === index){ - item_layout_frozen.updateLayout() + if(item_layout_frozen._index === column){ + updateLayout() } } } Connections{ target: table_view function onContentXChanged(){ - item_layout_frozen.updateLayout() + 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) }) + width = table_view.columnWidthProvider(_index) + x = Qt.binding(function(){ + var minX = 0 + var maxX = table_view.width-item_layout_frozen.width + for(var i=0;i<_index;i++){ + var item = control.columnSource[i] + if(item.frozen){ + minX = minX + item.width + } + } + for(i=_index+1;i