diff --git a/example/CMakeLists.txt b/example/CMakeLists.txt
index 67837152..f0c480e4 100644
--- a/example/CMakeLists.txt
+++ b/example/CMakeLists.txt
@@ -20,7 +20,7 @@ endif()
file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
#设置版本号
-add_definitions(-DVERSION=1,3,5,1)
+add_definitions(-DVERSION=1,3,6)
find_package(Qt6 REQUIRED COMPONENTS Quick)
qt_standard_project_setup()
diff --git a/example/qml/component/CodeExpander.qml b/example/qml/component/CodeExpander.qml
index 680f8f5f..55ec9ed8 100644
--- a/example/qml/component/CodeExpander.qml
+++ b/example/qml/component/CodeExpander.qml
@@ -131,7 +131,8 @@ FluExpander{
"FluCopyableText",
"FluAcrylic",
"FluRemoteLoader",
- "FluMenuBar"
+ "FluMenuBar",
+ "FluPagination"
];
code = code.replace(/\n/g, "
");
code = code.replace(/ /g, " ");
diff --git a/example/qml/global/ItemsOriginal.qml b/example/qml/global/ItemsOriginal.qml
index 004bfb63..b65ad888 100644
--- a/example/qml/global/ItemsOriginal.qml
+++ b/example/qml/global/ItemsOriginal.qml
@@ -259,9 +259,9 @@ FluObject{
}
}
FluPaneItem{
- title:"TableView2"
+ title:"Pagination"
onTap:{
- navigationView.push("qrc:/example/qml/page/T_TableView2.qml")
+ navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
}
}
FluPaneItem{
diff --git a/example/qml/page/T_Pagination.qml b/example/qml/page/T_Pagination.qml
new file mode 100644
index 00000000..fa072dc6
--- /dev/null
+++ b/example/qml/page/T_Pagination.qml
@@ -0,0 +1,49 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import "qrc:///example/qml/component"
+import FluentUI
+
+FluScrollablePage{
+
+ title:"Pagination"
+
+ FluArea{
+ Layout.fillWidth: true
+ height: 200
+ paddings: 10
+ Layout.topMargin: 20
+ ColumnLayout{
+ spacing: 20
+ anchors.verticalCenter: parent.verticalCenter
+ FluPagination{
+ pageCurrent: 1
+ pageButtonCount: 5
+ itemCount: 5000
+ }
+ FluPagination{
+ pageCurrent: 2
+ itemCount: 5000
+ pageButtonCount: 7
+ }
+ FluPagination{
+ pageCurrent: 3
+ itemCount: 5000
+ pageButtonCount: 9
+ }
+ }
+
+ }
+ CodeExpander{
+ Layout.fillWidth: true
+ Layout.topMargin: -1
+ code:'FluPagination{
+ pageCurrent: 1
+ itemCount: 1000
+ pageButtonCount: 9
+}'
+ }
+
+
+}
diff --git a/example/qml/page/T_TableView.qml b/example/qml/page/T_TableView.qml
index 7eacfa01..2f61a769 100644
--- a/example/qml/page/T_TableView.qml
+++ b/example/qml/page/T_TableView.qml
@@ -5,162 +5,12 @@ import QtQuick.Window
import FluentUI
import "qrc:///example/qml/component"
-FluScrollablePage{
+FluContentPage{
title:"TableView"
Component.onCompleted: {
- const columns = [
- {
- title: '姓名',
- dataIndex: 'name',
- width:100,
-
- },
- {
- title: '年龄',
- dataIndex: 'item_age',
- width:100,
- minimumWidth:100
- },
- {
- title: '住址',
- dataIndex: 'address',
- width:200
- },
- {
- title: '别名',
- dataIndex: 'nickname',
- width:100
- },
- {
- title: '操作',
- dataIndex: 'action',
- width:120
- },
- ];
- table_view.columns = columns
- loadData(1,10)
- }
-
- Component{
- id:com_age
- Item{
- id:item_age
- property var ageArr: [100,300,500,1000]
- height: 60
- FluComboBox{
- width: 80
- anchors{
- verticalCenter: parent.verticalCenter
- left: parent.left
- leftMargin: 10
- }
- model: ListModel {
- ListElement { text: 100 }
- ListElement { text: 300 }
- ListElement { text: 500 }
- ListElement { text: 1000 }
- }
- Component.onCompleted: {
- currentIndex=ageArr.findIndex((element) => element === dataModel.age)
- }
- }
- }
- }
-
- Component{
- id:com_action
- Item{
- height: 60
- Row{
- anchors.centerIn: parent
- spacing: 10
- FluFilledButton{
- text:"编辑"
- horizontalPadding: 6
- onClicked:{
- showError(JSON.stringify(dataObject))
- }
- }
- FluFilledButton{
- text:"删除"
- horizontalPadding: 6
- onClicked:{
- tableView.remove(dataModel.index)
- }
- }
- }
- }
- }
-
- FluText{
- Layout.topMargin: 20
- text:"此TableView适用于小数据量,带分页的表格,大数据量请使用TableView2。"
- }
-
- FluTableView{
- id:table_view
- Layout.fillWidth: true
- Layout.topMargin: 20
- pageCurrent:1
- pageCount:10
- itemCount: 1000
- onRequestPage:
- (page,count)=> {
- loadData(page,count)
- }
- }
-
- CodeExpander{
- Layout.fillWidth: true
- Layout.topMargin: 10
- code:'FluTableView{
- id:table_view
- Layout.fillWidth: true
- Layout.topMargin: 20
- pageCurrent:1
- pageCount:10
- itemCount: 1000
- onRequestPage:
- (page,count)=> {
- loadData(page,count)
- }
- Component.onCompleted: {
- const columns = [
- {
- title: "姓名",
- dataIndex: "name",
- width:100
- },
- {
- title: "年龄",
- dataIndex: "age",
- width:100
- },
- {
- title: "住址",
- dataIndex: "address",
- width:200
- },
- {
- title: "别名",
- dataIndex: "nickname",
- width:100
- }
- ];
- table_view.columns = columns
- const dataSource = [
- {
- name: "孙悟空”,
- age: 500,
- address:"钟灵毓秀的花果山,如神仙仙境的水帘洞",
- nickname:"齐天大圣"
- }
- ];
- table_view.dataSource = columns
- }
-}'
+ loadData(1,2000)
}
function loadData(page,count){
@@ -188,13 +38,68 @@ FluScrollablePage{
for(var i=0;i element === Number(display))
+ selectAll()
+ }
+ TableView.onCommit: {
+ display = editText
+ }
+ }
+ }
+
+ FluTableView{
+ id:table_view
+ anchors.fill: parent
+ anchors.topMargin: 20
+ columnSource:[
+ {
+ title: '姓名',
+ dataIndex: 'name',
+ width:100,
+ minimumWidth:50
+
+ },
+ {
+ title: '年龄',
+ dataIndex: 'age',
+ editDelegate:com_combobox,
+ width:100,
+ minimumWidth:100,
+ maximumWidth: 100
+ },
+ {
+ title: '住址',
+ dataIndex: 'address',
+ width:200
+ },
+ {
+ title: '别名',
+ dataIndex: 'nickname',
+ width:100,
+
+ }
+ ]
+ }
}
diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt
index 90f8c372..06bbc421 100644
--- a/src/CMakeLists.txt
+++ b/src/CMakeLists.txt
@@ -13,7 +13,7 @@ endif()
set(QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
#设置版本号
-add_definitions(-DVERSION=1,3,5,1)
+add_definitions(-DVERSION=1,3,6)
find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
qt_standard_project_setup()
diff --git a/src/imports/FluentUI/Controls/FluPagination.qml b/src/imports/FluentUI/Controls/FluPagination.qml
index 41fd1353..188b0932 100644
--- a/src/imports/FluentUI/Controls/FluPagination.qml
+++ b/src/imports/FluentUI/Controls/FluPagination.qml
@@ -9,9 +9,9 @@ Item {
property string nextText: "下一页>"
property int pageCurrent: 0
property int itemCount: 0
+ property int pageButtonCount: 5
property int pageCount: itemCount>0?Math.ceil(itemCount/__itemPerPage):0
property int __itemPerPage: 10
- property int pageButtonCount: 5
property int __pageButtonHalf: Math.floor(pageButtonCount/2)+1
id: control
implicitHeight: 40
@@ -34,7 +34,6 @@ Item {
FluToggleButton{
property int pageNumber:1
visible: control.pageCount>0
- enabled: control.pageCurrent>1
checked: pageNumber === control.pageCurrent
text:String(pageNumber)
clickListener:function() {
diff --git a/src/imports/FluentUI/Controls/FluTableView.qml b/src/imports/FluentUI/Controls/FluTableView.qml
index a00c99d4..46b16cad 100644
--- a/src/imports/FluentUI/Controls/FluTableView.qml
+++ b/src/imports/FluentUI/Controls/FluTableView.qml
@@ -2,293 +2,163 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtQuick.Layouts
+import Qt.labs.qmlmodels
import FluentUI
-Item {
- property var columns : []
- property var dataSource : []
- property int pageCurrent: 1
- property int itemCount: 1000
- property int pageCount: 10
- property int itemHeight: 56
- property bool pageVisible: true
- signal requestPage(int page,int count)
+Rectangle {
+ property var columnSource
+ property var dataSource
id:control
- implicitHeight: layout_table.height
- QtObject{
- id:d
- property int columnsWidth: layout_table.headerItem.columnsWidth()
- }
- MouseArea{
- anchors.fill: parent
- preventStealing: true
- }
- ListModel{
- id:model_columns
- }
- ListModel{
- id:model_data_source
- }
- onColumnsChanged: {
- model_columns.clear()
- model_columns.append(columns)
+ color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+ onColumnSourceChanged: {
+ if(columnSource.length!==0){
+ var com_column = Qt.createComponent("FluTableModelColumn.qml")
+ if (com_column.status === Component.Ready) {
+ var columns= []
+ columnSource.forEach(function(item){
+ var column = com_column.createObject(table_model,{display:item.dataIndex});
+ columns.push(column)
+ })
+ table_model.columns = columns
+ }
+ }
}
onDataSourceChanged: {
- model_data_source.clear()
- model_data_source.append(dataSource)
+ table_model.clear()
+ dataSource.forEach(function(item){
+ table_model.appendRow(item)
+ })
+ }
+ TableModel {
+ id:table_model
}
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{
- clickPos = Qt.point(mouse.x, mouse.y)
- }
- preventStealing: true
- onPositionChanged:
- (mouse)=>{
- var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
- var minimumWidth = item_column_text.implicitWidth+28
- if(model.minimumWidth){
- minimumWidth = model.minimumWidth
- }
- item_column.width = Math.max(item_column.width+delta.x,minimumWidth)
- }
- }
- }
- }
+ id:com_edit
+ FluTextBox {
+ anchors.fill: parent
+ text: display
+ verticalAlignment: TextInput.AlignVCenter
+ Component.onCompleted: selectAll()
+ TableView.onCommit: {
+ display = text
}
}
}
- Flickable{
- id:layout_flickable
- height: layout_table.height
- anchors{
- top: parent.top
- left: parent.left
- right: parent.right
- }
- contentWidth: layout_table.width
- clip:true
- ScrollBar.horizontal: FluScrollBar {
- }
- Rectangle{
- anchors.fill: layout_table
- radius: 5
- color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
- }
- ListView{
- id:layout_table
- height: contentHeight
- width: Math.max(layout_flickable.width,d.columnsWidth)
- clip:true
- interactive: false
- removeDisplaced: Transition {
- NumberAnimation { properties: "x,y"; duration: 167 }
+ ScrollView{
+ id:scroll_table
+ anchors.left: header_vertical.right
+ anchors.top: header_horizontal.bottom
+ anchors.right: parent.right
+ anchors.bottom: parent.bottom
+ ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+ ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+ TableView {
+ id:table_view
+ ListModel{
+ id:model_columns
}
- header: header_columns
- footer: Item{
- height: pageVisible ? 54 : 0
- clip: true
- width: layout_table.width
- FluPagination{
- id:pagination
- height: 40
- pageCurrent: control.pageCurrent
- onPageCurrentChanged: control.pageCurrent = pageCurrent
- itemCount: control.itemCount
- pageCount: control.pageCount
- onRequestPage:
- (page,count)=> {
- control.requestPage(page,count)
- }
- anchors{
- top: parent.top
- right: parent.right
+ boundsBehavior: Flickable.StopAtBounds
+ ScrollBar.horizontal: FluScrollBar{}
+ ScrollBar.vertical: FluScrollBar{}
+ selectionModel: ItemSelectionModel {}
+ columnWidthProvider: function(column) {
+ let w = explicitColumnWidth(column)
+ if (w >= 0){
+ var minimumWidth = columnSource[column].minimumWidth
+ var maximumWidth = columnSource[column].maximumWidth
+ if(!minimumWidth){
+ minimumWidth = 100
}
- Connections{
- target: control
- function onPageCurrentChanged(){
- if (control.pageCurrent!==pagination.pageCurrent)
- {
- pagination.calcNewPage(control.pageCurrent)
- }
- }
+ if(!maximumWidth){
+ maximumWidth = 65535
}
+
+ return Math.min(Math.max(minimumWidth, w),maximumWidth)
}
+ return implicitColumnWidth(column)
}
- model:model_data_source
- delegate: Control{
- id:item_control
- height: maxHeight()
- width: layout_table.width
- property var model_values : getObjectValues(index)
- property var itemObject: getObject(index)
- property var listModel: model
- Rectangle{
+ rowHeightProvider: function(row) {
+ let h = explicitRowHeight(row)
+ if (h >= 0){
+ return Math.max(40, h)
+ }
+ return implicitRowHeight(row)
+ }
+ model: table_model
+ clip: true
+ delegate: Rectangle {
+ required property bool selected
+ required property bool current
+ color: selected ? FluTheme.primaryColor.lightest: (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06))
+ implicitHeight: 40
+ implicitWidth: columnSource[column].width
+ FluText {
+ text: display
anchors.fill: parent
- color: {
- if(item_control.hovered){
- return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
- }
- return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
- }
+ anchors.margins: 10
+ elide: Text.ElideRight
+ verticalAlignment: Text.AlignVCenter
}
- FluDivider{
- id:item_divider
- width: parent.width
- height: 1
- anchors.right: parent.right
- anchors.bottom: parent.bottom
- }
- Row{
- id: table_row
- spacing: 0
- anchors.fill: parent
- Repeater{
- id:repeater_rows
- model: model_values
- delegate:FluControl{
- id:item_row_control
- width: layout_table.headerItem.widthByColumnIndex(index)
- height: item_control.height
- focusPolicy:Qt.TabFocus
- background: Item{
- FluFocusRectangle{
- visible: item_row_control.activeFocus
- radius:8
- }
- }
- Loader{
- id:item_column_loader
- property var model : modelData
- property var dataModel : listModel
- property var dataObject : itemObject
- property var tableView : control
- anchors.verticalCenter: parent.verticalCenter
- width: parent.width
- sourceComponent: {
- if(model.itemData instanceof Component){
- return model.itemData
- }
- return com_text
- }
- }
- function columnHeight(){
- return item_column_loader.item.height
- }
- }
+ TableView.editDelegate: {
+ var obj =columnSource[column].editDelegate
+ if(obj){
+ return obj
}
- }
- function maxHeight(){
- var h = 0
- for(var i=0;i= 0){
- var minimumWidth = columnSource[column].minimumWidth
- var maximumWidth = columnSource[column].maximumWidth
- if(!minimumWidth){
- minimumWidth = 100
- }
- if(!maximumWidth){
- maximumWidth = 65535
- }
-
- return Math.min(Math.max(minimumWidth, w),maximumWidth)
- }
- return implicitColumnWidth(column)
- }
- rowHeightProvider: function(row) {
- let h = explicitRowHeight(row)
- if (h >= 0){
- return Math.max(40, h)
- }
- return implicitRowHeight(row)
- }
- model: table_model
- clip: true
- delegate: Rectangle {
- required property bool selected
- required property bool current
- color: selected ? FluTheme.primaryColor.lightest: (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06))
- implicitHeight: 40
- implicitWidth: columnSource[column].width
- FluText {
- text: display
- anchors.fill: parent
- anchors.margins: 10
- elide: Text.ElideRight
- verticalAlignment: Text.AlignVCenter
- }
- TableView.editDelegate: {
- var obj =columnSource[column].editDelegate
- if(obj){
- return obj
- }
- return com_edit
- }
- }
- }
- }
- Component{
- id:com_handle
- FluControl {
- width: 24
- height: 24
- background: Rectangle{
- radius: 12
- color: FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
- }
- visible: SelectionRectangle.control.active
- FluShadow{
- radius: 12
- }
- Rectangle{
- width: 24
- height: 24
- radius: 12
- scale: pressed?4/10:hovered?6/10:5/10
- color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
- anchors.centerIn: parent
- Behavior on scale {
- NumberAnimation{
- duration: 167
- }
- }
- }
- }
- }
- SelectionRectangle {
- target: table_view
- bottomRightHandle:com_handle
- topLeftHandle: com_handle
- }
- FluHorizontalHeaderView {
- id: header_horizontal
- textRole: "title"
- model: columnSource
- anchors.left: scroll_table.left
- anchors.top: parent.top
- syncView: table_view
- boundsBehavior: Flickable.StopAtBounds
- clip: true
- }
- FluVerticalHeaderView {
- id: header_vertical
- boundsBehavior: Flickable.StopAtBounds
- anchors.top: scroll_table.top
- anchors.left: parent.left
- syncView: table_view
- clip: true
- }
-}
-