amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-23 11:17:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzihcu 2023-03-30 17:16:57 +08:00
parent 9790ae12eb
commit 7720208d17
15 changed files with 387 additions and 370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
example/T_Home.qml
View File

@ -2,6 +2,7 @@
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import "qrc:///global/"
import FluentUI 1.0
FluScrollablePage{
@ -143,39 +144,15 @@ FluScrollablePage{
ListModel{
id:model_added
ListElement{
title:"TabView"
icon:"qrc:/res/image/control/TabView.png"
desc:"A control that displays a collection of tabs thatcan be used to display several documents."
}
ListElement{
title:"MediaPlayer"
icon:"qrc:/res/image/control/MediaPlayerElement.png"
desc:"A control to display video and image content"
Component.onCompleted: {
append(ItemsOriginal.getRecentlyAddedData())
}
}
ListModel{
id:model_update
ListElement{
title:"Buttons"
icon:"qrc:/res/image/control/Button.png"
desc:"A control that responds to user input and raisesa Click event."
}
ListElement{
title:"InfoBar"
icon:"qrc:/res/image/control/InfoBar.png"
desc:"An inline message to display app-wide statuschange information."
}
ListElement{
title:"Slider"
icon:"qrc:/res/image/control/Slider.png"
desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
}
ListElement{
title:"CheckBox"
icon:"qrc:/res/image/control/Checkbox.png"
desc:"A control that a user can select or clear."
Component.onCompleted: {
append(ItemsOriginal.getRecentlyUpdatedData())
}
}
@ -210,7 +187,7 @@ FluScrollablePage{
id:item_icon
height: 40
width: 40
source: model.icon
source: model.image
anchors{
left: parent.left
leftMargin: 20
@ -251,7 +228,7 @@ FluScrollablePage{
anchors.fill: parent
hoverEnabled: true
onClicked: {
rootwindow.startPageByTitle(model.title)
ItemsOriginal.startPageByItem(model)
}
}
}

4
example/T_TextBox.qml
View File

@ -26,7 +26,7 @@ FluScrollablePage{
}
FluAutoSuggestBox{
Layout.topMargin: 20
values:generateRandomNames(100)
items:generateRandomNames(100)
placeholderText: "AutoSuggestBox"
Layout.preferredWidth: 300
disabled:toggle_switch.selected
@ -52,7 +52,7 @@ FluScrollablePage{
}
for (let i = 0; i < numNames; i++) {
const name = generateRandomName();
names.push(name);
names.push({title:name});
}
return names;
}

21
example/global/ItemsFooter.qml Normal file
View File

@ -0,0 +1,21 @@
pragma Singleton
import QtQuick 2.15
import FluentUI 1.0
FluObject{
id:footer_items
FluPaneItemSeparator{}
FluPaneItem{
title:"意见反馈"
onTap:{
Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
}
}
FluPaneItem{
title:"关于"
onTap:{
FluApp.navigate("/about")
}
}
}

286
example/global/ItemsOriginal.qml Normal file
View File

@ -0,0 +1,286 @@
pragma Singleton
import QtQuick 2.15
import FluentUI 1.0
FluObject{
property var navigationView
FluPaneItem{
title:"Home"
icon:FluentIcons.Home
onTap:{
navigationView.push("qrc:/T_Home.qml")
}
}
FluPaneItemHeader{
title:"Inputs"
}
FluPaneItem{
title:"Buttons"
image:"qrc:/res/image/control/Button.png"
recentlyUpdated:true
desc:"A control that responds to user input and raisesa Click event."
onTap:{
navigationView.push("qrc:/T_Buttons.qml")
}
}
FluPaneItem{
title:"Slider"
image:"qrc:/res/image/control/Slider.png"
recentlyUpdated:true
desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
onTap:{
navigationView.push("qrc:/T_Slider.qml")
}
}
FluPaneItem{
title:"CheckBox"
image:"qrc:/res/image/control/Checkbox.png"
recentlyUpdated:true
desc:"A control that a user can select or clear."
onTap:{
navigationView.push("qrc:/T_CheckBox.qml")
}
}
FluPaneItem{
title:"ToggleSwitch"
onTap:{
navigationView.push("qrc:/T_ToggleSwitch.qml")
}
}
FluPaneItemHeader{
title:"Form"
}
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"
}
FluPaneItem{
title:"InfoBar"
image:"qrc:/res/image/control/InfoBar.png"
recentlyUpdated:true
desc:"An inline message to display app-wide statuschange information."
onTap:{
navigationView.push("qrc:/T_InfoBar.qml")
}
}
FluPaneItem{
title:"Progress"
onTap:{
navigationView.push("qrc:/T_Progress.qml")
}
}
FluPaneItem{
title:"Badge"
onTap:{
navigationView.push("qrc:/T_Badge.qml")
}
}
FluPaneItem{
title:"Rectangle"
onTap:{
navigationView.push("qrc:/T_Rectangle.qml")
}
}
FluPaneItem{
title:"Carousel"
onTap:{
navigationView.push("qrc:/T_Carousel.qml")
}
}
FluPaneItem{
title:"Expander"
onTap:{
navigationView.push("qrc:/T_Expander.qml")
}
}
FluPaneItemHeader{
title:"Popus"
}
FluPaneItem{
title:"Dialog"
onTap:{
navigationView.push("qrc:/T_Dialog.qml")
}
}
FluPaneItem{
title:"Tooltip"
onTap:{
navigationView.push("qrc:/T_Tooltip.qml")
}
}
FluPaneItem{
title:"Menu"
onTap:{
navigationView.push("qrc:/T_Menu.qml")
}
}
FluPaneItemHeader{
title:"Navigation"
}
FluPaneItem{
title:"TabView"
image:"qrc:/res/image/control/TabView.png"
recentlyAdded:true
desc:"A control that displays a collection of tabs thatcan be used to display several documents."
onTap:{
navigationView.push("qrc:/T_TabView.qml")
}
}
FluPaneItem{
title:"TreeView"
onTap:{
navigationView.push("qrc:/T_TreeView.qml")
}
}
FluPaneItem{
title:"MultiWindow"
onTap:{
navigationView.push("qrc:/T_MultiWindow.qml")
}
}
FluPaneItemHeader{
title:"Theming"
}
FluPaneItem{
title:"Theme"
onTap:{
navigationView.push("qrc:/T_Theme.qml")
}
}
FluPaneItem{
title:"Awesome"
onTap:{
navigationView.push("qrc:/T_Awesome.qml")
}
}
FluPaneItem{
title:"Typography"
onTap:{
navigationView.push("qrc:/T_Typography.qml")
}
}
FluPaneItemHeader{
title:"Media"
}
FluPaneItem{
title:"MediaPlayer"
image:"qrc:/res/image/control/MediaPlayerElement.png"
recentlyAdded:true
desc:"A control to display video and image content."
onTap:{
navigationView.push("qrc:/T_MediaPlayer.qml")
}
}
function getRecentlyAddedData(){
var arr = []
for(var i=0;i<children.length;i++){
var item = children[i]
if(item instanceof FluPaneItem && item.recentlyAdded){
arr.push(item)
}
}
return arr
}
function getRecentlyUpdatedData(){
var arr = []
for(var i=0;i<children.length;i++){
var item = children[i]
if(item instanceof FluPaneItem && item.recentlyUpdated){
arr.push(item)
}
}
return arr
}
function getSearchData(){
var arr = []
for(var i=0;i<children.length;i++){
var item = children[i]
if(item instanceof FluPaneItem){
arr.push({title:item.title,key:item.key})
}
}
return arr
}
function startPageByItem(item){
for(var i=0;i<children.length;i++){
if(children[i].key === item.key){
if(navigationView.getCurrentIndex() === i){
return
}
children[i].tap()
navigationView.setCurrentIndex(i)
return
}
}
}
}

2
example/global/qmldir Normal file
View File

@ -0,0 +1,2 @@
singleton ItemsOriginal 1.0 ItemsOriginal.qml
singleton ItemsFooter 1.0 ItemsFooter.qml

1
example/page/LoginPage.qml
View File

@ -33,7 +33,6 @@ FluWindow {
verticalCenter: parent.verticalCenter
}
FluAutoSuggestBox{
id:textbox_uesrname
values:["Admin","User"]

256
example/page/MainPage.qml
View File

@ -2,7 +2,7 @@
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
import "qrc:///global/"
import FluentUI 1.0
FluWindow {
@ -19,255 +19,31 @@ FluWindow {
showDark: true
}
FluObject{
id:original_items
FluPaneItem{
title:"Home"
icon:FluentIcons.Home
onTap:{
nav_view.push("qrc:/T_Home.qml")
}
}
FluPaneItemHeader{
title:"Inputs"
}
FluPaneItem{
title:"Buttons"
onTap:{
nav_view.push("qrc:/T_Buttons.qml")
}
}
FluPaneItem{
title:"Slider"
onTap:{
nav_view.push("qrc:/T_Slider.qml")
}
}
FluPaneItem{
title:"CheckBox"
onTap:{
nav_view.push("qrc:/T_CheckBox.qml")
}
}
FluPaneItem{
title:"ToggleSwitch"
onTap:{
nav_view.push("qrc:/T_ToggleSwitch.qml")
}
}
FluPaneItemHeader{
title:"Form"
}
FluPaneItem{
title:"TextBox"
onTap:{
nav_view.push("qrc:/T_TextBox.qml")
}
}
FluPaneItem{
title:"TimePicker"
onTap:{
nav_view.push("qrc:/T_TimePicker.qml")
}
}
FluPaneItem{
title:"DatePicker"
onTap:{
nav_view.push("qrc:/T_DatePicker.qml")
}
}
FluPaneItem{
title:"CalendarPicker"
onTap:{
nav_view.push("qrc:/T_CalendarPicker.qml")
}
}
FluPaneItem{
title:"ColorPicker"
onTap:{
nav_view.push("qrc:/T_ColorPicker.qml")
}
}
FluPaneItemHeader{
title:"Surface"
}
FluPaneItem{
title:"InfoBar"
onTap:{
nav_view.push("qrc:/T_InfoBar.qml")
}
}
FluPaneItem{
title:"Progress"
onTap:{
nav_view.push("qrc:/T_Progress.qml")
}
}
FluPaneItem{
title:"Badge"
onTap:{
nav_view.push("qrc:/T_Badge.qml")
}
}
FluPaneItem{
title:"Rectangle"
onTap:{
nav_view.push("qrc:/T_Rectangle.qml")
}
}
FluPaneItem{
title:"Carousel"
onTap:{
nav_view.push("qrc:/T_Carousel.qml")
}
}
FluPaneItem{
title:"Expander"
onTap:{
nav_view.push("qrc:/T_Expander.qml")
}
}
FluPaneItemHeader{
title:"Popus"
}
FluPaneItem{
title:"Dialog"
onTap:{
nav_view.push("qrc:/T_Dialog.qml")
}
}
FluPaneItem{
title:"Tooltip"
onTap:{
nav_view.push("qrc:/T_Tooltip.qml")
}
}
FluPaneItem{
title:"Menu"
onTap:{
nav_view.push("qrc:/T_Menu.qml")
}
}
FluPaneItemHeader{
title:"Navigation"
}
FluPaneItem{
title:"TabView"
onTap:{
nav_view.push("qrc:/T_TabView.qml")
}
}
FluPaneItem{
title:"TreeView"
onTap:{
nav_view.push("qrc:/T_TreeView.qml")
}
}
FluPaneItem{
title:"MultiWindow"
onTap:{
nav_view.push("qrc:/T_MultiWindow.qml")
}
}
FluPaneItemHeader{
title:"Theming"
}
FluPaneItem{
title:"Theme"
onTap:{
nav_view.push("qrc:/T_Theme.qml")
}
}
FluPaneItem{
title:"Awesome"
onTap:{
nav_view.push("qrc:/T_Awesome.qml")
}
}
FluPaneItem{
title:"Typography"
onTap:{
nav_view.push("qrc:/T_Typography.qml")
}
}
FluPaneItemHeader{
title:"Media"
}
FluPaneItem{
title:"MediaPlayer"
onTap:{
nav_view.push("qrc:/T_MediaPlayer.qml")
}
}
}
FluObject{
id:footer_items
FluPaneItemSeparator{}
FluPaneItem{
title:"意见反馈"
onTap:{
Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
}
}
FluPaneItem{
title:"关于"
onTap:{
FluApp.navigate("/about")
}
}
}
FluNavigationView{
id:nav_view
anchors.fill: parent
items: original_items
footerItems:footer_items
items: ItemsOriginal
footerItems:ItemsFooter
logo: "qrc:/res/image/favicon.ico"
z: 11
title:"FluentUI"
autoSuggestBox:FluAutoSuggestBox{
width: 280
anchors.centerIn: parent
iconSource: FluentIcons.Zoom
items: ItemsOriginal.getSearchData()
placeholderText: "查找"
onItemClicked:
(data)=>{
ItemsOriginal.startPageByItem(data)
}
}
Component.onCompleted: {
ItemsOriginal.navigationView = nav_view
nav_view.setCurrentIndex(0)
nav_view.push("qrc:/T_Home.qml")
}
}
function startPageByTitle(title){
console.debug(title)
nav_view.startPageByTitle(title)
}
}

3
example/qml.qrc
View File

@ -149,5 +149,8 @@
<file>res/image/control/WebView.png</file>
<file>res/image/control/XamlUICommand.png</file>
<file>T_CheckBox.qml</file>
<file>global/ItemsOriginal.qml</file>
<file>global/qmldir</file>
<file>global/ItemsFooter.qml</file>
</qresource>
</RCC>

5
src/FluApp.cpp
View File

@ -5,6 +5,7 @@
#include <QQmlContext>
#include <QQuickItem>
#include <QTimer>
#include <QUuid>
#include <QClipboard>
#include "Def.h"
@ -99,3 +100,7 @@ QJsonArray FluApp::awesomelist(const QString& keyword)
void FluApp::clipText(const QString& text){
QGuiApplication::clipboard()->setText(text);
}
QString FluApp::uuid(){
return QUuid::createUuid().toString();
}

2
src/FluApp.h
View File

@ -37,6 +37,8 @@ public:
Q_INVOKABLE void clipText(const QString& text);
Q_INVOKABLE QString uuid();
private:
QMap<QString, QVariant> properties;
static FluApp* m_instance;

39
src/controls/FluAutoSuggestBox.qml
View File

@ -4,12 +4,12 @@ import FluentUI 1.0
TextField{
property var values:[]
property var items:[]
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
property int iconSource: 0
property bool disabled: false
signal itemClicked(string data)
signal itemClicked(var data)
signal handleClicked
id:input
width: 300
@ -211,7 +211,7 @@ TextField{
function handleClick(){
input_popup.close()
input.itemClicked(modelData)
input.text = modelData
input.text = modelData.title
}
}
Rectangle{
@ -227,37 +227,12 @@ TextField{
}
}
contentItem: FluText{
text:modelData
text:modelData.title
anchors{
verticalCenter: parent.verticalCenter
}
}
}
// Item{
// height: 38
// width: input.width
// Rectangle{
// anchors.fill: parent
// anchors.topMargin: 2
// anchors.bottomMargin: 2
// anchors.leftMargin: 5
// anchors.rightMargin: 5
// radius: 3
// MouseArea{
// id:item_mouse
// anchors.fill: parent
// hoverEnabled: true
// onClicked: {
// input_popup.close()
// input.itemClicked(modelData)
// input.text = modelData
// }
// }
// }
// }
}
}
}
@ -268,12 +243,12 @@ TextField{
function searchData(){
var result = []
if(values==null){
if(items==null){
list_view.model = result
return
}
values.map(function(item){
if(item.indexOf(input.text)!==-1){
items.map(function(item){
if(item.title.indexOf(input.text)!==-1){
result.push(item)
}
})

94
src/controls/FluNavigationView.qml
View File

@ -7,10 +7,12 @@ import FluentUI 1.0
Item {
property alias logo : image_logo.source
property string title: ""
property FluObject items
property FluObject footerItems
property int displayMode: width<=700 ? FluNavigationView.Minimal : FluNavigationView.Open
property bool displaMinimalMenu : false
property Component autoSuggestBox
id:root
@ -214,7 +216,7 @@ Item {
}
FluText{
Layout.alignment: Qt.AlignVCenter
text:"FluentUI"
text:root.title
Layout.leftMargin: 12
fontStyle: FluText.Body
}
@ -257,6 +259,17 @@ Item {
Rectangle{
id:layout_list
width: 300
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
border.width: displayMode === FluNavigationView.Minimal ? 1 : 0
color: {
if(displayMode === FluNavigationView.Minimal){
return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
}
if(window && window.active){
return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
}
return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
}
anchors{
top: parent.top
bottom: parent.bottom
@ -273,70 +286,29 @@ Item {
}
}
color: {
if(displayMode === FluNavigationView.Minimal){
return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
}
if(window && window.active){
return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
}
return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
}
Behavior on color{
ColorAnimation {
duration: 300
}
}
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
border.width: displayMode === FluNavigationView.Minimal ? 1 : 0
Item{
id:layout_header
width: layout_list.width
y:nav_app_bar.height
height: textbox_search.height
height: {
if(loader_auto_suggest_box.item){
return loader_auto_suggest_box.item.height
}
return 0
}
Loader{
id:loader_auto_suggest_box
anchors.horizontalCenter: parent.horizontalCenter
sourceComponent: autoSuggestBox
}
}
FluAutoSuggestBox{
id:textbox_search
width: 280
anchors.centerIn: parent
iconSource: FluentIcons.Zoom
values: {
var arr = []
if(items==null)
return arr
if(items.children==null)
return arr
for(var i=0;i<items.children.length;i++){
var item = items.children[i]
if(item instanceof FluPaneItem){
arr.push(item.title)
}
}
return arr
}
placeholderText: "查找"
onItemClicked:
(data)=>{
var arr = []
if(items==null)
return arr
if(items.children==null)
return arr
for(var i=0;i<items.children.length;i++){
if(items.children[i].title === data){
if(nav_list.currentIndex === i){
return
}
items.children[i].tap()
nav_list.currentIndex = i
return
}
}
}
}
}
ListView{
id:nav_list
property bool enableStack: true
@ -349,6 +321,7 @@ Item {
right: parent.right
bottom: layout_footer.top
}
highlightMoveDuration: 150
currentIndex: -1
onCurrentIndexChanged: {
if(enableStack){
@ -418,17 +391,8 @@ Item {
nav_list.currentIndex = index
}
function startPageByTitle(title){
for(var i=0;i<items.children.length;i++){
if(items.children[i].title === title){
if(nav_list.currentIndex === i){
return
}
items.children[i].tap()
nav_list.currentIndex = i
return
}
}
function getCurrentIndex(){
return nav_list.currentIndex
}
}

8
src/controls/FluPaneItem.qml
View File

@ -1,8 +1,14 @@
import QtQuick 2.15
import FluentUI 1.0
QtObject {
readonly property string key : FluApp.uuid()
property string title
property var icon
property int icon
property bool recentlyAdded: false
property bool recentlyUpdated: false
property string desc
property var image
signal tap
signal repTap
}

1
src/controls/FluPaneItemHeader.qml
View File

@ -1,5 +1,6 @@
import QtQuick 2.15
QtObject {
readonly property string key : FluApp.uuid()
property string title
}

2
src/controls/FluPaneItemSeparator.qml
View File

@ -1,5 +1,5 @@
import QtQuick 2.15
QtObject {
readonly property string key : FluApp.uuid()
}