mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-10-31 00:07:36 +08:00
update
This commit is contained in:
parent
0603a7603d
commit
09e87e0fb8
91
example/T_StatusView.qml
Normal file
91
example/T_StatusView.qml
Normal 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
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
@ -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
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
@ -118,6 +118,7 @@ FluExpander{
|
||||
"FluTableView",
|
||||
"FluColors",
|
||||
"FluTheme",
|
||||
"FluStatusView"
|
||||
];
|
||||
code = code.replace(/\n/g, "<br>");
|
||||
code = code.replace(/ /g, " ");
|
||||
|
@ -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:{
|
||||
|
@ -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>
|
||||
|
@ -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");
|
||||
|
108
src/controls/FluStatusView.qml
Normal file
108
src/controls/FluStatusView.qml
Normal 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
|
||||
}
|
||||
|
||||
}
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user