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

update

Browse Source
This commit is contained in:
zhuzihcu 2023-06-13 18:17:40 +08:00
parent fd0ddbf5aa
commit d29580f8f2
2 changed files with 117 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,6 +57,7 @@ FluScrollablePage{
Component{ Component{
id:com_action id:com_action
Item{ Item{
height: 60
Row{ Row{
anchors.centerIn: parent anchors.centerIn: parent
spacing: 10 spacing: 10

177
src/imports/FluentUI/Controls/FluTableView.qml
View File

@ -17,7 +17,7 @@ Item {
implicitHeight: layout_table.height implicitHeight: layout_table.height
QtObject{ QtObject{
id:d id:d
property int columnsWidth: parent.width property int columnsWidth: layout_table.headerItem.columnsWidth()
} }
MouseArea{ MouseArea{
anchors.fill: parent anchors.fill: parent
@ -32,17 +32,85 @@ Item {
onColumnsChanged: { onColumnsChanged: {
model_columns.clear() model_columns.clear()
model_columns.append(columns) model_columns.append(columns)
var w = 0
for(var i=0;i<model_columns.count;i++){
var item = model_columns.get(i)
w=w+item.width
}
d.columnsWidth = w
} }
onDataSourceChanged: { onDataSourceChanged: {
model_data_source.clear() model_data_source.clear()
model_data_source.append(dataSource) model_data_source.append(dataSource)
} }
Component{
id:header_columns
FluRectangle{
id:layout_columns
height: control.itemHeight
width: parent.width
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
radius: [5,5,0,0]
function columnsWidth(){
var w = 0
for(var i=0;i<repeater_columns.count;i++){
var item = repeater_columns.itemAt(i)
w=w+item.width
}
return w
}
function widthByColumnIndex(index){
return repeater_columns.itemAt(index).width
}
Row{
id:list_columns
spacing: 0
anchors.fill: parent
Repeater{
id:repeater_columns
model: model_columns
delegate: Item{
id:item_column
property point clickPos: "0,0"
height: list_columns.height
width: model.width
FluText{
id:item_column_text
text:model.title
wrapMode: Text.WordWrap
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 14
}
font: FluTextStyle.BodyStrong
}
FluDivider{
id:item_divider
width: 1
height: 40
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
visible: index !== model_columns.count-1
}
MouseArea{
height: 40
width: 6
anchors.centerIn: item_divider
visible: item_divider.visible
cursorShape: Qt.SizeHorCursor
onPressed:
(mouse)=>{
clickPos = Qt.point(mouse.x, mouse.y)
}
preventStealing: true
onPositionChanged:
(mouse)=>{
var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
item_column.width = Math.max(item_column.width+delta.x,item_column_text.implicitWidth+28)
}
}
}
}
}
}
}
Flickable{ Flickable{
id:layout_flickable id:layout_flickable
height: layout_table.height height: layout_table.height
@ -66,42 +134,7 @@ Item {
width: Math.max(layout_flickable.width,d.columnsWidth) width: Math.max(layout_flickable.width,d.columnsWidth)
clip:true clip:true
interactive: false interactive: false
header: FluRectangle{ header: header_columns
id:layout_columns
height: control.itemHeight
width: parent.width
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
radius: [5,5,0,0]
Row{
id:list_columns
spacing: 0
anchors.fill: parent
Repeater{
model: model_columns
delegate: Item{
height: list_columns.height
width: model.width
FluText{
text:model.title
wrapMode: Text.WordWrap
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 14
}
font: FluTextStyle.BodyStrong
}
FluDivider{
width: 1
height: 40
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
visible: index !== model_columns.count-1
}
}
}
}
}
footer: Item{ footer: Item{
height: pageVisible ? 50 : 0 height: pageVisible ? 50 : 0
clip: true clip: true
@ -135,7 +168,7 @@ Item {
model:model_data_source model:model_data_source
delegate: Control{ delegate: Control{
id:item_control id:item_control
height: table_row.maxHeight height: maxHeight()
width: layout_table.width width: layout_table.width
property var model_values : getObjectValues(index) property var model_values : getObjectValues(index)
property var itemObject: getObject(index) property var itemObject: getObject(index)
@ -149,42 +182,63 @@ Item {
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1) return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
} }
} }
FluDivider{
id:item_divider
width: parent.width
height: 1
anchors.right: parent.right
anchors.bottom: parent.bottom
}
// Row{
// id: table_row_back
// spacing: 0
// anchors.fill: parent
// Repeater{
// model: model_values
// delegate:Rectangle{
// width: layout_table.headerItem.widthByColumnIndex(index)
// height: item_control.height
// color:"red"
// }
// }
// }
Row{ Row{
id: table_row id: table_row
spacing: 0 spacing: 0
anchors.fill: parent anchors.fill: parent
property int maxHeight: itemHeight
Repeater{ Repeater{
id:repeater_rows
model: model_values model: model_values
delegate:Item{ delegate:FluControl{
height: table_row.maxHeight width: layout_table.headerItem.widthByColumnIndex(index)
width: modelData.width height: item_control.height
Loader{ Loader{
id:item_column_loader
property var model : modelData property var model : modelData
property var dataModel : listModel property var dataModel : listModel
property var dataObject : itemObject property var dataObject : itemObject
anchors.fill: parent anchors.verticalCenter: parent.verticalCenter
width: parent.width
sourceComponent: { sourceComponent: {
if(model.itemData instanceof Component){ if(model.itemData instanceof Component){
return model.itemData return model.itemData
} }
return com_text return com_text
} }
onHeightChanged: }
{ function columnHeight(){
table_row.maxHeight = Math.max(table_row.maxHeight,height,itemHeight) return item_column_loader.item.height
parent.height = table_row.maxHeight
table_row.parent.height = table_row.maxHeight
}
} }
} }
} }
} }
FluDivider{ function maxHeight(){
width: parent.width var h = 0
height: 1 for(var i=0;i<repeater_rows.count;i++){
anchors.right: parent.right var item = repeater_rows.itemAt(i)
anchors.bottom: parent.bottom h=Math.max(h,item.columnHeight())
}
return h
} }
} }
} }
@ -192,17 +246,18 @@ Item {
Component{ Component{
id:com_text id:com_text
Item{ Item{
height: table_value.implicitHeight + 20
FluCopyableText{ FluCopyableText{
id:table_value id:table_value
text:String(model.itemData) text:String(model.itemData)
width: Math.min(parent.width - 14,implicitWidth) width: Math.min(parent.width - 14,implicitWidth)
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
onImplicitHeightChanged: parent.parent.parent.height = Math.max(implicitHeight + 20,itemHeight)
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left left: parent.left
leftMargin: 14 leftMargin: 14
} }
rightPadding: 14
MouseArea{ MouseArea{
id:item_mouse id:item_mouse
hoverEnabled: true hoverEnabled: true