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

update

Browse Source
This commit is contained in:
zhuzichu 2023-09-28 14:41:24 +08:00
parent a5b5a5b942
commit 5221c5bc63
4 changed files with 237 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
example/qml-Qt6/page/T_TableView.qml
View File

@ -7,7 +7,9 @@ import "qrc:///example/qml/component"
FluContentPage{ FluContentPage{
id:root
title:"TableView" title:"TableView"
signal checkBoxChanged
Component.onCompleted: { Component.onCompleted: {
loadData(1,1000) loadData(1,1000)
@ -15,7 +17,6 @@ FluContentPage{
Component{ Component{
id:com_checbox id:com_checbox
Item{ Item{
FluCheckBox{ FluCheckBox{
anchors.centerIn: parent anchors.centerIn: parent
@ -24,10 +25,10 @@ FluContentPage{
clickListener: function(){ clickListener: function(){
modelData.checkbox = table_view.customItem(com_checbox,{checked:!options.checked}) modelData.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
tableModel.setRow(row,modelData) tableModel.setRow(row,modelData)
checkBoxChanged()
} }
} }
} }
} }
Component{ Component{
@ -55,41 +56,44 @@ FluContentPage{
} }
} }
function loadData(page,count){
var numbers = [100, 300, 500, 1000]; Component{
function getRandomAge() { id:com_column_checbox
var randomIndex = Math.floor(Math.random() * numbers.length); Item{
return numbers[randomIndex]; RowLayout{
anchors.centerIn: parent
FluText{
text:"全选"
Layout.alignment: Qt.AlignVCenter
}
FluCheckBox{
checked: true === options.checked
enableAnimation: false
Layout.alignment: Qt.AlignVCenter
clickListener: function(){
var checked = !options.checked
itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
for(var i =0;i< tableModel.rowCount ;i++){
var rowData = tableModel.getRow(i)
rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
tableModel.setRow(i,rowData)
}
}
}
Connections{
target: root
function onCheckBoxChanged(){
for(var i =0;i< tableModel.rowCount ;i++){
if(false === tableModel.getRow(i).checkbox.options.checked){
itemModel.display = table_view.customItem(com_column_checbox,{"checked":false})
return
}
}
itemModel.display = table_view.customItem(com_column_checbox,{"checked":true})
}
}
}
} }
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<count;i++){
dataSource.push({
checkbox: table_view.customItem(com_checbox,{checked:true}),
checked:true,
name: getRandomName(),
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
action: table_view.customItem(com_action)
})
}
table_view.dataSource = dataSource
} }
Component{ Component{
@ -127,11 +131,11 @@ FluContentPage{
anchors.topMargin: 20 anchors.topMargin: 20
columnSource:[ columnSource:[
{ {
title: '选取', title: table_view.customItem(com_column_checbox,{checked:true}),
dataIndex: 'checkbox', dataIndex: 'checkbox',
width:80, width:80,
minimumWidth:80, minimumWidth:80,
maximumWidth:80 maximumWidth:80,
}, },
{ {
title: '姓名', title: '姓名',
@ -194,4 +198,41 @@ FluContentPage{
table_view.resetPosition() table_view.resetPosition()
} }
} }
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<count;i++){
dataSource.push({
checkbox: table_view.customItem(com_checbox,{checked:true}),
name: getRandomName(),
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
action: table_view.customItem(com_action)
})
}
table_view.dataSource = dataSource
}
} }

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

@ -8,7 +8,9 @@ import "../component"
FluContentPage{ FluContentPage{
id:root
title:"TableView" title:"TableView"
signal checkBoxChanged
Component.onCompleted: { Component.onCompleted: {
loadData(1,1000) loadData(1,1000)
@ -16,7 +18,6 @@ FluContentPage{
Component{ Component{
id:com_checbox id:com_checbox
Item{ Item{
FluCheckBox{ FluCheckBox{
anchors.centerIn: parent anchors.centerIn: parent
@ -25,10 +26,10 @@ FluContentPage{
clickListener: function(){ clickListener: function(){
modelData.checkbox = table_view.customItem(com_checbox,{checked:!options.checked}) modelData.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
tableModel.setRow(row,modelData) tableModel.setRow(row,modelData)
checkBoxChanged()
} }
} }
} }
} }
Component{ Component{
@ -56,41 +57,44 @@ FluContentPage{
} }
} }
function loadData(page,count){
var numbers = [100, 300, 500, 1000]; Component{
function getRandomAge() { id:com_column_checbox
var randomIndex = Math.floor(Math.random() * numbers.length); Item{
return numbers[randomIndex]; RowLayout{
anchors.centerIn: parent
FluText{
text:"全选"
Layout.alignment: Qt.AlignVCenter
}
FluCheckBox{
checked: true === options.checked
enableAnimation: false
Layout.alignment: Qt.AlignVCenter
clickListener: function(){
var checked = !options.checked
itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
for(var i =0;i< tableModel.rowCount ;i++){
var rowData = tableModel.getRow(i)
rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
tableModel.setRow(i,rowData)
}
}
}
Connections{
target: root
function onCheckBoxChanged(){
for(var i =0;i< tableModel.rowCount ;i++){
if(false === tableModel.getRow(i).checkbox.options.checked){
itemModel.display = table_view.customItem(com_column_checbox,{"checked":false})
return
}
}
itemModel.display = table_view.customItem(com_column_checbox,{"checked":true})
}
}
}
} }
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<count;i++){
dataSource.push({
checkbox: table_view.customItem(com_checbox,{checked:true}),
checked:true,
name: getRandomName(),
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
action: table_view.customItem(com_action)
})
}
table_view.dataSource = dataSource
} }
Component{ Component{
@ -128,11 +132,11 @@ FluContentPage{
anchors.topMargin: 20 anchors.topMargin: 20
columnSource:[ columnSource:[
{ {
title: '选取', title: table_view.customItem(com_column_checbox,{checked:true}),
dataIndex: 'checkbox', dataIndex: 'checkbox',
width:80, width:80,
minimumWidth:80, minimumWidth:80,
maximumWidth:80 maximumWidth:80,
}, },
{ {
title: '姓名', title: '姓名',
@ -195,4 +199,41 @@ FluContentPage{
table_view.resetPosition() table_view.resetPosition()
} }
} }
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<count;i++){
dataSource.push({
checkbox: table_view.customItem(com_checbox,{checked:true}),
name: getRandomName(),
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
action: table_view.customItem(com_action)
})
}
table_view.dataSource = dataSource
}
} }

52
src/Qt5/imports/FluentUI/Controls/FluTableView.qml
View File

@ -312,6 +312,19 @@ Rectangle {
id:com_handle id:com_handle
Item {} Item {}
} }
Component{
id:com_column_text
FluText {
id: column_text
text: modelData
anchors.fill: parent
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
TableView { TableView {
id: header_horizontal id: header_horizontal
model: TableModel{ model: TableModel{
@ -330,9 +343,10 @@ Rectangle {
id:column_item_control id:column_item_control
readonly property real cellPadding: 8 readonly property real cellPadding: 8
property bool canceled: false property bool canceled: false
property int columnIndex: column
readonly property var obj : columnSource[column] readonly property var obj : columnSource[column]
implicitWidth: column_text.implicitWidth + (cellPadding * 2) implicitWidth: item_column_loader.item.implicitWidth + (cellPadding * 2)
implicitHeight: Math.max(36, column_text.implicitHeight + (cellPadding * 2)) implicitHeight: Math.max(36, item_column_loader.item.implicitHeight + (cellPadding * 2))
color:{ color:{
d.selectionFlag d.selectionFlag
if(column_item_control_mouse.pressed){ if(column_item_control_mouse.pressed){
@ -341,18 +355,6 @@ Rectangle {
return column_item_control_mouse.containsMouse&&!canceled ? control.hoverButtonColor : FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1) return column_item_control_mouse.containsMouse&&!canceled ? control.hoverButtonColor : 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" border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
FluText {
id: column_text
text: model.display
width: parent.width
height: parent.height
font.bold:{
d.selectionFlag
return true
}
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
MouseArea{ MouseArea{
id:column_item_control_mouse id:column_item_control_mouse
anchors.fill: parent anchors.fill: parent
@ -372,6 +374,28 @@ Rectangle {
d.selectionFlag = !d.selectionFlag d.selectionFlag = !d.selectionFlag
} }
} }
Loader{
id:item_column_loader
property var itemModel: model
property var modelData: model.display
property var tableView: table_view
property var tableModel: table_model
property var options:{
if(typeof(modelData) == "object"){
return modelData.options
}
return {}
}
property int column: column_item_control.columnIndex
width: parent.width
height: parent.height
sourceComponent: {
if(typeof(modelData) == "object"){
return modelData.comId
}
return com_column_text
}
}
MouseArea{ MouseArea{
property point clickPos: "0,0" property point clickPos: "0,0"
height: parent.height height: parent.height

55
src/Qt6/imports/FluentUI/Controls/FluTableView.qml
View File

@ -338,6 +338,22 @@ Rectangle {
} }
} }
} }
Component{
id:com_column_text
FluText {
id: column_text
text: modelData
anchors.fill: parent
font.bold:{
d.selectionFlag
return selection_model.columnIntersectsSelection(column)
}
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
TableView { TableView {
id: header_horizontal id: header_horizontal
model: TableModel{ model: TableModel{
@ -356,9 +372,10 @@ Rectangle {
id:column_item_control id:column_item_control
readonly property real cellPadding: 8 readonly property real cellPadding: 8
property bool canceled: false property bool canceled: false
property int columnIndex: column
readonly property var obj : columnSource[column] readonly property var obj : columnSource[column]
implicitWidth: column_text.implicitWidth + (cellPadding * 2) implicitWidth: item_column_loader.item.implicitWidth + (cellPadding * 2)
implicitHeight: Math.max(36, column_text.implicitHeight + (cellPadding * 2)) implicitHeight: Math.max(36, item_column_loader.item.implicitHeight + (cellPadding * 2))
color:{ color:{
d.selectionFlag d.selectionFlag
if(column_item_control_mouse.pressed){ if(column_item_control_mouse.pressed){
@ -370,18 +387,6 @@ Rectangle {
return column_item_control_mouse.containsMouse&&!canceled ? control.hoverButtonColor : FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1) return column_item_control_mouse.containsMouse&&!canceled ? control.hoverButtonColor : 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" border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
FluText {
id: column_text
text: model.display
width: parent.width
height: parent.height
font.bold:{
d.selectionFlag
return selection_model.columnIntersectsSelection(column)
}
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
MouseArea{ MouseArea{
id:column_item_control_mouse id:column_item_control_mouse
anchors.fill: parent anchors.fill: parent
@ -407,6 +412,28 @@ Rectangle {
d.selectionFlag = !d.selectionFlag d.selectionFlag = !d.selectionFlag
} }
} }
Loader{
id:item_column_loader
property var itemModel: model
property var modelData: model.display
property var tableView: table_view
property var tableModel: table_model
property var options:{
if(typeof(modelData) == "object"){
return modelData.options
}
return {}
}
property int column: column_item_control.columnIndex
width: parent.width
height: parent.height
sourceComponent: {
if(typeof(modelData) == "object"){
return modelData.comId
}
return com_column_text
}
}
MouseArea{ MouseArea{
property point clickPos: "0,0" property point clickPos: "0,0"
height: parent.height height: parent.height