amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-10-06 12:13:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
朱子楚\zhuzi 2023-10-01 14:59:35 +08:00
parent 8127f7c3ed
commit 895332f867
6 changed files with 276 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,10 +11,24 @@ FluContentPage{
title:"TableView" title:"TableView"
signal checkBoxChanged signal checkBoxChanged
property var dataSource : []
property int sortType: 0
Component.onCompleted: { Component.onCompleted: {
loadData(1,1000) loadData(1,1000)
} }
onSortTypeChanged: {
table_view.closeEditor()
if(sortType === 0){
table_view.sort()
}else if(sortType === 1){
table_view.sort((a, b) => a.age - b.age);
}else if(sortType === 2){
table_view.sort((a, b) => b.age - a.age);
}
}
Component{ Component{
id:com_checbox id:com_checbox
Item{ Item{
@ -120,6 +134,88 @@ FluContentPage{
} }
} }
Component{
id:com_avatar
Item{
FluClip{
anchors.centerIn: parent
width: 40
height: 40
radius: [20,20,20,20]
Image{
anchors.fill: parent
source: {
if(options && options.avatar){
return options.avatar
}
return ""
}
sourceSize: Qt.size(80,80)
}
}
}
}
Component{
id:com_column_sort_age
Item{
FluText{
text:"年龄"
anchors.centerIn: parent
}
ColumnLayout{
spacing: 0
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
rightMargin: 4
}
FluIconButton{
Layout.preferredWidth: 20
Layout.preferredHeight: 15
iconSize: 12
verticalPadding:0
horizontalPadding:0
iconSource: FluentIcons.ChevronUp
iconColor: {
if(1 === root.sortType){
return FluTheme.primaryColor.dark
}
return FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
}
onClicked: {
if(root.sortType === 1){
root.sortType = 0
return
}
root.sortType = 1
}
}
FluIconButton{
Layout.preferredWidth: 20
Layout.preferredHeight: 15
iconSize: 12
verticalPadding:0
horizontalPadding:0
iconSource: FluentIcons.ChevronDown
iconColor: {
if(2 === root.sortType){
return FluTheme.primaryColor.dark
}
return FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
}
onClicked: {
if(root.sortType === 2){
root.sortType = 0
return
}
root.sortType = 2
}
}
}
}
}
FluTableView{ FluTableView{
id:table_view id:table_view
anchors{ anchors{
@ -137,13 +233,20 @@ FluContentPage{
minimumWidth:80, minimumWidth:80,
maximumWidth:80, maximumWidth:80,
}, },
{
title: '头像',
dataIndex: 'avatar',
width:100,
minimumWidth:100,
maximumWidth:100
},
{ {
title: '姓名', title: '姓名',
dataIndex: 'name', dataIndex: 'name',
readOnly:true, readOnly:true,
}, },
{ {
title: '年龄', title: table_view.customItem(com_column_sort_age,{sort:0}),
dataIndex: 'age', dataIndex: 'age',
editDelegate:com_combobox, editDelegate:com_combobox,
width:100, width:100,
@ -220,19 +323,29 @@ FluContentPage{
var randomIndex = Math.floor(Math.random() * addresses.length); var randomIndex = Math.floor(Math.random() * addresses.length);
return addresses[randomIndex]; return addresses[randomIndex];
} }
var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
function getAvatar(){
var randomIndex = Math.floor(Math.random() * avatars.length);
return avatars[randomIndex];
}
const dataSource = [] const dataSource = []
for(var i=0;i<count;i++){ for(var i=0;i<count;i++){
dataSource.push({ dataSource.push({
checkbox: table_view.customItem(com_checbox,{checked:true}), checkbox: table_view.customItem(com_checbox,{checked:true}),
avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
name: getRandomName(), name: getRandomName(),
age:getRandomAge(), age:getRandomAge(),
address: getRandomAddresses(), address: getRandomAddresses(),
nickname: getRandomNickname(), nickname: getRandomNickname(),
longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好", longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
action: table_view.customItem(com_action) action: table_view.customItem(com_action),
minimumHeight:50
}) })
} }
table_view.dataSource = dataSource root.dataSource = dataSource
table_view.dataSource = root.dataSource
} }
} }

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

@ -12,10 +12,24 @@ FluContentPage{
title:"TableView" title:"TableView"
signal checkBoxChanged signal checkBoxChanged
property var dataSource : []
property int sortType: 0
Component.onCompleted: { Component.onCompleted: {
loadData(1,1000) loadData(1,1000)
} }
onSortTypeChanged: {
table_view.closeEditor()
if(sortType === 0){
table_view.sort()
}else if(sortType === 1){
table_view.sort((a, b) => a.age - b.age);
}else if(sortType === 2){
table_view.sort((a, b) => b.age - a.age);
}
}
Component{ Component{
id:com_checbox id:com_checbox
Item{ Item{
@ -121,6 +135,88 @@ FluContentPage{
} }
} }
Component{
id:com_avatar
Item{
FluClip{
anchors.centerIn: parent
width: 40
height: 40
radius: [20,20,20,20]
Image{
anchors.fill: parent
source: {
if(options && options.avatar){
return options.avatar
}
return ""
}
sourceSize: Qt.size(80,80)
}
}
}
}
Component{
id:com_column_sort_age
Item{
FluText{
text:"年龄"
anchors.centerIn: parent
}
ColumnLayout{
spacing: 0
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
rightMargin: 4
}
FluIconButton{
Layout.preferredWidth: 20
Layout.preferredHeight: 15
iconSize: 12
verticalPadding:0
horizontalPadding:0
iconSource: FluentIcons.ChevronUp
iconColor: {
if(1 === root.sortType){
return FluTheme.primaryColor.dark
}
return FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
}
onClicked: {
if(root.sortType === 1){
root.sortType = 0
return
}
root.sortType = 1
}
}
FluIconButton{
Layout.preferredWidth: 20
Layout.preferredHeight: 15
iconSize: 12
verticalPadding:0
horizontalPadding:0
iconSource: FluentIcons.ChevronDown
iconColor: {
if(2 === root.sortType){
return FluTheme.primaryColor.dark
}
return FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
}
onClicked: {
if(root.sortType === 2){
root.sortType = 0
return
}
root.sortType = 2
}
}
}
}
}
FluTableView{ FluTableView{
id:table_view id:table_view
anchors{ anchors{
@ -138,13 +234,20 @@ FluContentPage{
minimumWidth:80, minimumWidth:80,
maximumWidth:80, maximumWidth:80,
}, },
{
title: '头像',
dataIndex: 'avatar',
width:100,
minimumWidth:100,
maximumWidth:100
},
{ {
title: '姓名', title: '姓名',
dataIndex: 'name', dataIndex: 'name',
readOnly:true, readOnly:true,
}, },
{ {
title: '年龄', title: table_view.customItem(com_column_sort_age,{sort:0}),
dataIndex: 'age', dataIndex: 'age',
editDelegate:com_combobox, editDelegate:com_combobox,
width:100, width:100,
@ -221,19 +324,29 @@ FluContentPage{
var randomIndex = Math.floor(Math.random() * addresses.length); var randomIndex = Math.floor(Math.random() * addresses.length);
return addresses[randomIndex]; return addresses[randomIndex];
} }
var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
function getAvatar(){
var randomIndex = Math.floor(Math.random() * avatars.length);
return avatars[randomIndex];
}
const dataSource = [] const dataSource = []
for(var i=0;i<count;i++){ for(var i=0;i<count;i++){
dataSource.push({ dataSource.push({
checkbox: table_view.customItem(com_checbox,{checked:true}), checkbox: table_view.customItem(com_checbox,{checked:true}),
avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
name: getRandomName(), name: getRandomName(),
age:getRandomAge(), age:getRandomAge(),
address: getRandomAddresses(), address: getRandomAddresses(),
nickname: getRandomNickname(), nickname: getRandomNickname(),
longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好", longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
action: table_view.customItem(com_action) action: table_view.customItem(com_action),
minimumHeight:50
}) })
} }
table_view.dataSource = dataSource root.dataSource = dataSource
table_view.dataSource = root.dataSource
} }
} }

6
src/Qt5/imports/FluentUI/Controls/FluInfoBar.qml
View File

@ -104,7 +104,7 @@ FluObject {
} }
} }
property Component fluent_sytle: Rectangle{ property Component fluent_sytle: Rectangle{
width: rowlayout.width + (_super.moremsg ? 25 : 80); width: rowlayout.width + (btn_close.visible ? 30 : 48);
height: rowlayout.height + 20; height: rowlayout.height + 20;
color: { color: {
if(FluTheme.dark){ if(FluTheme.dark){
@ -154,7 +154,6 @@ FluObject {
x:20; x:20;
y:(parent.height - height) / 2; y:(parent.height - height) / 2;
spacing: 10 spacing: 10
FluIcon{ FluIcon{
iconSource:{ iconSource:{
switch(_super.type){ switch(_super.type){
@ -199,14 +198,15 @@ FluObject {
visible: _super.moremsg visible: _super.moremsg
wrapMode : Text.WordWrap wrapMode : Text.WordWrap
textColor: FluColors.Grey120 textColor: FluColors.Grey120
width: Math.min(implicitWidth,mcontrol.maxWidth)
} }
} }
FluIconButton{ FluIconButton{
id:btn_close
iconSource: FluentIcons.ChromeClose iconSource: FluentIcons.ChromeClose
iconSize: 10 iconSize: 10
y:5 y:5
x:parent.width-35
visible: _super.duration<=0 visible: _super.duration<=0
iconColor: { iconColor: {
if(FluTheme.dark){ if(FluTheme.dark){

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

@ -57,9 +57,11 @@ Rectangle {
} }
onDataSourceChanged: { onDataSourceChanged: {
table_model.clear() table_model.clear()
dataSource.forEach(function(item){ for(var i =0;i<dataSource.length;i++){
table_model.appendRow(item) var row = dataSource[i]
}) row.__index= i
table_model.appendRow(row)
}
} }
TableModel { TableModel {
id:table_model id:table_model
@ -570,4 +572,18 @@ Rectangle {
function updateRow(row,obj){ function updateRow(row,obj){
table_model.setRow(row,obj) table_model.setRow(row,obj)
} }
function sort(order){
let sortedArray = []
for(var i =0;i<table_model.rowCount;i++){
let row = table_model.getRow(i)
sortedArray.push(row)
}
if(order === undefined){
sortedArray.sort((a, b) => a.__index - b.__index)
}else{
sortedArray.sort(order)
}
table_model.clear()
table_model.rows = sortedArray
}
} }

6
src/Qt6/imports/FluentUI/Controls/FluInfoBar.qml
View File

@ -104,7 +104,7 @@ FluObject {
} }
} }
property Component fluent_sytle: Rectangle{ property Component fluent_sytle: Rectangle{
width: rowlayout.width + (_super.moremsg ? 25 : 80); width: rowlayout.width + (btn_close.visible ? 30 : 48);
height: rowlayout.height + 20; height: rowlayout.height + 20;
color: { color: {
if(FluTheme.dark){ if(FluTheme.dark){
@ -154,7 +154,6 @@ FluObject {
x:20; x:20;
y:(parent.height - height) / 2; y:(parent.height - height) / 2;
spacing: 10 spacing: 10
FluIcon{ FluIcon{
iconSource:{ iconSource:{
switch(_super.type){ switch(_super.type){
@ -199,14 +198,15 @@ FluObject {
visible: _super.moremsg visible: _super.moremsg
wrapMode : Text.WordWrap wrapMode : Text.WordWrap
textColor: FluColors.Grey120 textColor: FluColors.Grey120
width: Math.min(implicitWidth,mcontrol.maxWidth)
} }
} }
FluIconButton{ FluIconButton{
id:btn_close
iconSource: FluentIcons.ChromeClose iconSource: FluentIcons.ChromeClose
iconSize: 10 iconSize: 10
y:5 y:5
x:parent.width-35
visible: _super.duration<=0 visible: _super.duration<=0
iconColor: { iconColor: {
if(FluTheme.dark){ if(FluTheme.dark){

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

@ -59,9 +59,11 @@ Rectangle {
} }
onDataSourceChanged: { onDataSourceChanged: {
table_model.clear() table_model.clear()
dataSource.forEach(function(item){ for(var i =0;i<dataSource.length;i++){
table_model.appendRow(item) var row = dataSource[i]
}) row.__index= i
table_model.appendRow(row)
}
} }
TableModel { TableModel {
id:table_model id:table_model
@ -616,4 +618,18 @@ Rectangle {
function updateRow(row,obj){ function updateRow(row,obj){
table_model.setRow(row,obj) table_model.setRow(row,obj)
} }
function sort(order){
let sortedArray = []
for(var i =0;i<table_model.rowCount;i++){
let row = table_model.getRow(i)
sortedArray.push(row)
}
if(order === undefined){
sortedArray.sort((a, b) => a.__index - b.__index)
}else{
sortedArray.sort(order)
}
table_model.clear()
table_model.rows = sortedArray
}
} }