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

update

main
朱子楚\zhuzi 2023-03-31 22:05:25 +08:00
parent d2e3e6dd4b
commit 0b37ddcb6e
10 changed files with 404 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
example/T_Home.qml
View File

@ -142,20 +142,6 @@ FluScrollablePage{
}
}
ListModel{
id:model_added
Component.onCompleted: {
append(ItemsOriginal.getRecentlyAddedData())
}
}
ListModel{
id:model_update
Component.onCompleted: {
append(ItemsOriginal.getRecentlyUpdatedData())
}
}
Component{
id:com_item
Item{
@ -187,7 +173,7 @@ FluScrollablePage{
id:item_icon
height: 40
width: 40
source: model.image
source: modelData.image
anchors{
left: parent.left
leftMargin: 20
@ -197,7 +183,7 @@ FluScrollablePage{
FluText{
id:item_title
text:model.title
text:modelData.title
fontStyle: FluText.BodyStrong
anchors{
left: item_icon.right
@ -208,7 +194,7 @@ FluScrollablePage{
FluText{
id:item_desc
text:model.desc
text:modelData.desc
color:FluColors.Grey120
wrapMode: Text.WrapAnywhere
elide: Text.ElideRight
@ -241,7 +227,7 @@ FluScrollablePage{
anchors.fill: parent
hoverEnabled: true
onClicked: {
ItemsOriginal.startPageByItem(model)
ItemsOriginal.startPageByItem(modelData)
}
}
}
@ -260,7 +246,7 @@ FluScrollablePage{
implicitHeight: contentHeight
cellHeight: 120
cellWidth: 320
model:model_added
model:ItemsOriginal.getRecentlyAddedData()
interactive: false
delegate: com_item
}
@ -278,7 +264,7 @@ FluScrollablePage{
cellHeight: 120
cellWidth: 320
interactive: false
model: model_update
model: ItemsOriginal.getRecentlyUpdatedData()
delegate: com_item
}

83
example/global/ItemsOriginal.qml
View File

@ -16,9 +16,9 @@ FluObject{
}
}
FluPaneItemHeader{
title:"Inputs"
}
FluPaneItemExpander{
title:"Basic input"
icon:FluentIcons.CheckboxComposite
FluPaneItem{
title:"Buttons"
@ -29,7 +29,6 @@ FluObject{
navigationView.push("qrc:/T_Buttons.qml")
}
}
FluPaneItem{
title:"Slider"
image:"qrc:/res/image/control/Slider.png"
@ -56,50 +55,48 @@ FluObject{
navigationView.push("qrc:/T_ToggleSwitch.qml")
}
}
FluPaneItemHeader{
title:"Form"
}
FluPaneItemExpander{
title:"Form"
icon:FluentIcons.GridView
FluPaneItem{
title:"TextBox"
onTap:{
navigationView.push("qrc:/T_TextBox.qml")
}
}
FluPaneItem{
title:"TimePicker"
onTap:{
navigationView.push("qrc:/T_TimePicker.qml")
}
}
FluPaneItem{
title:"DatePicker"
onTap:{
navigationView.push("qrc:/T_DatePicker.qml")
}
}
FluPaneItem{
title:"CalendarPicker"
onTap:{
navigationView.push("qrc:/T_CalendarPicker.qml")
}
}
FluPaneItem{
title:"ColorPicker"
onTap:{
navigationView.push("qrc:/T_ColorPicker.qml")
}
}
FluPaneItemHeader{
title:"Surface"
}
FluPaneItemExpander{
title:"Surface"
icon:FluentIcons.SurfaceHub
FluPaneItem{
title:"InfoBar"
image:"qrc:/res/image/control/InfoBar.png"
@ -145,10 +142,11 @@ FluObject{
}
}
FluPaneItemHeader{
title:"Popus"
}
FluPaneItemExpander{
title:"Popus"
icon:FluentIcons.ButtonMenu
FluPaneItem{
title:"Dialog"
onTap:{
@ -169,11 +167,11 @@ FluObject{
navigationView.push("qrc:/T_Menu.qml")
}
}
FluPaneItemHeader{
title:"Navigation"
}
FluPaneItemExpander{
title:"Navigation"
icon:FluentIcons.AllApps
FluPaneItem{
title:"TabView"
image:"qrc:/res/image/control/TabView.png"
@ -183,7 +181,6 @@ FluObject{
navigationView.push("qrc:/T_TabView.qml")
}
}
FluPaneItem{
title:"TreeView"
onTap:{
@ -191,18 +188,18 @@ FluObject{
}
}
FluPaneItem{
title:"MultiWindow"
onTap:{
navigationView.push("qrc:/T_MultiWindow.qml")
}
}
FluPaneItemHeader{
title:"Theming"
}
FluPaneItemExpander{
title:"Theming"
icon:FluentIcons.Brightness
FluPaneItem{
title:"Theme"
onTap:{
@ -222,11 +219,11 @@ FluObject{
navigationView.push("qrc:/T_Typography.qml")
}
}
FluPaneItemHeader{
title:"Media"
}
FluPaneItemExpander{
title:"Media"
icon:FluentIcons.Media
FluPaneItem{
title:"MediaPlayer"
image:"qrc:/res/image/control/MediaPlayerElement.png"
@ -236,6 +233,7 @@ FluObject{
navigationView.push("qrc:/T_MediaPlayer.qml")
}
}
}
function getRecentlyAddedData(){
var arr = []
@ -244,14 +242,23 @@ FluObject{
if(item instanceof FluPaneItem && item.recentlyAdded){
arr.push(item)
}
if(item instanceof FluPaneItemExpander){
for(var j=0;j<item.children.length;j++){
var itemChild = item.children[j]
if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
arr.push(itemChild)
}
}
}
}
return arr
}
function getRecentlyUpdatedData(){
var arr = []
for(var i=0;i<children.length;i++){
var item = children[i]
var items = navigationView.getItems();
for(var i=0;i<items.length;i++){
var item = items[i]
if(item instanceof FluPaneItem && item.recentlyUpdated){
arr.push(item)
}
@ -261,8 +268,9 @@ FluObject{
function getSearchData(){
var arr = []
for(var i=0;i<children.length;i++){
var item = children[i]
var items = navigationView.getItems();
for(var i=0;i<items.length;i++){
var item = items[i]
if(item instanceof FluPaneItem){
arr.push({title:item.title,key:item.key})
}
@ -270,14 +278,19 @@ FluObject{
return arr
}
function startPageByItem(item){
for(var i=0;i<children.length;i++){
if(children[i].key === item.key){
function startPageByItem(data){
var items = navigationView.getItems();
for(var i=0;i<items.length;i++){
var item = items[i]
if(item.key === data.key){
if(navigationView.getCurrentIndex() === i){
return
}
children[i].tap()
item.tap()
navigationView.setCurrentIndex(i)
if(item.parent){
item.parent.isExpand = true
}
return
}
}

2
example/page/AboutPage.qml
View File

@ -36,7 +36,7 @@ FluWindow {
fontStyle: FluText.Title
}
FluText{
text:"v1.1.6"
text:"v1.1.7"
fontStyle: FluText.Body
Layout.alignment: Qt.AlignBottom
}

2
src/Fluent.cpp
View File

@ -32,6 +32,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/FluPaneItemExpander.qml"),uri,major,minor,"FluPaneItemExpander");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTabView.qml"),uri,major,minor,"FluTabView");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluBadge.qml"),uri,major,minor,"FluBadge");

182
src/controls/FluNavigationView.qml
View File

@ -48,14 +48,34 @@ Item {
id:com_panel_item_separatorr
FluDivider{
width: nav_list.width
height: 1
height: {
if(model.parent){
return model.parent.isExpand ? 1 : 0
}
return 1
}
Behavior on height {
NumberAnimation{
duration: 150
}
}
}
}
Component{
id:com_panel_item_header
Item{
height: 30
height: {
if(model.parent){
return model.parent.isExpand ? 30 : 0
}
return 30
}
Behavior on height {
NumberAnimation{
duration: 150
}
}
width: nav_list.width
FluText{
text:model.title
@ -70,11 +90,131 @@ Item {
}
Component{
id:com_panel_item
id:com_panel_item_expander
Item{
height: 38
width: nav_list.width
Rectangle{
radius: 4
anchors{
top: parent.top
bottom: parent.bottom
left: parent.left
right: parent.right
topMargin: 2
bottomMargin: 2
leftMargin: 6
rightMargin: 6
}
Rectangle{
width: 3
height: 18
radius: 1.5
color: FluTheme.primaryColor.dark
visible: {
for(var i=0;i<model.children.length;i++){
var item = model.children[i]
if(item.idx === nav_list.currentIndex && !model.isExpand){
return true
}
}
return false
}
anchors{
verticalCenter: parent.verticalCenter
}
}
FluIcon{
rotation: model.isExpand?0:180
iconSource:FluentIcons.ChevronUp
iconSize: 15
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 12
}
Behavior on rotation {
NumberAnimation{
duration: 150
}
}
}
MouseArea{
id:item_mouse
hoverEnabled: true
anchors.fill: parent
onClicked: {
model.isExpand = !model.isExpand
}
}
color: {
if(FluTheme.dark){
if(item_mouse.containsMouse){
return Qt.rgba(1,1,1,0.03)
}
if((nav_list.currentIndex === position)&&type===0){
return Qt.rgba(1,1,1,0.06)
}
return Qt.rgba(0,0,0,0)
}else{
if(item_mouse.containsMouse){
return Qt.rgba(0,0,0,0.03)
}
if(nav_list.currentIndex === position&&type===0){
return Qt.rgba(0,0,0,0.06)
}
return Qt.rgba(0,0,0,0)
}
}
FluIcon{
id:item_icon
iconSource: {
if(model.icon){
return model.icon
}
return 0
}
width: 30
height: 30
iconSize: 15
anchors{
verticalCenter: parent.verticalCenter
left:parent.left
leftMargin: 3
}
}
FluText{
id:item_title
text:model.title
anchors{
verticalCenter: parent.verticalCenter
left:item_icon.right
}
}
}
}
}
Component{
id:com_panel_item
Item{
Behavior on height {
NumberAnimation{
duration: 150
}
}
clip: true
height: {
if(model.parent){
return model.parent.isExpand ? 38 : 0
}
return 38
}
width: nav_list.width
Rectangle{
radius: 4
anchors{
@ -330,11 +470,7 @@ Item {
}
ScrollBar.vertical: FluScrollBar {}
model:{
if(items){
return items.children
}
}
model:handleItems()
delegate: Loader{
property var model: modelData
property var position: index
@ -349,6 +485,9 @@ Item {
if(modelData instanceof FluPaneItemSeparator){
return com_panel_item_separatorr
}
if(modelData instanceof FluPaneItemExpander){
return com_panel_item_expander
}
}
}
}
@ -383,6 +522,33 @@ Item {
}
}
function handleItems(){
var idx = 0
var data = []
if(items){
for(var i=0;i<items.children.length;i++){
var item = items.children[i]
item.idx = idx
data.push(item)
idx++
if(item instanceof FluPaneItemExpander){
for(var j=0;j<item.children.length;j++){
var itemChild = item.children[j]
itemChild.parent = item
itemChild.idx = idx
data.push(itemChild)
idx++
}
}
}
}
return data
}
function getItems(){
return nav_list.model
}
function push(url){
nav_swipe.push(url)
}

3
src/controls/FluPaneItem.qml
View File

@ -3,12 +3,15 @@ import FluentUI
QtObject {
readonly property string key : FluApp.uuid()
readonly property int flag : 0
property string title
property int icon
property bool recentlyAdded: false
property bool recentlyUpdated: false
property string desc
property var image
property var parent
property int idx
signal tap
signal repTap
}

14
src/controls/FluPaneItemExpander.qml Normal file
View File

@ -0,0 +1,14 @@
import QtQuick
import FluentUI
FluObject {
readonly property int flag : 3
readonly property string key : FluApp.uuid()
property string title
property int icon
property bool isExpand: false
property var parent
property int idx
signal tap
signal repTap
}

3
src/controls/FluPaneItemHeader.qml
View File

@ -1,6 +1,9 @@
import QtQuick
QtObject {
readonly property int flag : 1
readonly property string key : FluApp.uuid()
property string title
property var parent
property int idx
}

3
src/controls/FluPaneItemSeparator.qml
View File

@ -1,5 +1,8 @@
import QtQuick
QtObject {
readonly property int flag : 2
readonly property string key : FluApp.uuid()
property var parent
property int idx
}

1
src/res.qrc
View File

@ -59,5 +59,6 @@
<file>controls/FluMediaPlayer.qml</file>
<file>controls/FluTabView.qml</file>
<file>controls/FluItem.qml</file>
<file>controls/FluPaneItemExpander.qml</file>
</qresource>
</RCC>