main
zhuzihcu 2023-03-10 18:08:32 +08:00
parent d835b7c23d
commit bcc5d433a9
30 changed files with 1095 additions and 775 deletions

View File

@ -34,7 +34,7 @@ FluWindow {
fontStyle: FluText.Title
}
FluText{
text:"v1.0.2"
text:"v1.0.3"
fontStyle: FluText.Body
Layout.alignment: Qt.AlignBottom
}

View File

@ -17,184 +17,164 @@ FluWindow {
FluAppBar{
id:appbar
title: "FluentUI"
showDark: true
}
ListModel{
id:nav_items
ListElement{
text:"Buttons"
page:"qrc:/T_Buttons.qml"
FluObject{
id:original_items
FluPaneItemHeader{
title:"Inputs"
}
ListElement{
text:"TextBox"
page:"qrc:/T_TextBox.qml"
}
ListElement{
text:"ToggleSwitch"
page:"qrc:/T_ToggleSwitch.qml"
}
ListElement{
text:"Slider"
page:"qrc:/T_Slider.qml"
}
ListElement{
text:"InfoBar"
page:"qrc:/T_InfoBar.qml"
}
ListElement{
text:"Dialog"
page:"qrc:/T_Dialog.qml"
}
ListElement{
text:"Progress"
page:"qrc:/T_Progress.qml"
}
ListElement{
text:"Rectangle"
page:"qrc:/T_Rectangle.qml"
}
ListElement{
text:"Expander"
page:"qrc:/T_Expander.qml"
}
ListElement{
text:"TreeView"
page:"qrc:/T_TreeView.qml"
}
ListElement{
text:"Theme"
page:"qrc:/T_Theme.qml"
}
ListElement{
text:"Awesome"
page:"qrc:/T_Awesome.qml"
}
ListElement{
text:"Typography"
page:"qrc:/T_Typography.qml"
FluPaneItem{
title:"Buttons"
onTap:{
nav_view.push("qrc:/T_Buttons.qml")
}
}
FluIconButton{
icon:FluentIcons.FA_navicon
anchors{
left: parent.left
bottom: parent.bottom
leftMargin: 12
bottomMargin: 12
FluPaneItem{
title:"Slider"
onTap:{
nav_view.push("qrc:/T_Slider.qml")
}
FluMenu{
id:menu
x:40
margins:4
FluMenuItem{
text:"意见反馈"
onClicked:{
}
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")
}
}
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:"Rectangle"
onTap:{
nav_view.push("qrc:/T_Rectangle.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")
}
}
FluPaneItemHeader{
title:"Navigation"
}
FluPaneItem{
title:"TreeView"
onTap:{
nav_view.push("qrc:/T_TreeView.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")
}
}
}
FluObject{
id:footer_items
FluPaneItemSeparator{}
FluPaneItem{
title:"意见反馈"
onTap:{
Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
}
}
FluMenuItem{
text:"关于"
onClicked:{
FluPaneItem{
title:"关于"
onTap:{
FluApp.navigate("/About")
}
}
}
onClicked:{
menu.open()
}
}
ListView{
id:nav_list
FluNavigationView{
id:nav_view
anchors{
top: appbar.bottom
bottom: parent.bottom
topMargin: 20
bottomMargin: 52
}
ScrollBar.vertical: ScrollBar { }
boundsBehavior: Flickable.StopAtBounds
clip: true
width: 160
model: nav_items
delegate: 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
}
MouseArea{
id:item_mouse
hoverEnabled: true
anchors.fill: parent
onClicked: {
nav_list.currentIndex = index
}
}
color: {
if(FluTheme.isDark){
if(nav_list.currentIndex === index){
return "#2D2D2D"
}
if(item_mouse.containsMouse){
return "#292929"
}
return "#202020"
}else{
if(item_mouse.containsMouse){
return Qt.rgba(0,0,0,0.03)
}
if(nav_list.currentIndex === index){
return Qt.rgba(0,0,0,0.06)
}
return Qt.rgba(0,0,0,0)
}
}
FluText{
text:model.text
anchors.centerIn: parent
}
}
}
}
Rectangle{
color: FluTheme.isDark ? "#323232" : "#FFFFFF"
radius: 10
clip: true
anchors{
left: nav_list.right
leftMargin: 2
top: appbar.bottom
topMargin: 20
right: parent.right
rightMargin: 10
bottom: parent.bottom
bottomMargin: 20
}
border.width: 1
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
items:original_items
footerItems:footer_items
Loader{
anchors.fill: parent
anchors.margins:20
source: nav_items.get(nav_list.currentIndex).page
Component.onCompleted: {
nav_view.setCurrentIndex(1)
nav_view.push("qrc:/T_Buttons.qml")
}
}
}

View File

@ -4,20 +4,19 @@ import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
Item {
FluText{
id:title
text:"Awesome"
fontStyle: FluText.TitleLarge
}
FluContentPage {
title:"Awesome"
FluTextBox{
id:text_box
placeholderText: "请输入关键字"
anchors{
topMargin: 20
top:title.bottom
top:parent.top
}
}
FluFilledButton{
text:"搜索"
anchors{

View File

@ -2,39 +2,35 @@
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
width: parent.width
FluText{
id:title
text:"Buttons"
fontStyle: FluText.TitleLarge
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
}
ColumnLayout{
spacing: 5
width: parent.width
RowLayout{
FluScrollablePage{
title:"Buttons"
spacing: 20
FluArea{
Layout.topMargin: 20
width: parent.width
height: 68
paddings: 10
FluButton{
disabled:button_switch.checked
onClicked: {
showInfo("点击StandardButton")
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
Item{
height: 1
Layout.fillWidth: true
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:button_switch
@ -44,21 +40,29 @@ Item {
text:"Disabled"
}
}
FluDivider{
Layout.fillWidth: true ; height:1;
}
RowLayout{
Layout.topMargin: 20
FluArea{
width: parent.width
height: 68
paddings: 10
FluFilledButton{
disabled:filled_button_switch.checked
onClicked:{
onClicked: {
showWarning("点击FilledButton")
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
Item{
height: 1
Layout.fillWidth: true
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:filled_button_switch
@ -68,22 +72,31 @@ Item {
text:"Disabled"
}
}
FluDivider{
Layout.fillWidth: true ; height:1
}
RowLayout{
Layout.topMargin: 20
FluArea{
width: parent.width
height: 68
paddings: 10
FluIconButton{
icon:FluentIcons.FA_close
disabled:icon_button_switch.checked
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
onClicked:{
showSuccess("点击IconButton")
}
}
Item{
height: 1
Layout.fillWidth: true
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:icon_button_switch
@ -93,14 +106,19 @@ Item {
text:"Disabled"
}
}
FluDivider{
Layout.fillWidth: true ; height:1
}
RowLayout{
Layout.topMargin: 20
FluArea{
width: parent.width
height: 100
paddings: 10
ColumnLayout{
spacing: 8
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
Repeater{
id:repeater
property int selecIndex : 0
@ -115,9 +133,13 @@ Item {
}
}
}
Item{
height: 1
Layout.fillWidth: true
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:radio_button_switch
@ -127,18 +149,28 @@ Item {
text:"Disabled"
}
}
FluDivider{
Layout.fillWidth: true ; height:1
}
RowLayout{
Layout.topMargin: 20
FluArea{
width: parent.width
height: 68
paddings: 10
FluCheckBox{
disabled:icon_button_check.checked
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
Item{
height: 1
Layout.fillWidth: true
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:icon_button_check
@ -148,9 +180,5 @@ Item {
text:"Disabled"
}
}
FluDivider{
Layout.fillWidth: true ; height:1
}
}
}
}

View File

@ -5,13 +5,8 @@ import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
FluText{
id:title
text:"Dialog"
fontStyle: FluText.TitleLarge
}
FluScrollablePage{
title:"Dialog"
FluContentDialog{
id:dialog
@ -27,18 +22,6 @@ Item {
}
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
}
ColumnLayout{
spacing: 5
FluButton{
Layout.topMargin: 20
text:"Show Dialog"
@ -46,6 +29,4 @@ Item {
dialog.open()
}
}
}
}
}

View File

@ -5,28 +5,12 @@ import QtQuick.Window 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
FluText{
id:title
text:"Expander"
fontStyle: FluText.TitleLarge
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
}
Column{
spacing: 5
Item{
width: 1
height: 20
}
FluScrollablePage{
title:"Expander"
FluExpander{
headerText:"打开一个单选框"
Layout.topMargin: 20
Item{
anchors.fill: parent
ColumnLayout{
@ -73,6 +57,4 @@ Item {
}
}
}
}
}
}

View File

@ -5,22 +5,8 @@ import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
FluText{
id:title
text:"InfoBar"
fontStyle: FluText.TitleLarge
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
}
ColumnLayout{
spacing: 5
FluScrollablePage{
title:"InfoBar"
FluButton{
text:"Info"
@ -50,6 +36,4 @@ Item {
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
}
}
}
}
}

View File

@ -5,22 +5,9 @@ import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
FluText{
id:title
text:"Progress"
fontStyle: FluText.TitleLarge
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
}
ColumnLayout{
spacing: 5
FluScrollablePage{
title:"Progress"
FluProgressBar{
Layout.topMargin: 20
}
@ -46,6 +33,4 @@ Item {
}
Layout.bottomMargin: 30
}
}
}
}

View File

@ -5,24 +5,9 @@ import QtQuick.Window 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
FluText{
id:title
text:"Rectangle"
fontStyle: FluText.TitleLarge
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
}
ColumnLayout{
spacing: 5
width: parent.width
height: parent.height
FluScrollablePage{
title:"Rectangle"
RowLayout{
Layout.topMargin: 20
FluRectangle{
@ -126,6 +111,4 @@ Item {
}
Layout.topMargin: 10
}
}
}
}

View File

@ -5,22 +5,10 @@ import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
FluText{
id:title
text:"Slider"
fontStyle: FluText.TitleLarge
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
}
ColumnLayout{
spacing: 5
FluScrollablePage{
title:"Slider"
FluSlider{
Layout.topMargin: 20
Layout.leftMargin: 15
@ -32,6 +20,4 @@ Item {
Layout.leftMargin: 15
value: 50
}
}
}
}

View File

@ -5,22 +5,10 @@ import QtQuick.Window 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
FluText{
id:title
text:"TextBox"
fontStyle: FluText.TitleLarge
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
}
ColumnLayout{
spacing: 5
FluScrollablePage{
title:"TextBox"
FluTextBox{
Layout.topMargin: 20
placeholderText: "单行输入框"
@ -37,8 +25,6 @@ Item {
placeholderText: "AutoSuggestBox"
Layout.preferredWidth: 300
}
}
}
function generateRandomNames(numNames) {
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

View File

@ -5,22 +5,10 @@ import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
FluText{
id:title
text:"Theme"
fontStyle: FluText.TitleLarge
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
}
ColumnLayout{
spacing: 5
FluScrollablePage{
title:"Theme"
RowLayout{
Layout.topMargin: 20
Repeater{
@ -70,6 +58,4 @@ Item {
FluTheme.isFrameless = !FluTheme.isFrameless
}
}
}
}
}

View File

@ -5,26 +5,11 @@ import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
FluText{
id:title
text:"ToggleSwitch"
fontStyle: FluText.TitleLarge
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
}
ColumnLayout{
spacing: 5
FluScrollablePage{
title:"ToggleSwitch"
FluToggleSwitch{
Layout.topMargin: 20
}
}
}
}

View File

@ -2,15 +2,11 @@
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
FluText{
id:title
text:"TreeView"
fontStyle: FluText.TitleLarge
}
FluContentPage {
title:"TreeView"
function randomName() {
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
@ -56,7 +52,7 @@ Item {
id:tree_view
width:240
anchors{
top:title.bottom
top:parent.top
left:parent.left
bottom:parent.bottom
}

View File

@ -3,24 +3,15 @@ import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import FluentUI 1.0
Item {
FluContentPage {
title: "Typography"
property int textSize: 13
FluText{
id:title
text:"Typography"
fontStyle: FluText.TitleLarge
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: title.bottom
bottom: parent.bottom
}
ColumnLayout{
spacing: 0
FluText{

View File

@ -3,7 +3,6 @@
<file>T_ToggleSwitch.qml</file>
<file>T_Typography.qml</file>
<file>App.qml</file>
<file>MainPage.qml</file>
<file>SettingPage.qml</file>
<file>AboutPage.qml</file>
<file>T_Buttons.qml</file>
@ -30,5 +29,6 @@
<file>T_Dialog.qml</file>
<file>T_TreeView.qml</file>
<file>T_Expander.qml</file>
<file>MainPage.qml</file>
</qresource>
</RCC>

View File

@ -33,6 +33,15 @@ void Fluent::registerTypes(const char *uri){
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluContentPage.qml"),uri,major,minor,"FluContentPage");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluScrollablePage.qml"),uri,major,minor,"FluScrollablePage");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemHeader.qml"),uri,major,minor,"FluPaneItemHeader");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItem.qml"),uri,major,minor,"FluPaneItem");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemSeparator.qml"),uri,major,minor,"FluPaneItemSeparator");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluNavigationView.qml"),uri,major,minor,"FluNavigationView");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluAutoSuggestBox.qml"),uri,major,minor,"FluAutoSuggestBox");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluExpander.qml"),uri,major,minor,"FluExpander");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTreeView.qml"),uri,major,minor,"FluTreeView");

View File

@ -14,7 +14,8 @@ Rectangle{
return Window.window.active ? borerlessColor : Qt.lighter(borerlessColor,1.1)
}
visible: FluTheme.isFrameless
height: visible ? 50 : 0
height: visible ? 34 : 0
width: {
if(parent==null)
return 200
@ -60,7 +61,7 @@ Rectangle{
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 14
leftMargin: 10
}
color:root.textColor
fontStyle: FluText.Title
@ -69,14 +70,13 @@ Rectangle{
}
RowLayout{
anchors.right: parent.right;
anchors.rightMargin: 10
height: parent.height
spacing: 5
anchors.right: parent.right
height: 30
spacing: 0
TFpsMonitor{
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: 12
Layout.rightMargin: 20
Layout.topMargin: 5
color:root.textColor
visible: showFps
@ -84,8 +84,9 @@ Rectangle{
RowLayout{
Layout.alignment: Qt.AlignVCenter
spacing: 5
Layout.rightMargin: 14
visible: showDark
spacing: 5
FluText{
text:"夜间模式"
color:root.textColor

28
src/controls/FluArea.qml Normal file
View File

@ -0,0 +1,28 @@
import QtQuick 2.15
import FluentUI 1.0
Rectangle {
radius: 4
color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.width: 1
implicitHeight: height
implicitWidth: width
default property alias content: container.data
property int paddings : 0
property int leftPadding : 0
property int rightPadding : 0
property int topPadding : 0
property int bottomPadding : 0
Item {
id: container
anchors.fill: parent
anchors.leftMargin: Math.max(paddings,leftPadding)
anchors.rightMargin: Math.max(paddings,rightPadding)
anchors.topMargin: Math.max(paddings,topPadding)
anchors.bottomMargin: Math.max(paddings,bottomPadding)
}
}

View File

@ -0,0 +1,29 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
Item {
id:root
property alias title: text_title.text
default property alias content: container.data
FluText{
id:text_title
fontStyle: FluText.TitleLarge
}
Item{
clip: true
id:container
anchors{
top: text_title.bottom
bottom: parent.bottom
}
width: parent.width
}
}

View File

@ -10,6 +10,8 @@ Item {
id:root
height: layout_header.height + container.height
width: 400
implicitWidth: width
implicitHeight: height
property int contentHeight : 300

View File

@ -14,9 +14,9 @@ Rectangle {
property bool disabled: false
property bool hovered: button_mouse.containsMouse
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
property color normalColor: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(1,1,1,1)
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(1,1,1,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
property color normalColor: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0)
property color textColor: {
if(FluTheme.isDark){

View File

@ -0,0 +1,341 @@
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0
Item {
id:root
property FluObject items
property FluObject footerItems
property int displayMode: width<=700 ? FluNavigationView.Minimal : FluNavigationView.Open
property bool displaMinimalNav : false
onDisplayModeChanged: {
if(displayMode === FluNavigationView.Minimal){
anim_navi.enabled = false
displaMinimalNav = false
timer_anim_enable.restart()
}
}
Timer{
id:timer_anim_enable
interval: 150
onTriggered: {
anim_navi.enabled = true
}
}
enum DisplayMode {
Minimal,
Open,
Auto
}
property var window : {
if(Window.window == null)
return null
return Window.window
}
Component{
id:com_panel_item_separatorr
FluDivider{
width: nav_list.width
height: 1
}
}
Component{
id:com_panel_item_header
Item{
height: 30
width: nav_list.width
FluText{
text:model.title
fontStyle: FluText.BodyStrong
anchors{
bottom: parent.bottom
left:parent.left
leftMargin: 10
}
}
}
}
Component{
id:com_panel_item
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
}
MouseArea{
id:item_mouse
hoverEnabled: true
anchors.fill: parent
onClicked: {
if(type===0){
model.repTap()
if(nav_list.currentIndex !== position){
nav_list.currentIndex = position
model.tap()
}
}else{
model.tap()
}
}
}
color: {
if(FluTheme.isDark){
if((nav_list.currentIndex === position)&&type===0){
return "#2D2D2D"
}
if(item_mouse.containsMouse){
return "#292929"
}
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)
}
}
FluText{
text:model.title
anchors{
verticalCenter: parent.verticalCenter
left:parent.left
leftMargin: 14
}
}
}
}
}
Item {
id:nav_app_bar
width: parent.width
height: 38
RowLayout{
height:parent.height
spacing: 0
FluIconButton{
icon: FluentIcons.FA_arrow_left
Layout.leftMargin: 5
Layout.alignment: Qt.AlignVCenter
disabled: nav_swipe.depth === 1
onClicked: {
nav_swipe.pop()
nav_list.stackIndex.pop()
var index = nav_list.stackIndex[nav_list.stackIndex.length-1]
nav_list.enableStack = false
nav_list.currentIndex = index
nav_list.enableStack = true
}
}
FluIconButton{
icon: FluentIcons.FA_navicon
Layout.leftMargin: 5
visible: displayMode === FluNavigationView.Minimal
Layout.alignment: Qt.AlignVCenter
onClicked: {
displaMinimalNav = !displaMinimalNav
}
}
}
RowLayout{
anchors{
right: parent.right
rightMargin: 14
verticalCenter: parent.verticalCenter
}
spacing: 5
FluText{
text:"夜间模式"
fontStyle: FluText.Body
}
FluToggleSwitch{
checked: FluTheme.isDark
onClickFunc:function(){
FluTheme.isDark = !FluTheme.isDark
}
}
}
}
Item{
anchors{
left: displayMode === FluNavigationView.Minimal ? parent.left : layout_list.right
leftMargin: 2
top: nav_app_bar.bottom
right: parent.right
rightMargin: 10
bottom: parent.bottom
bottomMargin: 20
}
StackView{
id:nav_swipe
anchors.fill: parent
clip: true
anchors.margins: 10
popEnter : Transition{}
popExit : Transition{}
pushEnter : Transition{}
pushExit : Transition{}
replaceEnter : Transition{}
replaceExit : Transition{}
}
}
MouseArea{
anchors.fill: parent
enabled: (displayMode === FluNavigationView.Minimal && displaMinimalNav)
onClicked: {
displaMinimalNav = false
}
}
Rectangle{
id:layout_list
width: 300
anchors{
top: nav_app_bar.bottom
bottom: parent.bottom
}
x: {
if(displayMode !== FluNavigationView.Minimal)
return 0
return (displayMode === FluNavigationView.Minimal && displaMinimalNav) ? 0 : -width
}
Behavior on x{
id:anim_navi
NumberAnimation{
duration: 150
}
}
color: {
if(displayMode === FluNavigationView.Minimal){
return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
}
if(window && window.active){
return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
}
return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
}
Behavior on color{
ColorAnimation {
duration: 300
}
}
ListView{
id:nav_list
property bool enableStack: true
property var stackIndex: []
clip: true
anchors{
top: parent.top
left: parent.left
right: parent.right
bottom: layout_footer.top
}
currentIndex: -1
onCurrentIndexChanged: {
if(enableStack){
stackIndex.push(currentIndex)
}
}
model:{
if(items){
return items.children
}
}
boundsBehavior: ListView.StopAtBounds
delegate: Loader{
property var model: modelData
property var position: index
property int type: 0
sourceComponent: {
if(modelData instanceof FluPaneItem){
return com_panel_item
}
if(modelData instanceof FluPaneItemHeader){
return com_panel_item_header
}
if(modelData instanceof FluPaneItemSeparator){
return com_panel_item_separatorr
}
}
}
}
ListView{
id:layout_footer
width: layout_list.width
height: childrenRect.height
anchors.bottom: parent.bottom
boundsBehavior: ListView.StopAtBounds
model: {
if(footerItems){
return footerItems.children
}
}
currentIndex: -1
delegate: Loader{
property var model: modelData
property var position: index
property int type: 1
sourceComponent: {
if(modelData instanceof FluPaneItem){
return com_panel_item
}
if(modelData instanceof FluPaneItemHeader){
return com_panel_item_header
}
if(modelData instanceof FluPaneItemSeparator){
return com_panel_item_separatorr
}
}
}
}
}
function push(url){
nav_swipe.push(url)
}
function setCurrentIndex(index){
nav_list.currentIndex = index
}
}

View File

@ -0,0 +1,7 @@
import QtQuick 2.15
QtObject {
property string title
signal tap
signal repTap
}

View File

@ -0,0 +1,5 @@
import QtQuick 2.15
QtObject {
property string title
}

View File

@ -0,0 +1,5 @@
import QtQuick 2.15
QtObject {
}

View File

@ -0,0 +1,34 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
Item {
id:root
property alias title: text_title.text
default property alias content: container.data
property int spacing : 5
FluText{
id:text_title
fontStyle: FluText.TitleLarge
}
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
anchors{
top: text_title.bottom
bottom: parent.bottom
}
ColumnLayout{
id:container
spacing: root.spacing
width: parent.width
}
}
}

View File

@ -5,9 +5,8 @@ import QtQuick.Controls 2.15
import FluentUI 1.0
import QtGraphicalEffects 1.15
Rectangle {
Item {
id:root
color: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
enum TreeViewSelectionMode {
None,
@ -101,12 +100,12 @@ Rectangle {
if(item_layout.singleSelected && selectionMode === FluTreeView.Single){
return Qt.rgba(62/255,62/255,62/255,1)
}
return (item_layout_mouse.containsMouse || item_layout_expanded.hovered || item_layout_checkbox.hovered)?Qt.rgba(62/255,62/255,62/255,1):Qt.rgba(50/255,50/255,50/255,1)
return (item_layout_mouse.containsMouse || item_layout_expanded.hovered || item_layout_checkbox.hovered)?Qt.rgba(62/255,62/255,62/255,1):Qt.rgba(0,0,0,0)
}else{
if(item_layout.singleSelected && selectionMode === FluTreeView.Single){
return Qt.rgba(244/255,244/255,244/255,1)
return Qt.rgba(0,0,0,0.06)
}
return (item_layout_mouse.containsMouse || item_layout_expanded.hovered || item_layout_checkbox.hovered)?Qt.rgba(244/255,244/255,244/255,1):Qt.rgba(253/255,253/255,253/255,1)
return (item_layout_mouse.containsMouse || item_layout_expanded.hovered || item_layout_checkbox.hovered)?Qt.rgba(0,0,0,0.03):Qt.rgba(0,0,0,0)
}
}

View File

@ -60,6 +60,7 @@ Item {
color:root.color
anchors.fill: parent
anchors.margins: borderless
clip: true
Behavior on color{
ColorAnimation {
duration: 300

View File

@ -36,5 +36,12 @@
<file>controls/FluTreeView.qml</file>
<file>controls/FluExpander.qml</file>
<file>controls/FluAutoSuggestBox.qml</file>
<file>controls/FluNavigationView.qml</file>
<file>controls/FluPaneItem.qml</file>
<file>controls/FluPaneItemHeader.qml</file>
<file>controls/FluPaneItemSeparator.qml</file>
<file>controls/FluScrollablePage.qml</file>
<file>controls/FluContentPage.qml</file>
<file>controls/FluArea.qml</file>
</qresource>
</RCC>