diff --git a/example/qml/page/T_TableView.qml b/example/qml/page/T_TableView.qml index 0e8b18e0..2e3db4f3 100644 --- a/example/qml/page/T_TableView.qml +++ b/example/qml/page/T_TableView.qml @@ -94,6 +94,10 @@ FluScrollablePage{ } } + FluText{ + Layout.topMargin: 20 + text:"此TableView适用于小数据量，带分页的表格，大数据量请使用TableView2。" + } FluTableView{ id:table_view diff --git a/example/qml/page/T_TableView2.qml b/example/qml/page/T_TableView2.qml index 82b1dc27..10ede0d0 100644 --- a/example/qml/page/T_TableView2.qml +++ b/example/qml/page/T_TableView2.qml @@ -10,7 +10,7 @@ FluContentPage{ title:"TableView2" Component.onCompleted: { - loadData(1,10) + loadData(1,2000) } function loadData(page,count){ @@ -46,6 +46,29 @@ FluContentPage{ table_view.dataSource = dataSource } + Component{ + id:com_combobox + + FluComboBox { + anchors.fill: parent + currentIndex: display + editable: true + model: ListModel { + ListElement { text: 100 } + ListElement { text: 300 } + ListElement { text: 500 } + ListElement { text: 1000 } + } + Component.onCompleted: { + currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display)) + selectAll() + } + TableView.onCommit: { + display = editText + } + } + } + FluTableView2{ id:table_view anchors.fill: parent @@ -60,6 +83,7 @@ FluContentPage{ { title: '年龄', dataIndex: 'age', + editDelegate:com_combobox, width:100, minimumWidth:100 }, diff --git a/src/imports/FluentUI/Controls/FluComboBox.qml b/src/imports/FluentUI/Controls/FluComboBox.qml index a3262633..7d2e64da 100644 --- a/src/imports/FluentUI/Controls/FluComboBox.qml +++ b/src/imports/FluentUI/Controls/FluComboBox.qml @@ -24,7 +24,7 @@ ComboBox { text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData palette.text: control.palette.text palette.highlightedText: control.palette.highlightedText - font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal + font.bold: control.currentIndex === index highlighted: control.highlightedIndex === index hoverEnabled: control.hoverEnabled } @@ -37,7 +37,6 @@ ComboBox { iconSize: 15 opacity: enabled ? 1 : 0.3 } - contentItem: T.TextField { property bool disabled: !control.editable leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1 @@ -59,6 +58,7 @@ ComboBox { leftInset:1 topInset:1 bottomInset:1 + focus: true rightInset:1 background: FluTextBoxBackground{ border.width: 0 @@ -74,7 +74,7 @@ ComboBox { visible: !control.flat || control.down radius: 4 FluFocusRectangle{ - visible: control.activeFocus + visible: control.visualFocus radius:4 anchors.margins: -2 } diff --git a/src/imports/FluentUI/Controls/FluExpander.qml b/src/imports/FluentUI/Controls/FluExpander.qml index dab0520c..53f774f2 100644 --- a/src/imports/FluentUI/Controls/FluExpander.qml +++ b/src/imports/FluentUI/Controls/FluExpander.qml @@ -57,7 +57,7 @@ Item { iconSize: 15 Behavior on rotation { NumberAnimation{ - duration: 150 + duration: 167 } } } diff --git a/src/imports/FluentUI/Controls/FluHorizontalHeaderView.qml b/src/imports/FluentUI/Controls/FluHorizontalHeaderView.qml new file mode 100644 index 00000000..90369ebf --- /dev/null +++ b/src/imports/FluentUI/Controls/FluHorizontalHeaderView.qml @@ -0,0 +1,27 @@ +import QtQuick +import QtQuick.Templates as T +import FluentUI + +T.HorizontalHeaderView { + id: control + implicitWidth: syncView ? syncView.width : 0 + implicitHeight: Math.max(1, contentHeight) + delegate: Rectangle { + readonly property real cellPadding: 8 + implicitWidth: text.implicitWidth + (cellPadding * 2) + implicitHeight: Math.max(control.height, 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) + border.color: FluTheme.dark ? "#252525" : "#e4e4e4" + FluText { + id: text + text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] + : model[control.textRole]) + : modelData + width: parent.width + height: parent.height + font.bold: true + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + } +} diff --git a/src/imports/FluentUI/Controls/FluSlider.qml b/src/imports/FluentUI/Controls/FluSlider.qml index 59b42e9b..db916a82 100644 --- a/src/imports/FluentUI/Controls/FluSlider.qml +++ b/src/imports/FluentUI/Controls/FluSlider.qml @@ -81,7 +81,7 @@ Item{ } Behavior on scale { NumberAnimation{ - duration: 150 + duration: 167 } } } diff --git a/src/imports/FluentUI/Controls/FluTableView.qml b/src/imports/FluentUI/Controls/FluTableView.qml index 6350d19e..cc5688f1 100644 --- a/src/imports/FluentUI/Controls/FluTableView.qml +++ b/src/imports/FluentUI/Controls/FluTableView.qml @@ -93,7 +93,7 @@ Item { width: 6 anchors.centerIn: item_divider visible: item_divider.visible - cursorShape: Qt.SizeHorCursor + cursorShape: Qt.SplitHCursor onPressed: (mouse)=>{ clickPos = Qt.point(mouse.x, mouse.y) @@ -207,7 +207,7 @@ Item { id:item_row_control width: layout_table.headerItem.widthByColumnIndex(index) height: item_control.height - focusPolicy:Qt.TabFocus | Qt.ClickFocus + focusPolicy:Qt.TabFocus background: Item{ FluFocusRectangle{ visible: item_row_control.activeFocus @@ -292,6 +292,5 @@ Item { } function remove(index){ model_data_source.remove(index) - console.debug(index) } } diff --git a/src/imports/FluentUI/Controls/FluTableView2.qml b/src/imports/FluentUI/Controls/FluTableView2.qml index 9ea539d6..d4706df5 100644 --- a/src/imports/FluentUI/Controls/FluTableView2.qml +++ b/src/imports/FluentUI/Controls/FluTableView2.qml @@ -10,11 +10,9 @@ Rectangle { id:control - - property var columnSource property var dataSource - color: Qt.styleHints.appearance === Qt.Light ? palette.mid : palette.midlight + 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") @@ -40,63 +38,133 @@ Rectangle { }) } - TableView { - id:table_view - anchors.left: header_vertical.right - anchors.top: header_horizontal.bottom - anchors.right: parent.right - anchors.bottom: parent.bottom - ListModel{ - id:model_columns - } - columnWidthProvider: function(column) { - let w = explicitColumnWidth(column) - if (w >= 100) - return Math.max(100, w);; - return implicitColumnWidth(column) - } - rowHeightProvider: function(row) { - let h = explicitRowHeight(row) - if (h >= 0) - return Math.max(60, h); - return implicitRowHeight(row) - } - - model: table_model - ScrollBar.horizontal: FluScrollBar{} - ScrollBar.vertical: FluScrollBar{} - clip: true - delegate: Rectangle { - implicitHeight: 60 - implicitWidth: columnSource[column].width - 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 + Component{ + id:com_edit + FluTextBox { + anchors.fill: parent + text: display + verticalAlignment: TextInput.AlignVCenter + Component.onCompleted: selectAll() + TableView.onCommit: { + display = text } } } + 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 + } + boundsBehavior: Flickable.StopAtBounds + ScrollBar.horizontal: FluScrollBar{} + ScrollBar.vertical: FluScrollBar{} + selectionModel: ItemSelectionModel {} + columnWidthProvider: function(column) { + let w = explicitColumnWidth(column) + if (w >= 0){ + return Math.max(100, w) + } + return implicitColumnWidth(column) + } + rowHeightProvider: function(row) { + let h = explicitRowHeight(row) + if (h >= 0){ + return Math.max(40, h) + } + return implicitRowHeight(row) + } - HorizontalHeaderView { + 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 - anchors.left: table_view.left + textRole: "title" + model: columnSource + anchors.left: scroll_table.left anchors.top: parent.top syncView: table_view + boundsBehavior: Flickable.StopAtBounds clip: true } - VerticalHeaderView { + FluVerticalHeaderView { id: header_vertical - anchors.top: table_view.top + boundsBehavior: Flickable.StopAtBounds + anchors.top: scroll_table.top anchors.left: parent.left syncView: table_view clip: true } - } diff --git a/src/imports/FluentUI/Controls/FluVerticalHeaderView.qml b/src/imports/FluentUI/Controls/FluVerticalHeaderView.qml new file mode 100644 index 00000000..88809269 --- /dev/null +++ b/src/imports/FluentUI/Controls/FluVerticalHeaderView.qml @@ -0,0 +1,27 @@ +import QtQuick +import QtQuick.Templates as T +import FluentUI + +T.VerticalHeaderView { + id: control + implicitWidth: Math.max(1, contentWidth) + implicitHeight: syncView ? syncView.height : 0 + delegate: Rectangle { + readonly property real cellPadding: 8 + implicitWidth: Math.max(control.width, text.implicitWidth + (cellPadding * 2)) + implicitHeight: 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) + border.color: FluTheme.dark ? "#252525" : "#e4e4e4" + FluText { + id: text + text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] + : model[control.textRole]) + : modelData + width: parent.width + font.bold: true + height: parent.height + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + } +}