wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

main
zhuzihcu 2023-04-07 18:27:50 +08:00
parent be58fc5e7d
commit f8d717f41b
9 changed files with 550 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
example/T_Buttons.qml
View File

@ -141,6 +141,47 @@ FluScrollablePage{
}'
}
FluArea{
Layout.fillWidth: true
height: 68
Layout.topMargin: 20
paddings: 10
FluToggleButton{
disabled:toggle_button_switch.selected
text:"Toggle Button"
onClicked: {
selected = !selected
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:toggle_button_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
CodeExpander{
Layout.fillWidth: true
code:'FluToggleButton{
text:"Toggle Button"
onClicked: {
selected = !selected
}
}'
}
FluArea{
Layout.fillWidth: true

110
example/T_TableView.qml Normal file
View File

@ -0,0 +1,110 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "./component"
FluScrollablePage{
title:"TableView"
leftPadding:10
rightPadding:10
bottomPadding:20
spacing: 0
Component.onCompleted: {
const columns = [
{
title: '姓名',
dataIndex: 'name',
width:100
},
{
title: '年龄',
dataIndex: 'age',
width:100
},
{
title: '住址',
dataIndex: 'address',
width:200
},
{
title: '别名',
dataIndex: 'nickname',
width:100
},
{
title: '操作',
dataIndex: 'action',
width:100
},
];
table_view.columns = columns
loadData(1,10)
}
FluTableView{
id:table_view
Layout.fillWidth: true
Layout.topMargin: 20
width:parent.width
pageCurrent:1
pageCount:10
itemCount: 1000
onRequestPage:
(page,count)=> {
loadData(page,count)
}
}
Component{
id:com_action
Item{
Row{
anchors.centerIn: parent
spacing: 10
FluFilledButton{
text:"编辑"
topPadding:3
bottomPadding:3
leftPadding:3
rightPadding:3
onClicked:{
console.debug(dataModel.index)
showSuccess(JSON.stringify(dataObject))
}
}
FluFilledButton{
text:"删除"
topPadding:3
bottomPadding:3
leftPadding:3
rightPadding:3
onClicked:{
showError(JSON.stringify(dataObject))
}
}
}
}
}
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
}
}

6
example/global/ItemsOriginal.qml
View File

@ -184,6 +184,12 @@ FluObject{
navigationView.push("qrc:/T_TreeView.qml")
}
}
FluPaneItem{
title:"TableView"
onTap:{
navigationView.push("qrc:/T_TableView.qml")
}
}
FluPaneItem{
title:"MultiWindow"
onTap:{

1
example/qml.qrc
View File

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

2
src/Fluent.cpp
View File

@ -33,6 +33,8 @@ void Fluent::registerTypes(const char *uri){
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
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/FluPivotItem.qml"),uri,major,minor,"FluPivotItem");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPivot.qml"),uri,major,minor,"FluPivot");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluFlipView.qml"),uri,major,minor,"FluFlipView");

110
src/controls/FluPagination.qml Normal file
View File

@ -0,0 +1,110 @@
import QtQuick
import FluentUI
import QtQuick.Layouts
Item {
id: control
signal requestPage(int page,int count)
property int pageCurrent: 0
property int itemCount: 0
property int pageCount: itemCount>0?Math.ceil(itemCount/__itemPerPage):0
property int __itemPerPage: 10
property int pageButtonCount: 5
property int __pageButtonHalf: Math.floor(pageButtonCount/2)+1
implicitHeight: 40
implicitWidth: content.width
Row{
id: content
height: control.height
spacing: 25
padding: 10
FluToggleButton{
visible: control.pageCount>1
enabled: control.pageCurrent>1
text:"<上一页"
onClicked: {
control.calcNewPage(control.pageCurrent-1);
}
}
Row{
spacing: 5
FluToggleButton{
property int pageNumber:1
visible: control.pageCount>0
enabled: control.pageCurrent>1
selected: pageNumber === control.pageCurrent
text:String(pageNumber)
onClicked: {
control.calcNewPage(pageNumber);
}
}
FluText{
visible: (control.pageCount>control.pageButtonCount&&
control.pageCurrent>control.__pageButtonHalf)
text: "..."
}
Repeater{
id: button_repeator
model: (control.pageCount<2)?0:(control.pageCount>=control.pageButtonCount)?(control.pageButtonCount-2):(control.pageCount-2)
delegate:FluToggleButton{
property int pageNumber: {
return (control.pageCurrent<=control.__pageButtonHalf)
?(2+index)
:(control.pageCount-control.pageCurrent<=control.pageButtonCount-control.__pageButtonHalf)
?(control.pageCount-button_repeator.count+index)
:(control.pageCurrent+2+index-control.__pageButtonHalf)
}
text:String(pageNumber)
selected: pageNumber === control.pageCurrent
onClicked: {
control.calcNewPage(pageNumber);
}
}
}
FluText{
visible: (control.pageCount>control.pageButtonCount&&
control.pageCount-control.pageCurrent>control.pageButtonCount-control.__pageButtonHalf)
text: "..."
}
FluToggleButton{
property int pageNumber:control.pageCount
visible: control.pageCount>0
enabled: control.pageCurrent>1
selected: pageNumber === control.pageCurrent
text:String(pageNumber)
onClicked: {
control.calcNewPage(pageNumber);
}
}
}
FluToggleButton{
visible: control.pageCount>1
enabled: control.pageCurrent<control.pageCount
text:"下一页>"
onClicked: {
control.calcNewPage(control.pageCurrent+1);
}
}
}
function calcNewPage(page)
{
if(!page)
return
let page_num=Number(page)
if(page_num<1||page_num>control.pageCount||page_num===control.pageCurrent)
return
control.pageCurrent=page_num
control.requestPage(page_num,control.__itemPerPage)
}
}

193
src/controls/FluTableView.qml Normal file
View File

@ -0,0 +1,193 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI
Item {
id:control
property var columns : []
property var dataSource : []
property int pageCurrent: 1
property int itemCount: 1000
property int pageCount: 10
property int itemHeight: 56
signal requestPage(int page,int count)
implicitHeight: layout_coumns.height + layout_table.height
MouseArea{
anchors.fill: parent
preventStealing: true
}
ListModel{
id:model_coumns
}
ListModel{
id:model_data_source
}
onColumnsChanged: {
model_coumns.clear()
model_coumns.append(columns)
}
onDataSourceChanged: {
model_data_source.clear()
model_data_source.append(dataSource)
}
FluRectangle{
id:layout_coumns
height: control.itemHeight
width: parent.width
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
radius: [12,12,0,0]
Row{
id:list_coumns
spacing: 0
anchors.fill: parent
Repeater{
model: model_coumns
delegate: Item{
height: list_coumns.height
width: model.width
FluText{
text:model.title
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 14
}
fontStyle: FluText.BodyStrong
}
FluDivider{
width: 1
height: 40
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
visible: index !== list_coumns.count-1
}
}
}
}
}
Rectangle{
anchors.fill: layout_table
color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
}
ListView{
id:layout_table
anchors{
top: layout_coumns.bottom
left: parent.left
right: parent.right
}
height: contentHeight
clip:true
footer: Item{
height: 50
width: layout_table.width
FluPagination{
id:pagination
height: 40
pageCurrent: control.pageCurrent
itemCount: control.itemCount
pageCount: control.pageCount
onRequestPage:
(page,count)=> {
control.requestPage(page,count)
}
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
}
}
model:model_data_source
delegate: Item{
height: list_coumns.height
width: layout_table.width
property var model_values : getObjectValues(index)
property var itemObject: getObject(index)
property var listModel: model
Row{
spacing: 0
anchors.fill: parent
Repeater{
model: model_values
delegate:Item{
height: list_coumns.height
width: modelData.width
Loader{
property var model : modelData
property var dataModel : listModel
property var dataObject : itemObject
anchors.fill: parent
sourceComponent: {
if(model.itemData instanceof Component){
return model.itemData
}
return com_text
}
}
}
}
}
FluDivider{
width: parent.width
height: 1
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
}
Component{
id:com_text
Item{
MouseArea{
id:item_mouse
hoverEnabled: true
anchors.fill: parent
}
FluText{
text:String(model.itemData)
width: parent.width - 14
elide: Text.ElideRight
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 14
}
FluTooltip{
visible: item_mouse.containsMouse
text:parent.text
delay: 1000
}
}
}
}
function getObject(index){
return model_data_source.get(index)
}
function getObjectValues(index) {
var obj = model_data_source.get(index)
if(!obj)
return
var data = []
for(var i=0;i<model_coumns.count;i++){
var item = model_coumns.get(i)
data.push({itemData:obj[item.dataIndex],width:item.width})
}
return data;
}
}

84
src/controls/FluToggleButton.qml Normal file
View File

@ -0,0 +1,84 @@
import QtQuick
import QtQuick.Controls
import FluentUI
FluControl {
property bool disabled: false
property bool selected: false
property color normalColor: {
if(selected){
return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
}else{
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
}
}
property color hoverColor: {
if(selected){
return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
}else{
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
}
}
property color disableColor: {
if(selected){
return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
}else{
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
}
}
id: control
enabled: !disabled
topPadding:5
bottomPadding:5
leftPadding:15
rightPadding:15
Keys.onSpacePressed: control.visualFocus&&clicked()
focusPolicy:Qt.TabFocus
background: Rectangle{
radius: 4
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: selected ? 0 : 1
FluFocusRectangle{
visible: control.visualFocus
radius:8
}
color:{
if(disabled){
return disableColor
}
return hovered ? hoverColor :normalColor
}
}
contentItem: FluText {
text: control.text
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: {
if(selected){
if(FluTheme.dark){
if(disabled){
return Qt.rgba(173/255,173/255,173/255,1)
}
return Qt.rgba(0,0,0,1)
}else{
return Qt.rgba(1,1,1,1)
}
}else{
if(FluTheme.dark){
if(disabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
return Qt.rgba(0,0,0,1)
}
}
}
font.pixelSize: 14
}
}

3
src/res.qrc
View File

@ -67,5 +67,8 @@
<file>controls/FluControl.qml</file>
<file>controls/FluTextFiled.qml</file>
<file>controls/FluTextArea.qml</file>
<file>controls/FluTableView.qml</file>
<file>controls/FluPagination.qml</file>
<file>controls/FluToggleButton.qml</file>
</qresource>
</RCC>