amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-26 13:27:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
朱子楚\zhuzi 2024-04-29 10:12:34 +08:00
parent a746bc2684
commit 30531079b5
4 changed files with 144 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
example/example_en_US.ts
View File

@ -1964,7 +1964,7 @@ Some contents...</source>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="177"/> <location filename="qml/page/T_TableView.qml" line="177"/>
<location filename="qml/page/T_TableView.qml" line="510"/> <location filename="qml/page/T_TableView.qml" line="513"/>
<source>Name</source> <source>Name</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
@ -2019,32 +2019,32 @@ Some contents...</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="523"/> <location filename="qml/page/T_TableView.qml" line="526"/>
<source>Address</source> <source>Address</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="531"/> <location filename="qml/page/T_TableView.qml" line="534"/>
<source>Nickname</source> <source>Nickname</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="538"/> <location filename="qml/page/T_TableView.qml" line="541"/>
<source>Long String</source> <source>Long String</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="546"/> <location filename="qml/page/T_TableView.qml" line="549"/>
<source>Options</source> <source>Options</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="565"/> <location filename="qml/page/T_TableView.qml" line="569"/>
<source>&lt;Previous</source> <source>&lt;Previous</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="566"/> <location filename="qml/page/T_TableView.qml" line="570"/>
<source>Next&gt;</source> <source>Next&gt;</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>

14
example/example_zh_CN.ts
View File

@ -2110,7 +2110,7 @@ Some contents...</source>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="177"/> <location filename="qml/page/T_TableView.qml" line="177"/>
<location filename="qml/page/T_TableView.qml" line="510"/> <location filename="qml/page/T_TableView.qml" line="513"/>
<source>Name</source> <source>Name</source>
<translation type="unfinished">名称</translation> <translation type="unfinished">名称</translation>
</message> </message>
@ -2155,32 +2155,32 @@ Some contents...</source>
<translation type="unfinished">头像</translation> <translation type="unfinished">头像</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="523"/> <location filename="qml/page/T_TableView.qml" line="526"/>
<source>Address</source> <source>Address</source>
<translation type="unfinished">地址</translation> <translation type="unfinished">地址</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="531"/> <location filename="qml/page/T_TableView.qml" line="534"/>
<source>Nickname</source> <source>Nickname</source>
<translation type="unfinished">昵称</translation> <translation type="unfinished">昵称</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="538"/> <location filename="qml/page/T_TableView.qml" line="541"/>
<source>Long String</source> <source>Long String</source>
<translation type="unfinished">长字符串</translation> <translation type="unfinished">长字符串</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="546"/> <location filename="qml/page/T_TableView.qml" line="549"/>
<source>Options</source> <source>Options</source>
<translation type="unfinished">操作</translation> <translation type="unfinished">操作</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="565"/> <location filename="qml/page/T_TableView.qml" line="569"/>
<source>&lt;Previous</source> <source>&lt;Previous</source>
<translation type="unfinished">&lt;上一页</translation> <translation type="unfinished">&lt;上一页</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="566"/> <location filename="qml/page/T_TableView.qml" line="570"/>
<source>Next&gt;</source> <source>Next&gt;</source>
<translation type="unfinished">下一页&gt;</translation> <translation type="unfinished">下一页&gt;</translation>
</message> </message>

10
example/qml/page/T_TableView.qml
View File

@ -499,12 +499,15 @@ FluContentPage{
dataIndex: 'checkbox', dataIndex: 'checkbox',
width:100, width:100,
minimumWidth:100, minimumWidth:100,
maximumWidth:100 maximumWidth:300
}, },
{ {
title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}), title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}),
dataIndex: 'avatar', dataIndex: 'avatar',
width:100 width:100,
minimumWidth:100,
maximumWidth:100,
frozen:true
}, },
{ {
title: table_view.customItem(com_column_filter_name,{title:qsTr("Name")}), title: table_view.customItem(com_column_filter_name,{title:qsTr("Name")}),
@ -547,7 +550,8 @@ FluContentPage{
dataIndex: 'action', dataIndex: 'action',
width:160, width:160,
minimumWidth:160, minimumWidth:160,
maximumWidth:160 maximumWidth:160,
frozen:true
} }
] ]
} }

151
src/Qt6/imports/FluentUI/Controls/FluTableView.qml
View File

@ -30,12 +30,20 @@ Rectangle {
if(columnSource.length!==0){ if(columnSource.length!==0){
var columns= [] var columns= []
var headerRow = {} 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); var column = Qt.createQmlObject('import Qt.labs.qmlmodels 1.0;TableModelColumn{}',sourceModel);
column.display = item.dataIndex column.display = item.dataIndex
columns.push(column) columns.push(column)
headerRow[item.dataIndex] = item.title headerRow[item.dataIndex] = item.title
}) }
header_column_model.columns = columns header_column_model.columns = columns
header_column_model.rows = [headerRow] header_column_model.rows = [headerRow]
} }
@ -48,6 +56,7 @@ Rectangle {
property int defaultItemHeight: 42 property int defaultItemHeight: 42
property var editDelegate property var editDelegate
property var editPosition property var editPosition
signal tableItemLayout(int column)
function getEditDelegate(column){ function getEditDelegate(column){
var obj =control.columnSource[column].editDelegate var obj =control.columnSource[column].editDelegate
if(obj){ if(obj){
@ -189,6 +198,7 @@ Rectangle {
id:com_table_delegate id:com_table_delegate
MouseArea{ MouseArea{
id:item_table_mouse id:item_table_mouse
implicitWidth: TableView.view.width
property var _model: model property var _model: model
property bool isRowSelected: { property bool isRowSelected: {
if(rowModel === null) if(rowModel === null)
@ -198,17 +208,17 @@ Rectangle {
} }
return false return false
} }
TableView.onPooled: {
if(d.editPosition && d.editPosition.row === row && d.editPosition.column === column){
control.closeEditor()
}
}
property bool editVisible: { property bool editVisible: {
if(d.editPosition && d.editPosition._key === rowModel._key && d.editPosition.column === column){ if(d.editPosition && d.editPosition._key === rowModel._key && d.editPosition.column === column){
return true return true
} }
return false return false
} }
TableView.onPooled: {
if(d.editPosition && d.editPosition.row === row && d.editPosition.column === column){
control.closeEditor()
}
}
hoverEnabled: true hoverEnabled: true
onEntered: { onEntered: {
d.rowHoverIndex = row d.rowHoverIndex = row
@ -217,21 +227,25 @@ Rectangle {
if(editVisible){ if(editVisible){
updateEditPosition() updateEditPosition()
} }
item_table_mouse.updateTableItem()
} }
onHeightChanged: { onHeightChanged: {
if(editVisible){ if(editVisible){
updateEditPosition() updateEditPosition()
} }
item_table_mouse.updateTableItem()
} }
onXChanged: { onXChanged: {
if(editVisible){ if(editVisible){
updateEditPosition() updateEditPosition()
} }
item_table_mouse.updateTableItem()
} }
onYChanged: { onYChanged: {
if(editVisible){ if(editVisible){
updateEditPosition() updateEditPosition()
} }
item_table_mouse.updateTableItem()
} }
function updateEditPosition(){ function updateEditPosition(){
var obj = {} var obj = {}
@ -244,6 +258,12 @@ Rectangle {
obj.height = item_table_mouse.height - 2 obj.height = item_table_mouse.height - 2
d.editPosition = obj 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{ Rectangle{
anchors.fill: parent anchors.fill: parent
color:{ color:{
@ -271,7 +291,7 @@ Rectangle {
} }
loader_edit.display = item_table_loader.display loader_edit.display = item_table_loader.display
d.editDelegate = d.getEditDelegate(column) d.editDelegate = d.getEditDelegate(column)
updateEditPosition() item_table_mouse.updateEditPosition()
} }
onClicked: onClicked:
(event)=>{ (event)=>{
@ -358,24 +378,24 @@ Rectangle {
ScrollBar.horizontal:scroll_bar_h ScrollBar.horizontal:scroll_bar_h
ScrollBar.vertical:scroll_bar_v ScrollBar.vertical:scroll_bar_v
columnWidthProvider: function(column) { columnWidthProvider: function(column) {
var columnObject = control.columnSource[column] var columnModel = control.columnSource[column]
var width = columnObject.width var width = columnModel.width
if(width){ if(width){
return width return width
} }
var minimumWidth = columnObject.minimumWidth var minimumWidth = columnModel.minimumWidth
if(minimumWidth){ if(minimumWidth){
return minimumWidth return minimumWidth
} }
return d.defaultItemWidth return d.defaultItemWidth
} }
rowHeightProvider: function(row) { rowHeightProvider: function(row) {
var rowObject = control.getRow(row) var rowModel = control.getRow(row)
var height = rowObject.height var height = rowModel.height
if(height){ if(height){
return height return height
} }
var minimumHeight = rowObject._minimumHeight var minimumHeight = rowModel._minimumHeight
if(minimumHeight){ if(minimumHeight){
return minimumHeight return minimumHeight
} }
@ -440,6 +460,7 @@ Rectangle {
} }
} }
} }
Component{ Component{
id:com_column_header_delegate id:com_column_header_delegate
Rectangle{ Rectangle{
@ -447,7 +468,7 @@ Rectangle {
readonly property real cellPadding: 8 readonly property real cellPadding: 8
property bool canceled: false property bool canceled: false
property var _model: model property var _model: model
readonly property var columnObject : control.columnSource[column] readonly property var columnModel : control.columnSource[column]
implicitWidth: { implicitWidth: {
return (item_column_loader.item && item_column_loader.item.implicitWidth) + (cellPadding * 2) return (item_column_loader.item && item_column_loader.item.implicitWidth) + (cellPadding * 2)
} }
@ -531,7 +552,7 @@ Rectangle {
anchors.right: parent.right anchors.right: parent.right
acceptedButtons: Qt.LeftButton acceptedButtons: Qt.LeftButton
hoverEnabled: true 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 cursorShape: Qt.SplitHCursor
preventStealing: true preventStealing: true
onPressed : onPressed :
@ -551,9 +572,9 @@ Rectangle {
return return
} }
var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y) var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
var minimumWidth = columnObject.minimumWidth var minimumWidth = columnModel.minimumWidth
var maximumWidth = columnObject.maximumWidth var maximumWidth = columnModel.maximumWidth
var w = columnObject.width var w = columnModel.width
if(!w){ if(!w){
w = d.defaultItemWidth w = d.defaultItemWidth
} }
@ -563,7 +584,7 @@ Rectangle {
if(!maximumWidth){ if(!maximumWidth){
maximumWidth = 65535 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() table_view.forceLayout()
header_horizontal.forceLayout() header_horizontal.forceLayout()
} }
@ -576,7 +597,7 @@ Rectangle {
id:item_control id:item_control
readonly property real cellPadding: 8 readonly property real cellPadding: 8
property bool canceled: false 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)) implicitWidth: Math.max(30, row_text.implicitWidth + (cellPadding * 2))
implicitHeight: row_text.implicitHeight + (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) 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 cursorShape: Qt.SplitVCursor
preventStealing: true preventStealing: true
visible: { visible: {
if(rowObject === null) if(rowModel === null)
return false 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 : onPressed :
(mouse)=>{ (mouse)=>{
@ -662,11 +683,11 @@ Rectangle {
if(!pressed){ if(!pressed){
return return
} }
var rowObject = control.getRow(row) var rowModel = control.getRow(row)
var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y) var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
var minimumHeight = rowObject._minimumHeight var minimumHeight = rowModel._minimumHeight
var maximumHeight = rowObject._maximumHeight var maximumHeight = rowModel._maximumHeight
var h = rowObject.height var h = rowModel.height
if(!h){ if(!h){
h = d.defaultItemHeight h = d.defaultItemHeight
} }
@ -676,8 +697,8 @@ Rectangle {
if(!maximumHeight){ if(!maximumHeight){
maximumHeight = 65535 maximumHeight = 65535
} }
rowObject.height = Math.min(Math.max(minimumHeight, h + delta.y),maximumHeight) rowModel.height = Math.min(Math.max(minimumHeight, h + delta.y),maximumHeight)
control.setRow(row,rowObject) control.setRow(row,rowModel)
table_view.forceLayout() 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 { FluScrollBar {
id: scroll_bar_h id: scroll_bar_h
anchors{ anchors{