From f8d717f41bd7021448e87751b155bf16a4b22867 Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Fri, 7 Apr 2023 18:27:50 +0800 Subject: [PATCH] update --- example/T_Buttons.qml | 41 +++++++ example/T_TableView.qml | 110 ++++++++++++++++++ example/global/ItemsOriginal.qml | 6 + example/qml.qrc | 1 + src/Fluent.cpp | 2 + src/controls/FluPagination.qml | 110 ++++++++++++++++++ src/controls/FluTableView.qml | 193 +++++++++++++++++++++++++++++++ src/controls/FluToggleButton.qml | 84 ++++++++++++++ src/res.qrc | 3 + 9 files changed, 550 insertions(+) create mode 100644 example/T_TableView.qml create mode 100644 src/controls/FluPagination.qml create mode 100644 src/controls/FluTableView.qml create mode 100644 src/controls/FluToggleButton.qml diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml index a875fa7..8f30eb7 100644 --- a/example/T_Buttons.qml +++ b/example/T_Buttons.qml @@ -141,6 +141,47 @@ FluScrollablePage{ }' } + FluArea{ + Layout.fillWidth: true + height: 68 + Layout.topMargin: 20 + paddings: 10 + + FluToggleButton{ + disabled:toggle_button_switch.selected + text:"Toggle Button" + onClicked: { + selected = !selected + } + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + } + + Row{ + spacing: 5 + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + } + FluToggleSwitch{ + id:toggle_button_switch + Layout.alignment: Qt.AlignRight + text:"Disabled" + } + } + } + CodeExpander{ + Layout.fillWidth: true + code:'FluToggleButton{ + text:"Toggle Button" + onClicked: { + selected = !selected + } +}' + } + FluArea{ Layout.fillWidth: true diff --git a/example/T_TableView.qml b/example/T_TableView.qml new file mode 100644 index 0000000..92ab624 --- /dev/null +++ b/example/T_TableView.qml @@ -0,0 +1,110 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import QtQuick.Window +import FluentUI +import "./component" + +FluScrollablePage{ + + title:"TableView" + leftPadding:10 + rightPadding:10 + bottomPadding:20 + spacing: 0 + + Component.onCompleted: { + const columns = [ + { + title: '姓名', + dataIndex: 'name', + width:100 + }, + { + title: '年龄', + dataIndex: 'age', + width:100 + }, + { + title: '住址', + dataIndex: 'address', + width:200 + }, + { + title: '别名', + dataIndex: 'nickname', + width:100 + }, + { + title: '操作', + dataIndex: 'action', + width:100 + }, + ]; + table_view.columns = columns + loadData(1,10) + } + + + FluTableView{ + id:table_view + Layout.fillWidth: true + Layout.topMargin: 20 + width:parent.width + pageCurrent:1 + pageCount:10 + itemCount: 1000 + onRequestPage: + (page,count)=> { + loadData(page,count) + } + } + + Component{ + id:com_action + Item{ + Row{ + anchors.centerIn: parent + spacing: 10 + FluFilledButton{ + text:"编辑" + topPadding:3 + bottomPadding:3 + leftPadding:3 + rightPadding:3 + onClicked:{ + console.debug(dataModel.index) + showSuccess(JSON.stringify(dataObject)) + } + } + FluFilledButton{ + text:"删除" + topPadding:3 + bottomPadding:3 + leftPadding:3 + rightPadding:3 + onClicked:{ + showError(JSON.stringify(dataObject)) + } + } + } + } + } + + function loadData(page,count){ + const dataSource = [] + for(var i=0;iT_FlipView.qml T_Pivot.qml component/CodeExpander.qml + T_TableView.qml diff --git a/src/Fluent.cpp b/src/Fluent.cpp index b6c59bd..8fced89 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -33,6 +33,8 @@ void Fluent::registerTypes(const char *uri){ qmlRegisterType(uri,major,minor,"WindowHelper"); qmlRegisterType(uri,major,minor,"FluColorSet"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluToggleButton.qml"),uri,major,minor,"FluToggleButton"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTableView.qml"),uri,major,minor,"FluTableView"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPivotItem.qml"),uri,major,minor,"FluPivotItem"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPivot.qml"),uri,major,minor,"FluPivot"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluFlipView.qml"),uri,major,minor,"FluFlipView"); diff --git a/src/controls/FluPagination.qml b/src/controls/FluPagination.qml new file mode 100644 index 0000000..d26a1aa --- /dev/null +++ b/src/controls/FluPagination.qml @@ -0,0 +1,110 @@ +import QtQuick +import FluentUI +import QtQuick.Layouts + +Item { + id: control + + + signal requestPage(int page,int count) + property int pageCurrent: 0 + property int itemCount: 0 + 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 + + + implicitHeight: 40 + implicitWidth: content.width + + Row{ + id: content + height: control.height + spacing: 25 + padding: 10 + + + FluToggleButton{ + visible: control.pageCount>1 + enabled: control.pageCurrent>1 + text:"<上一页" + onClicked: { + control.calcNewPage(control.pageCurrent-1); + } + } + + Row{ + spacing: 5 + FluToggleButton{ + property int pageNumber:1 + visible: control.pageCount>0 + enabled: control.pageCurrent>1 + selected: pageNumber === control.pageCurrent + text:String(pageNumber) + onClicked: { + control.calcNewPage(pageNumber); + } + } + FluText{ + visible: (control.pageCount>control.pageButtonCount&& + control.pageCurrent>control.__pageButtonHalf) + text: "..." + } + Repeater{ + id: button_repeator + model: (control.pageCount<2)?0:(control.pageCount>=control.pageButtonCount)?(control.pageButtonCount-2):(control.pageCount-2) + delegate:FluToggleButton{ + property int pageNumber: { + return (control.pageCurrent<=control.__pageButtonHalf) + ?(2+index) + :(control.pageCount-control.pageCurrent<=control.pageButtonCount-control.__pageButtonHalf) + ?(control.pageCount-button_repeator.count+index) + :(control.pageCurrent+2+index-control.__pageButtonHalf) + } + text:String(pageNumber) + selected: pageNumber === control.pageCurrent + onClicked: { + control.calcNewPage(pageNumber); + } + } + } + FluText{ + visible: (control.pageCount>control.pageButtonCount&& + control.pageCount-control.pageCurrent>control.pageButtonCount-control.__pageButtonHalf) + text: "..." + } + FluToggleButton{ + property int pageNumber:control.pageCount + visible: control.pageCount>0 + enabled: control.pageCurrent>1 + selected: pageNumber === control.pageCurrent + text:String(pageNumber) + onClicked: { + control.calcNewPage(pageNumber); + } + } + } + FluToggleButton{ + visible: control.pageCount>1 + enabled: control.pageCurrent" + onClicked: { + control.calcNewPage(control.pageCurrent+1); + } + } + } + + function calcNewPage(page) + { + if(!page) + return + let page_num=Number(page) + if(page_num<1||page_num>control.pageCount||page_num===control.pageCurrent) + return + control.pageCurrent=page_num + control.requestPage(page_num,control.__itemPerPage) + } + + +} diff --git a/src/controls/FluTableView.qml b/src/controls/FluTableView.qml new file mode 100644 index 0000000..ad74a3c --- /dev/null +++ b/src/controls/FluTableView.qml @@ -0,0 +1,193 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import FluentUI + +Item { + + id:control + property var columns : [] + property var dataSource : [] + property int pageCurrent: 1 + property int itemCount: 1000 + property int pageCount: 10 + property int itemHeight: 56 + signal requestPage(int page,int count) + + implicitHeight: layout_coumns.height + layout_table.height + + MouseArea{ + anchors.fill: parent + preventStealing: true + } + + ListModel{ + id:model_coumns + } + + ListModel{ + id:model_data_source + } + + onColumnsChanged: { + model_coumns.clear() + model_coumns.append(columns) + } + + onDataSourceChanged: { + model_data_source.clear() + model_data_source.append(dataSource) + } + + FluRectangle{ + id:layout_coumns + 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: [12,12,0,0] + + Row{ + id:list_coumns + spacing: 0 + anchors.fill: parent + Repeater{ + model: model_coumns + delegate: Item{ + height: list_coumns.height + width: model.width + FluText{ + text:model.title + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + leftMargin: 14 + } + fontStyle: FluText.BodyStrong + } + FluDivider{ + width: 1 + height: 40 + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + visible: index !== list_coumns.count-1 + } + } + } + } + } + + Rectangle{ + anchors.fill: layout_table + 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 + anchors{ + top: layout_coumns.bottom + left: parent.left + right: parent.right + } + height: contentHeight + clip:true + footer: Item{ + height: 50 + width: layout_table.width + FluPagination{ + id:pagination + height: 40 + pageCurrent: control.pageCurrent + itemCount: control.itemCount + pageCount: control.pageCount + onRequestPage: + (page,count)=> { + control.requestPage(page,count) + } + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + } + } + } + model:model_data_source + delegate: Item{ + height: list_coumns.height + width: layout_table.width + property var model_values : getObjectValues(index) + property var itemObject: getObject(index) + property var listModel: model + Row{ + spacing: 0 + anchors.fill: parent + Repeater{ + model: model_values + delegate:Item{ + height: list_coumns.height + width: modelData.width + Loader{ + property var model : modelData + property var dataModel : listModel + property var dataObject : itemObject + anchors.fill: parent + sourceComponent: { + if(model.itemData instanceof Component){ + return model.itemData + } + return com_text + } + } + } + } + } + FluDivider{ + width: parent.width + height: 1 + anchors.right: parent.right + anchors.bottom: parent.bottom + } + } + } + + Component{ + id:com_text + Item{ + MouseArea{ + id:item_mouse + hoverEnabled: true + anchors.fill: parent + } + FluText{ + text:String(model.itemData) + width: parent.width - 14 + elide: Text.ElideRight + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + leftMargin: 14 + } + FluTooltip{ + visible: item_mouse.containsMouse + text:parent.text + delay: 1000 + } + } + } + } + + function getObject(index){ + return model_data_source.get(index) + } + + function getObjectValues(index) { + var obj = model_data_source.get(index) + if(!obj) + return + var data = [] + for(var i=0;icontrols/FluControl.qml controls/FluTextFiled.qml controls/FluTextArea.qml + controls/FluTableView.qml + controls/FluPagination.qml + controls/FluToggleButton.qml