diff --git a/example/qml/global/ItemsOriginal.qml b/example/qml/global/ItemsOriginal.qml index 7f0b15f3..b9c9fb3c 100644 --- a/example/qml/global/ItemsOriginal.qml +++ b/example/qml/global/ItemsOriginal.qml @@ -252,6 +252,12 @@ FluObject{ navigationView.push("qrc:/example/qml/page/T_TableView.qml") } } + FluPaneItem{ + title:"TableView2" + onTap:{ + navigationView.push("qrc:/example/qml/page/T_TableView2.qml") + } + } FluPaneItem{ title:"MultiWindow" onTap:{ diff --git a/example/qml/page/T_ComboBox.qml b/example/qml/page/T_ComboBox.qml index 22d7092d..d8b1f448 100644 --- a/example/qml/page/T_ComboBox.qml +++ b/example/qml/page/T_ComboBox.qml @@ -28,10 +28,6 @@ FluScrollablePage{ ListElement { text: "Apple" } ListElement { text: "Coconut" } } - onAccepted: { - if (find(editText) === -1) - model_1.append({text: editText}) - } } } } diff --git a/example/qml/page/T_TableView.qml b/example/qml/page/T_TableView.qml index e11a50aa..f24cac13 100644 --- a/example/qml/page/T_TableView.qml +++ b/example/qml/page/T_TableView.qml @@ -14,12 +14,14 @@ FluScrollablePage{ { title: '姓名', dataIndex: 'name', - width:100 + width:100, + }, { title: '年龄', - dataIndex: 'age', - width:100 + dataIndex: 'item_age', + width:100, + minimumWidth:100 }, { title: '住址', @@ -41,17 +43,30 @@ FluScrollablePage{ loadData(1,10) } - FluTableView{ - id:table_view - Layout.fillWidth: true - Layout.topMargin: 20 - pageCurrent:1 - pageCount:10 - itemCount: 1000 - onRequestPage: - (page,count)=> { - loadData(page,count) + 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{ @@ -65,7 +80,7 @@ FluScrollablePage{ text:"编辑" horizontalPadding: 6 onClicked:{ - showSuccess(JSON.stringify(dataObject)) + showError(JSON.stringify(dataObject)) } } FluFilledButton{ @@ -79,6 +94,20 @@ FluScrollablePage{ } } + + 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 @@ -131,13 +160,34 @@ FluScrollablePage{ } function loadData(page,count){ + var numbers = [100, 300, 500, 1000]; + function getRandomAge() { + var randomIndex = Math.floor(Math.random() * numbers.length); + return numbers[randomIndex]; + } + var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"]; + function getRandomName(){ + var randomIndex = Math.floor(Math.random() * names.length); + return names[randomIndex]; + } + var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"] + function getRandomNickname(){ + var randomIndex = Math.floor(Math.random() * nicknames.length); + return nicknames[randomIndex]; + } + var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"] + function getRandomAddresses(){ + var randomIndex = Math.floor(Math.random() * addresses.length); + return addresses[randomIndex]; + } const dataSource = [] for(var i=0;i{ 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) + var minimumWidth = item_column_text.implicitWidth+28 + if(model.minimumWidth){ + minimumWidth = model.minimumWidth + } + item_column.width = Math.max(item_column.width+delta.x,minimumWidth) } } } @@ -136,7 +140,7 @@ Item { interactive: false header: header_columns footer: Item{ - height: pageVisible ? 50 : 0 + height: pageVisible ? 54 : 0 clip: true width: layout_table.width FluPagination{ @@ -189,19 +193,6 @@ Item { 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{ id: table_row spacing: 0 @@ -210,8 +201,16 @@ Item { 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 | Qt.ClickFocus + background: Item{ + FluFocusRectangle{ + visible: item_row_control.activeFocus + radius:8 + } + } Loader{ id:item_column_loader property var model : modelData @@ -243,6 +242,7 @@ Item { } } } + Component{ id:com_text Item{ diff --git a/src/imports/FluentUI/Controls/FluTableView2.qml b/src/imports/FluentUI/Controls/FluTableView2.qml new file mode 100644 index 00000000..c0c1171d --- /dev/null +++ b/src/imports/FluentUI/Controls/FluTableView2.qml @@ -0,0 +1,84 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic +import QtQuick.Layouts +import Qt.labs.qmlmodels +import FluentUI + +TableView { + property var columnSource + property var dataSource + id:control + ListModel{ + id:model_columns + } + columnWidthProvider: function (column) { + return 100 + } + rowHeightProvider: function (column) { + return 60 + } + topMargin: columnsHeader.implicitHeight + model: table_model + ScrollBar.horizontal: FluScrollBar{} + ScrollBar.vertical: FluScrollBar{} + clip: true + boundsBehavior:Flickable.StopAtBounds + delegate: Rectangle { + color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) + FluText { + text: display + anchors.fill: parent + anchors.margins: 10 + verticalAlignment: Text.AlignVCenter + } + } + + 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: { + table_model.clear() + dataSource.forEach(function(item){ + table_model.appendRow(item) + }) + } + + TableModel { + id:table_model + } + + Row { + id: columnsHeader + y: control.contentY + z: 2 + Repeater { + model: columnSource + Rectangle{ + height: 35 + width: control.columnWidthProvider(index) + color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1) + FluText { + text: modelData.title + font: FluTextStyle.BodyStrong + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + leftMargin: 10 + } + } + } + } + } +}