This commit is contained in:
朱子楚\zhuzi 2023-04-09 19:29:50 +08:00
parent 0603a7603d
commit 09e87e0fb8
8 changed files with 224 additions and 16 deletions

91
example/T_StatusView.qml Normal file
View File

@ -0,0 +1,91 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
title:"StatusView"
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
FluArea{
id:layout_actions
Layout.fillWidth: true
Layout.topMargin: 20
height: 50
paddings: 10
RowLayout{
spacing: 14
FluDropDownButton{
id:btn_status_mode
Layout.preferredWidth: 140
text:"Loading"
items:[
FluMenuItem{
text:"Loading"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Loading
}
},
FluMenuItem{
text:"Empty"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Empty
}
},
FluMenuItem{
text:"Error"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Error
}
},
FluMenuItem{
text:"Success"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Success
}
}
]
}
}
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 10
height: 380
paddings: 10
FluStatusView{
id:status_view
anchors.fill: parent
onErrorClicked:{
showError("点击重新加载")
}
Rectangle {
anchors.fill: parent
color:FluTheme.primaryColor.dark
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluStatusView{
anchors.fill: parent
statusMode: FluStatusView.Loading
Rectangle{
anchors.fill: parent
color:FluTheme.primaryColor.dark
}
}'
}
}

View File

@ -45,12 +45,10 @@ FluScrollablePage{
loadData(1,10)
}
FluTableView{
id:table_view
Layout.fillWidth: true
Layout.topMargin: 20
width:parent.width
pageCurrent:1
pageCount:10
itemCount: 1000
@ -90,6 +88,21 @@ FluScrollablePage{
}
}
}
function loadData(page,count){
const dataSource = []
for(var i=0;i<count;i++){
dataSource.push({
name: "孙悟空%1".arg(((page-1)*count+i)),
age: 500,
address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
nickname: "齐天大圣",
action:com_action
})
}
table_view.dataSource = dataSource
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: 10
@ -142,20 +155,6 @@ FluScrollablePage{
}'
}
function loadData(page,count){
const dataSource = []
for(var i=0;i<count;i++){
dataSource.push({
name: "孙悟空%1".arg(((page-1)*count+i)),
age: 500,
address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
nickname: "齐天大圣",
action:com_action
})
}
table_view.dataSource = dataSource
}
}

View File

@ -118,6 +118,7 @@ FluExpander{
"FluTableView",
"FluColors",
"FluTheme",
"FluStatusView"
];
code = code.replace(/\n/g, "<br>");
code = code.replace(/ /g, "&nbsp;");

View File

@ -118,6 +118,12 @@ FluObject{
navigationView.push("qrc:/T_Rectangle.qml")
}
}
FluPaneItem{
title:"StatusView"
onTap:{
navigationView.push("qrc:/T_StatusView.qml")
}
}
FluPaneItem{
title:"Carousel"
onTap:{

View File

@ -157,5 +157,6 @@
<file>T_Pivot.qml</file>
<file>component/CodeExpander.qml</file>
<file>T_TableView.qml</file>
<file>T_StatusView.qml</file>
</qresource>
</RCC>

View File

@ -33,6 +33,7 @@ void Fluent::registerTypes(const char *uri){
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluStatusView.qml"),uri,major,minor,"FluStatusView");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPagination.qml"),uri,major,minor,"FluPagination");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluToggleButton.qml"),uri,major,minor,"FluToggleButton");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTableView.qml"),uri,major,minor,"FluTableView");

View File

@ -0,0 +1,108 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
Item{
enum StatusMode {
Loading,
Empty,
Error,
Success
}
default property alias content: container.data
property int statusMode: FluStatusView.Loading
signal errorClicked
Item{
id:container
anchors.fill: parent
visible: statusMode === FluStatusView.Success
}
FluArea{
paddings: 0
border.width: 0
anchors.fill: container
visible: opacity
opacity: statusMode === FluStatusView.Loading
Behavior on opacity {
NumberAnimation { duration: 150 }
}
ColumnLayout{
anchors.centerIn: parent
visible: statusMode === FluStatusView.Loading
FluProgressRing{
indeterminate: true
Layout.alignment: Qt.AlignHCenter
}
FluText{
text:"正在加载..."
Layout.alignment: Qt.AlignHCenter
}
}
}
FluArea{
paddings: 0
border.width: 0
anchors.fill: container
visible: opacity
opacity: statusMode === FluStatusView.Empty
Behavior on opacity {
NumberAnimation { duration: 150 }
}
ColumnLayout{
anchors.centerIn: parent
visible: statusMode === FluStatusView.Empty
FluText{
text:"空空如也"
fontStyle: FluText.BodyStrong
Layout.alignment: Qt.AlignHCenter
}
}
}
FluArea{
paddings: 0
border.width: 0
anchors.fill: container
visible: opacity
opacity: statusMode === FluStatusView.Error
Behavior on opacity {
NumberAnimation { duration: 150 }
}
ColumnLayout{
anchors.centerIn: parent
FluText{
text:"页面出错了..."
fontStyle: FluText.BodyStrong
Layout.alignment: Qt.AlignHCenter
}
FluFilledButton{
id:btn_error
Layout.alignment: Qt.AlignHCenter
text:"重新加载"
onClicked:{
errorClicked.call()
}
}
}
}
function showSuccessView(){
statusMode = FluStatusView.Success
}
function showLoadingView(){
statusMode = FluStatusView.Loading
}
function showEmptyView(){
statusMode = FluStatusView.Empty
}
function showErrorView(){
statusMode = FluStatusView.Error
}
}

View File

@ -70,5 +70,6 @@
<file>controls/FluTableView.qml</file>
<file>controls/FluPagination.qml</file>
<file>controls/FluToggleButton.qml</file>
<file>controls/FluStatusView.qml</file>
</qresource>
</RCC>