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

update

Browse Source
This commit is contained in:
zhuzihcu 2023-06-15 14:46:32 +08:00
parent aab4802d7e
commit 8c45c125e6
9 changed files with 201 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,6 +94,10 @@ FluScrollablePage{
}
}
FluText{
Layout.topMargin: 20
text:"此TableView适用于小数据量，带分页的表格，大数据量请使用TableView2。"
}
FluTableView{
id:table_view

26
example/qml/page/T_TableView2.qml
View File

@ -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
},

6
src/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -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
}

2
src/imports/FluentUI/Controls/FluExpander.qml
View File

@ -57,7 +57,7 @@ Item {
iconSize: 15
Behavior on rotation {
NumberAnimation{
duration: 150
duration: 167
}
}
}

27
src/imports/FluentUI/Controls/FluHorizontalHeaderView.qml Normal file
View File

@ -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
}
}
}

2
src/imports/FluentUI/Controls/FluSlider.qml
View File

@ -81,7 +81,7 @@ Item{
}
Behavior on scale {
NumberAnimation{
duration: 150
duration: 167
}
}
}

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

@ -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)
}
}

154
src/imports/FluentUI/Controls/FluTableView2.qml
View File

@ -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
}
}

27
src/imports/FluentUI/Controls/FluVerticalHeaderView.qml Normal file
View File

@ -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
}
}
}