update
parent
0603a7603d
commit
09e87e0fb8
|
@ -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
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -45,12 +45,10 @@ FluScrollablePage{
|
||||||
loadData(1,10)
|
loadData(1,10)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
FluTableView{
|
FluTableView{
|
||||||
id:table_view
|
id:table_view
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
width:parent.width
|
|
||||||
pageCurrent:1
|
pageCurrent:1
|
||||||
pageCount:10
|
pageCount:10
|
||||||
itemCount: 1000
|
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{
|
CodeExpander{
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 10
|
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
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -118,6 +118,7 @@ FluExpander{
|
||||||
"FluTableView",
|
"FluTableView",
|
||||||
"FluColors",
|
"FluColors",
|
||||||
"FluTheme",
|
"FluTheme",
|
||||||
|
"FluStatusView"
|
||||||
];
|
];
|
||||||
code = code.replace(/\n/g, "<br>");
|
code = code.replace(/\n/g, "<br>");
|
||||||
code = code.replace(/ /g, " ");
|
code = code.replace(/ /g, " ");
|
||||||
|
|
|
@ -118,6 +118,12 @@ FluObject{
|
||||||
navigationView.push("qrc:/T_Rectangle.qml")
|
navigationView.push("qrc:/T_Rectangle.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluPaneItem{
|
||||||
|
title:"StatusView"
|
||||||
|
onTap:{
|
||||||
|
navigationView.push("qrc:/T_StatusView.qml")
|
||||||
|
}
|
||||||
|
}
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"Carousel"
|
title:"Carousel"
|
||||||
onTap:{
|
onTap:{
|
||||||
|
|
|
@ -157,5 +157,6 @@
|
||||||
<file>T_Pivot.qml</file>
|
<file>T_Pivot.qml</file>
|
||||||
<file>component/CodeExpander.qml</file>
|
<file>component/CodeExpander.qml</file>
|
||||||
<file>T_TableView.qml</file>
|
<file>T_TableView.qml</file>
|
||||||
|
<file>T_StatusView.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
|
|
@ -33,6 +33,7 @@ void Fluent::registerTypes(const char *uri){
|
||||||
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
|
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
|
||||||
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
|
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/FluPagination.qml"),uri,major,minor,"FluPagination");
|
||||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluToggleButton.qml"),uri,major,minor,"FluToggleButton");
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluToggleButton.qml"),uri,major,minor,"FluToggleButton");
|
||||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTableView.qml"),uri,major,minor,"FluTableView");
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTableView.qml"),uri,major,minor,"FluTableView");
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -70,5 +70,6 @@
|
||||||
<file>controls/FluTableView.qml</file>
|
<file>controls/FluTableView.qml</file>
|
||||||
<file>controls/FluPagination.qml</file>
|
<file>controls/FluPagination.qml</file>
|
||||||
<file>controls/FluToggleButton.qml</file>
|
<file>controls/FluToggleButton.qml</file>
|
||||||
|
<file>controls/FluStatusView.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
|
Loading…
Reference in New Issue