amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-07-02 16:15:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzichu
2023-06-20 18:32:10 +08:00
parent b442696f92
commit 98d73eb6cb
9 changed files with 245 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
example/qml/component/CodeExpander.qml
View File

@ -131,7 +131,8 @@ FluExpander{
"FluCopyableText",
"FluAcrylic",
"FluRemoteLoader",
"FluMenuBar"
"FluMenuBar",
"FluPagination"
];
code = code.replace(/\n/g, "<br>");
code = code.replace(/ /g, "&nbsp;");

4
example/qml/global/ItemsOriginal.qml
View File

@ -259,9 +259,9 @@ FluObject{
}
}
FluPaneItem{
title:"TableView2"
title:"Pagination"
onTap:{
navigationView.push("qrc:/example/qml/page/T_TableView2.qml")
navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
}
}
FluPaneItem{

49
example/qml/page/T_Pagination.qml Normal file
View File

@ -0,0 +1,49 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import "qrc:///example/qml/component"
import FluentUI
FluScrollablePage{
title:"Pagination"
FluArea{
Layout.fillWidth: true
height: 200
paddings: 10
Layout.topMargin: 20
ColumnLayout{
spacing: 20
anchors.verticalCenter: parent.verticalCenter
FluPagination{
pageCurrent: 1
pageButtonCount: 5
itemCount: 5000
}
FluPagination{
pageCurrent: 2
itemCount: 5000
pageButtonCount: 7
}
FluPagination{
pageCurrent: 3
itemCount: 5000
pageButtonCount: 9
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluPagination{
pageCurrent: 1
itemCount: 1000
pageButtonCount: 9
}'
}
}

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

@ -5,162 +5,12 @@ import QtQuick.Window
import FluentUI
import "qrc:///example/qml/component"
FluScrollablePage{
FluContentPage{
title:"TableView"
Component.onCompleted: {
const columns = [
{
title: '姓名',
dataIndex: 'name',
width:100,
},
{
title: '年龄',
dataIndex: 'item_age',
width:100,
minimumWidth:100
},
{
title: '住址',
dataIndex: 'address',
width:200
},
{
title: '别名',
dataIndex: 'nickname',
width:100
},
{
title: '操作',
dataIndex: 'action',
width:120
},
];
table_view.columns = columns
loadData(1,10)
}
Component{
id:com_age
Item{
id:item_age
property var ageArr: [100,300,500,1000]
height: 60
FluComboBox{
width: 80
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 10
}
model: ListModel {
ListElement { text: 100 }
ListElement { text: 300 }
ListElement { text: 500 }
ListElement { text: 1000 }
}
Component.onCompleted: {
currentIndex=ageArr.findIndex((element) => element === dataModel.age)
}
}
}
}
Component{
id:com_action
Item{
height: 60
Row{
anchors.centerIn: parent
spacing: 10
FluFilledButton{
text:"编辑"
horizontalPadding: 6
onClicked:{
showError(JSON.stringify(dataObject))
}
}
FluFilledButton{
text:"删除"
horizontalPadding: 6
onClicked:{
tableView.remove(dataModel.index)
}
}
}
}
}
FluText{
Layout.topMargin: 20
text:"此TableView适用于小数据量，带分页的表格，大数据量请使用TableView2。"
}
FluTableView{
id:table_view
Layout.fillWidth: true
Layout.topMargin: 20
pageCurrent:1
pageCount:10
itemCount: 1000
onRequestPage:
(page,count)=> {
loadData(page,count)
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: 10
code:'FluTableView{
id:table_view
Layout.fillWidth: true
Layout.topMargin: 20
pageCurrent:1
pageCount:10
itemCount: 1000
onRequestPage:
(page,count)=> {
loadData(page,count)
}
Component.onCompleted: {
const columns = [
{
title: "姓名",
dataIndex: "name",
width:100
},
{
title: "年龄",
dataIndex: "age",
width:100
},
{
title: "住址",
dataIndex: "address",
width:200
},
{
title: "别名",
dataIndex: "nickname",
width:100
}
];
table_view.columns = columns
const dataSource = [
{
name: "孙悟空”,
age: 500,
address:"钟灵毓秀的花果山,如神仙仙境的水帘洞",
nickname:"齐天大圣"
}
];
table_view.dataSource = columns
}
}'
loadData(1,2000)
}
function loadData(page,count){
@ -188,13 +38,68 @@ FluScrollablePage{
for(var i=0;i<count;i++){
dataSource.push({
name: getRandomName(),
item_age: com_age,
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
action:com_action
nickname: getRandomNickname()
})
}
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
}
}
}
FluTableView{
id:table_view
anchors.fill: parent
anchors.topMargin: 20
columnSource:[
{
title: '姓名',
dataIndex: 'name',
width:100,
minimumWidth:50
},
{
title: '年龄',
dataIndex: 'age',
editDelegate:com_combobox,
width:100,
minimumWidth:100,
maximumWidth: 100
},
{
title: '住址',
dataIndex: 'address',
width:200
},
{
title: '别名',
dataIndex: 'nickname',
width:100,
}
]
}
}