amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-10-30 15:57:37 +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"
signal checkBoxChanged
property var dataSource : []
property int sortType: 0
Component.onCompleted: {
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{
id:com_checbox
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{
id:table_view
anchors{
@ -137,13 +233,20 @@ FluContentPage{
minimumWidth:80,
maximumWidth:80,
},
{
title: '头像',
dataIndex: 'avatar',
width:100,
minimumWidth:100,
maximumWidth:100
},
{
title: '姓名',
dataIndex: 'name',
readOnly:true,
},
{
title: '年龄',
title: table_view.customItem(com_column_sort_age,{sort:0}),
dataIndex: 'age',
editDelegate:com_combobox,
width:100,
@ -220,19 +323,29 @@ FluContentPage{
var randomIndex = Math.floor(Math.random() * addresses.length);
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 = []
for(var i=0;i<count;i++){
dataSource.push({
checkbox: table_view.customItem(com_checbox,{checked:true}),
avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
name: getRandomName(),
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
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"
signal checkBoxChanged
property var dataSource : []
property int sortType: 0
Component.onCompleted: {
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{
id:com_checbox
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{
id:table_view
anchors{
@ -138,13 +234,20 @@ FluContentPage{
minimumWidth:80,
maximumWidth:80,
},
{
title: '头像',
dataIndex: 'avatar',
width:100,
minimumWidth:100,
maximumWidth:100
},
{
title: '姓名',
dataIndex: 'name',
readOnly:true,
},
{
title: '年龄',
title: table_view.customItem(com_column_sort_age,{sort:0}),
dataIndex: 'age',
editDelegate:com_combobox,
width:100,
@ -221,19 +324,29 @@ FluContentPage{
var randomIndex = Math.floor(Math.random() * addresses.length);
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 = []
for(var i=0;i<count;i++){
dataSource.push({
checkbox: table_view.customItem(com_checbox,{checked:true}),
avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
name: getRandomName(),
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
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{
width: rowlayout.width + (_super.moremsg ? 25 : 80);
width: rowlayout.width + (btn_close.visible ? 30 : 48);
height: rowlayout.height + 20;
color: {
if(FluTheme.dark){
@ -154,7 +154,6 @@ FluObject {
x:20;
y:(parent.height - height) / 2;
spacing: 10
FluIcon{
iconSource:{
switch(_super.type){
@ -199,14 +198,15 @@ FluObject {
visible: _super.moremsg
wrapMode : Text.WordWrap
textColor: FluColors.Grey120
width: Math.min(implicitWidth,mcontrol.maxWidth)
}
}
FluIconButton{
id:btn_close
iconSource: FluentIcons.ChromeClose
iconSize: 10
y:5
x:parent.width-35
visible: _super.duration<=0
iconColor: {
if(FluTheme.dark){

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

@ -57,9 +57,11 @@ Rectangle {
}
onDataSourceChanged: {
table_model.clear()
dataSource.forEach(function(item){
table_model.appendRow(item)
})
for(var i =0;i<dataSource.length;i++){
var row = dataSource[i]
row.__index= i
table_model.appendRow(row)
}
}
TableModel {
id:table_model
@ -570,4 +572,18 @@ Rectangle {
function updateRow(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{
width: rowlayout.width + (_super.moremsg ? 25 : 80);
width: rowlayout.width + (btn_close.visible ? 30 : 48);
height: rowlayout.height + 20;
color: {
if(FluTheme.dark){
@ -154,7 +154,6 @@ FluObject {
x:20;
y:(parent.height - height) / 2;
spacing: 10
FluIcon{
iconSource:{
switch(_super.type){
@ -199,14 +198,15 @@ FluObject {
visible: _super.moremsg
wrapMode : Text.WordWrap
textColor: FluColors.Grey120
width: Math.min(implicitWidth,mcontrol.maxWidth)
}
}
FluIconButton{
id:btn_close
iconSource: FluentIcons.ChromeClose
iconSize: 10
y:5
x:parent.width-35
visible: _super.duration<=0
iconColor: {
if(FluTheme.dark){

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

@ -59,9 +59,11 @@ Rectangle {
}
onDataSourceChanged: {
table_model.clear()
dataSource.forEach(function(item){
table_model.appendRow(item)
})
for(var i =0;i<dataSource.length;i++){
var row = dataSource[i]
row.__index= i
table_model.appendRow(row)
}
}
TableModel {
id:table_model
@ -616,4 +618,18 @@ Rectangle {
function updateRow(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
}
}