mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-27 05:38:37 +08:00
update
This commit is contained in:
zhuzihcu
parent
d835b7c23d
commit
bcc5d433a9
@ -34,7 +34,7 @@ FluWindow {
|
|||||||
fontStyle: FluText.Title
|
fontStyle: FluText.Title
|
||||||
}
|
}
|
||||||
FluText{
|
FluText{
|
||||||
text:"v1.0.2"
|
text:"v1.0.3"
|
||||||
fontStyle: FluText.Body
|
fontStyle: FluText.Body
|
||||||
Layout.alignment: Qt.AlignBottom
|
Layout.alignment: Qt.AlignBottom
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,184 +17,164 @@ FluWindow {
|
|||||||
FluAppBar{
|
FluAppBar{
|
||||||
id:appbar
|
id:appbar
|
||||||
title: "FluentUI"
|
title: "FluentUI"
|
||||||
showDark: true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ListModel{
|
|
||||||
id:nav_items
|
FluObject{
|
||||||
ListElement{
|
id:original_items
|
||||||
text:"Buttons"
|
|
||||||
page:"qrc:/T_Buttons.qml"
|
FluPaneItemHeader{
|
||||||
|
title:"Inputs"
|
||||||
}
|
}
|
||||||
ListElement{
|
|
||||||
text:"TextBox"
|
FluPaneItem{
|
||||||
page:"qrc:/T_TextBox.qml"
|
title:"Buttons"
|
||||||
|
onTap:{
|
||||||
|
nav_view.push("qrc:/T_Buttons.qml")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ListElement{
|
|
||||||
text:"ToggleSwitch"
|
FluPaneItem{
|
||||||
page:"qrc:/T_ToggleSwitch.qml"
|
title:"Slider"
|
||||||
|
onTap:{
|
||||||
|
nav_view.push("qrc:/T_Slider.qml")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ListElement{
|
|
||||||
text:"Slider"
|
FluPaneItem{
|
||||||
page:"qrc:/T_Slider.qml"
|
title:"ToggleSwitch"
|
||||||
|
onTap:{
|
||||||
|
nav_view.push("qrc:/T_ToggleSwitch.qml")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ListElement{
|
|
||||||
text:"InfoBar"
|
FluPaneItemHeader{
|
||||||
page:"qrc:/T_InfoBar.qml"
|
title:"Form"
|
||||||
}
|
}
|
||||||
ListElement{
|
|
||||||
text:"Dialog"
|
FluPaneItem{
|
||||||
page:"qrc:/T_Dialog.qml"
|
title:"TextBox"
|
||||||
|
onTap:{
|
||||||
|
nav_view.push("qrc:/T_TextBox.qml")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ListElement{
|
|
||||||
text:"Progress"
|
FluPaneItemHeader{
|
||||||
page:"qrc:/T_Progress.qml"
|
title:"Surface"
|
||||||
}
|
}
|
||||||
ListElement{
|
|
||||||
text:"Rectangle"
|
FluPaneItem{
|
||||||
page:"qrc:/T_Rectangle.qml"
|
title:"InfoBar"
|
||||||
|
onTap:{
|
||||||
|
nav_view.push("qrc:/T_InfoBar.qml")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ListElement{
|
|
||||||
text:"Expander"
|
FluPaneItem{
|
||||||
page:"qrc:/T_Expander.qml"
|
title:"Progress"
|
||||||
|
onTap:{
|
||||||
|
nav_view.push("qrc:/T_Progress.qml")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ListElement{
|
FluPaneItem{
|
||||||
text:"TreeView"
|
title:"Rectangle"
|
||||||
page:"qrc:/T_TreeView.qml"
|
onTap:{
|
||||||
|
nav_view.push("qrc:/T_Rectangle.qml")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ListElement{
|
FluPaneItem{
|
||||||
text:"Theme"
|
title:"Expander"
|
||||||
page:"qrc:/T_Theme.qml"
|
onTap:{
|
||||||
|
nav_view.push("qrc:/T_Expander.qml")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ListElement{
|
|
||||||
text:"Awesome"
|
FluPaneItemHeader{
|
||||||
page:"qrc:/T_Awesome.qml"
|
title:"Popus"
|
||||||
}
|
}
|
||||||
ListElement{
|
|
||||||
text:"Typography"
|
|
||||||
page:"qrc:/T_Typography.qml"
|
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")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluPaneItem{
|
||||||
|
title:"关于"
|
||||||
|
onTap:{
|
||||||
|
FluApp.navigate("/About")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluIconButton{
|
|
||||||
icon:FluentIcons.FA_navicon
|
FluNavigationView{
|
||||||
|
id:nav_view
|
||||||
anchors{
|
anchors{
|
||||||
|
top: appbar.bottom
|
||||||
left: parent.left
|
left: parent.left
|
||||||
bottom: parent.bottom
|
|
||||||
leftMargin: 12
|
|
||||||
bottomMargin: 12
|
|
||||||
}
|
|
||||||
FluMenu{
|
|
||||||
id:menu
|
|
||||||
x:40
|
|
||||||
margins:4
|
|
||||||
FluMenuItem{
|
|
||||||
text:"意见反馈"
|
|
||||||
onClicked:{
|
|
||||||
Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
FluMenuItem{
|
|
||||||
text:"关于"
|
|
||||||
onClicked:{
|
|
||||||
FluApp.navigate("/About")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
onClicked:{
|
|
||||||
menu.open()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ListView{
|
|
||||||
id:nav_list
|
|
||||||
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
|
right: parent.right
|
||||||
rightMargin: 10
|
|
||||||
bottom: parent.bottom
|
bottom: parent.bottom
|
||||||
bottomMargin: 20
|
|
||||||
}
|
}
|
||||||
border.width: 1
|
items:original_items
|
||||||
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
|
footerItems:footer_items
|
||||||
|
|
||||||
Loader{
|
Component.onCompleted: {
|
||||||
anchors.fill: parent
|
nav_view.setCurrentIndex(1)
|
||||||
anchors.margins:20
|
nav_view.push("qrc:/T_Buttons.qml")
|
||||||
source: nav_items.get(nav_list.currentIndex).page
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,20 +4,19 @@ import QtQuick.Layouts 1.15
|
|||||||
import QtQuick.Window 2.15
|
import QtQuick.Window 2.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluContentPage {
|
||||||
FluText{
|
|
||||||
id:title
|
title:"Awesome"
|
||||||
text:"Awesome"
|
|
||||||
fontStyle: FluText.TitleLarge
|
|
||||||
}
|
|
||||||
FluTextBox{
|
FluTextBox{
|
||||||
id:text_box
|
id:text_box
|
||||||
placeholderText: "请输入关键字"
|
placeholderText: "请输入关键字"
|
||||||
anchors{
|
anchors{
|
||||||
topMargin: 20
|
topMargin: 20
|
||||||
top:title.bottom
|
top:parent.top
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluFilledButton{
|
FluFilledButton{
|
||||||
text:"搜索"
|
text:"搜索"
|
||||||
anchors{
|
anchors{
|
||||||
|
|||||||
@ -2,154 +2,182 @@
|
|||||||
import QtQuick.Layouts 1.15
|
import QtQuick.Layouts 1.15
|
||||||
import QtQuick.Window 2.15
|
import QtQuick.Window 2.15
|
||||||
import QtQuick.Controls 2.15
|
import QtQuick.Controls 2.15
|
||||||
import QtGraphicalEffects 1.15
|
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluScrollablePage{
|
||||||
width: parent.width
|
title:"Buttons"
|
||||||
FluText{
|
|
||||||
id:title
|
spacing: 20
|
||||||
text:"Buttons"
|
|
||||||
fontStyle: FluText.TitleLarge
|
FluArea{
|
||||||
}
|
Layout.topMargin: 20
|
||||||
ScrollView{
|
|
||||||
clip: true
|
|
||||||
width: parent.width
|
width: parent.width
|
||||||
contentWidth: parent.width
|
height: 68
|
||||||
anchors{
|
paddings: 10
|
||||||
top: title.bottom
|
|
||||||
bottom: parent.bottom
|
FluButton{
|
||||||
|
disabled:button_switch.checked
|
||||||
|
onClicked: {
|
||||||
|
showInfo("点击StandardButton")
|
||||||
|
}
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ColumnLayout{
|
|
||||||
|
Row{
|
||||||
spacing: 5
|
spacing: 5
|
||||||
width: parent.width
|
anchors{
|
||||||
RowLayout{
|
verticalCenter: parent.verticalCenter
|
||||||
Layout.topMargin: 20
|
right: parent.right
|
||||||
width: parent.width
|
|
||||||
FluButton{
|
|
||||||
disabled:button_switch.checked
|
|
||||||
onClicked: {
|
|
||||||
showInfo("点击StandardButton")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Item{
|
|
||||||
height: 1
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
FluToggleSwitch{
|
|
||||||
id:button_switch
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
}
|
|
||||||
FluText{
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
FluDivider{
|
FluToggleSwitch{
|
||||||
Layout.fillWidth: true ; height:1;
|
id:button_switch
|
||||||
|
Layout.alignment: Qt.AlignRight
|
||||||
}
|
}
|
||||||
RowLayout{
|
FluText{
|
||||||
Layout.topMargin: 20
|
text:"Disabled"
|
||||||
width: parent.width
|
}
|
||||||
FluFilledButton{
|
}
|
||||||
disabled:filled_button_switch.checked
|
}
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
width: parent.width
|
||||||
|
height: 68
|
||||||
|
paddings: 10
|
||||||
|
|
||||||
|
FluFilledButton{
|
||||||
|
disabled:filled_button_switch.checked
|
||||||
|
onClicked: {
|
||||||
|
showWarning("点击FilledButton")
|
||||||
|
}
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Row{
|
||||||
|
spacing: 5
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
|
id:filled_button_switch
|
||||||
|
Layout.alignment: Qt.AlignRight
|
||||||
|
}
|
||||||
|
FluText{
|
||||||
|
text:"Disabled"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Row{
|
||||||
|
spacing: 5
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
|
id:icon_button_switch
|
||||||
|
Layout.alignment: Qt.AlignRight
|
||||||
|
}
|
||||||
|
FluText{
|
||||||
|
text:"Disabled"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
model: 3
|
||||||
|
delegate: FluRadioButton{
|
||||||
|
checked : repeater.selecIndex===index
|
||||||
|
disabled:radio_button_switch.checked
|
||||||
|
text:"Radio Button_"+index
|
||||||
onClicked:{
|
onClicked:{
|
||||||
showWarning("点击FilledButton")
|
repeater.selecIndex = index
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Item{
|
|
||||||
height: 1
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
FluToggleSwitch{
|
|
||||||
id:filled_button_switch
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
}
|
|
||||||
FluText{
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
FluDivider{
|
}
|
||||||
Layout.fillWidth: true ; height:1
|
|
||||||
|
|
||||||
|
Row{
|
||||||
|
spacing: 5
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
right: parent.right
|
||||||
}
|
}
|
||||||
RowLayout{
|
FluToggleSwitch{
|
||||||
Layout.topMargin: 20
|
id:radio_button_switch
|
||||||
width: parent.width
|
Layout.alignment: Qt.AlignRight
|
||||||
FluIconButton{
|
|
||||||
icon:FluentIcons.FA_close
|
|
||||||
disabled:icon_button_switch.checked
|
|
||||||
onClicked:{
|
|
||||||
showSuccess("点击IconButton")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Item{
|
|
||||||
height: 1
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
FluToggleSwitch{
|
|
||||||
id:icon_button_switch
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
}
|
|
||||||
FluText{
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
FluDivider{
|
FluText{
|
||||||
Layout.fillWidth: true ; height:1
|
text:"Disabled"
|
||||||
}
|
}
|
||||||
RowLayout{
|
}
|
||||||
Layout.topMargin: 20
|
}
|
||||||
width: parent.width
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 8
|
FluArea{
|
||||||
Repeater{
|
width: parent.width
|
||||||
id:repeater
|
height: 68
|
||||||
property int selecIndex : 0
|
paddings: 10
|
||||||
model: 3
|
|
||||||
delegate: FluRadioButton{
|
FluCheckBox{
|
||||||
checked : repeater.selecIndex===index
|
disabled:icon_button_check.checked
|
||||||
disabled:radio_button_switch.checked
|
anchors{
|
||||||
text:"Radio Button_"+index
|
verticalCenter: parent.verticalCenter
|
||||||
onClicked:{
|
left: parent.left
|
||||||
repeater.selecIndex = index
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Item{
|
|
||||||
height: 1
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
FluToggleSwitch{
|
|
||||||
id:radio_button_switch
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
}
|
|
||||||
FluText{
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
FluDivider{
|
}
|
||||||
Layout.fillWidth: true ; height:1
|
|
||||||
|
|
||||||
|
Row{
|
||||||
|
spacing: 5
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
right: parent.right
|
||||||
}
|
}
|
||||||
RowLayout{
|
FluToggleSwitch{
|
||||||
Layout.topMargin: 20
|
id:icon_button_check
|
||||||
width: parent.width
|
Layout.alignment: Qt.AlignRight
|
||||||
FluCheckBox{
|
|
||||||
disabled:icon_button_check.checked
|
|
||||||
}
|
|
||||||
Item{
|
|
||||||
height: 1
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
FluToggleSwitch{
|
|
||||||
id:icon_button_check
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
}
|
|
||||||
FluText{
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
FluDivider{
|
FluText{
|
||||||
Layout.fillWidth: true ; height:1
|
text:"Disabled"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,13 +5,8 @@ import QtQuick.Controls 2.15
|
|||||||
import QtGraphicalEffects 1.15
|
import QtGraphicalEffects 1.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluScrollablePage{
|
||||||
|
title:"Dialog"
|
||||||
FluText{
|
|
||||||
id:title
|
|
||||||
text:"Dialog"
|
|
||||||
fontStyle: FluText.TitleLarge
|
|
||||||
}
|
|
||||||
|
|
||||||
FluContentDialog{
|
FluContentDialog{
|
||||||
id:dialog
|
id:dialog
|
||||||
@ -27,25 +22,11 @@ Item {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
FluButton{
|
||||||
|
Layout.topMargin: 20
|
||||||
ScrollView{
|
text:"Show Dialog"
|
||||||
clip: true
|
onClicked: {
|
||||||
width: parent.width
|
dialog.open()
|
||||||
contentWidth: parent.width
|
|
||||||
anchors{
|
|
||||||
top: title.bottom
|
|
||||||
bottom: parent.bottom
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 5
|
|
||||||
FluButton{
|
|
||||||
Layout.topMargin: 20
|
|
||||||
text:"Show Dialog"
|
|
||||||
onClicked: {
|
|
||||||
dialog.open()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,72 +5,54 @@ import QtQuick.Window 2.15
|
|||||||
import QtGraphicalEffects 1.15
|
import QtGraphicalEffects 1.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluScrollablePage{
|
||||||
FluText{
|
title:"Expander"
|
||||||
id:title
|
|
||||||
text:"Expander"
|
FluExpander{
|
||||||
fontStyle: FluText.TitleLarge
|
headerText:"打开一个单选框"
|
||||||
}
|
Layout.topMargin: 20
|
||||||
ScrollView{
|
Item{
|
||||||
clip: true
|
anchors.fill: parent
|
||||||
width: parent.width
|
ColumnLayout{
|
||||||
contentWidth: parent.width
|
spacing: 8
|
||||||
anchors{
|
anchors{
|
||||||
top: title.bottom
|
top: parent.top
|
||||||
bottom: parent.bottom
|
left: parent.left
|
||||||
}
|
topMargin: 15
|
||||||
Column{
|
leftMargin: 15
|
||||||
spacing: 5
|
}
|
||||||
Item{
|
Repeater{
|
||||||
width: 1
|
id:repeater
|
||||||
height: 20
|
property int selecIndex : 0
|
||||||
}
|
model: 3
|
||||||
FluExpander{
|
delegate: FluRadioButton{
|
||||||
headerText:"打开一个单选框"
|
checked : repeater.selecIndex===index
|
||||||
Item{
|
text:"Radio Button_"+index
|
||||||
anchors.fill: parent
|
onClicked:{
|
||||||
ColumnLayout{
|
repeater.selecIndex = index
|
||||||
spacing: 8
|
|
||||||
anchors{
|
|
||||||
top: parent.top
|
|
||||||
left: parent.left
|
|
||||||
topMargin: 15
|
|
||||||
leftMargin: 15
|
|
||||||
}
|
|
||||||
Repeater{
|
|
||||||
id:repeater
|
|
||||||
property int selecIndex : 0
|
|
||||||
model: 3
|
|
||||||
delegate: FluRadioButton{
|
|
||||||
checked : repeater.selecIndex===index
|
|
||||||
text:"Radio Button_"+index
|
|
||||||
onClicked:{
|
|
||||||
repeater.selecIndex = index
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
FluExpander{
|
FluExpander{
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
headerText:"打开一个滑动文本框"
|
headerText:"打开一个滑动文本框"
|
||||||
Item{
|
Item{
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
ScrollView{
|
ScrollView{
|
||||||
id:scrollview
|
id:scrollview
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: parent.height
|
height: parent.height
|
||||||
contentWidth: parent.width
|
contentWidth: parent.width
|
||||||
FluText{
|
FluText{
|
||||||
id:test
|
id:test
|
||||||
width: scrollview.width
|
width: scrollview.width
|
||||||
wrapMode: Text.WrapAnywhere
|
wrapMode: Text.WrapAnywhere
|
||||||
padding: 14
|
padding: 14
|
||||||
text:"先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。"
|
text:"先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。"
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,51 +5,35 @@ import QtQuick.Controls 2.15
|
|||||||
import QtGraphicalEffects 1.15
|
import QtGraphicalEffects 1.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluScrollablePage{
|
||||||
FluText{
|
title:"InfoBar"
|
||||||
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
|
|
||||||
|
|
||||||
FluButton{
|
FluButton{
|
||||||
text:"Info"
|
text:"Info"
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showInfo("这是一个Info样式的InfoBar")
|
showInfo("这是一个Info样式的InfoBar")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluButton{
|
FluButton{
|
||||||
text:"Warning"
|
text:"Warning"
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showWarning("这是一个Warning样式的InfoBar")
|
showWarning("这是一个Warning样式的InfoBar")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluButton{
|
FluButton{
|
||||||
text:"Error"
|
text:"Error"
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showError("这是一个Error样式的InfoBar")
|
showError("这是一个Error样式的InfoBar")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluButton{
|
FluButton{
|
||||||
text:"Success"
|
text:"Success"
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
|
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,47 +5,32 @@ import QtQuick.Controls 2.15
|
|||||||
import QtGraphicalEffects 1.15
|
import QtGraphicalEffects 1.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluScrollablePage{
|
||||||
FluText{
|
title:"Progress"
|
||||||
id:title
|
|
||||||
text:"Progress"
|
FluProgressBar{
|
||||||
fontStyle: FluText.TitleLarge
|
Layout.topMargin: 20
|
||||||
}
|
}
|
||||||
ScrollView{
|
FluProgressRing{
|
||||||
clip: true
|
Layout.topMargin: 10
|
||||||
width: parent.width
|
}
|
||||||
contentWidth: parent.width
|
FluProgressBar{
|
||||||
anchors{
|
id:progress_bar
|
||||||
top: title.bottom
|
Layout.topMargin: 20
|
||||||
bottom: parent.bottom
|
indeterminate: false
|
||||||
}
|
}
|
||||||
ColumnLayout{
|
FluProgressRing{
|
||||||
spacing: 5
|
id:progress_ring
|
||||||
FluProgressBar{
|
Layout.topMargin: 10
|
||||||
Layout.topMargin: 20
|
indeterminate: false
|
||||||
}
|
}
|
||||||
FluProgressRing{
|
FluSlider{
|
||||||
Layout.topMargin: 10
|
Layout.topMargin: 30
|
||||||
}
|
value:50
|
||||||
FluProgressBar{
|
onValueChanged:{
|
||||||
id:progress_bar
|
progress_bar.progress = value/100
|
||||||
Layout.topMargin: 20
|
progress_ring.progress = value/100
|
||||||
indeterminate: false
|
|
||||||
}
|
|
||||||
FluProgressRing{
|
|
||||||
id:progress_ring
|
|
||||||
Layout.topMargin: 10
|
|
||||||
indeterminate: false
|
|
||||||
}
|
|
||||||
FluSlider{
|
|
||||||
Layout.topMargin: 30
|
|
||||||
value:50
|
|
||||||
onValueChanged:{
|
|
||||||
progress_bar.progress = value/100
|
|
||||||
progress_ring.progress = value/100
|
|
||||||
}
|
|
||||||
Layout.bottomMargin: 30
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
Layout.bottomMargin: 30
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,127 +5,110 @@ import QtQuick.Window 2.15
|
|||||||
import QtGraphicalEffects 1.15
|
import QtGraphicalEffects 1.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluScrollablePage{
|
||||||
FluText{
|
title:"Rectangle"
|
||||||
id:title
|
|
||||||
text:"Rectangle"
|
RowLayout{
|
||||||
fontStyle: FluText.TitleLarge
|
Layout.topMargin: 20
|
||||||
|
FluRectangle{
|
||||||
|
width: 50
|
||||||
|
height: 50
|
||||||
|
color:"#0078d4"
|
||||||
|
radius:[0,0,0,0]
|
||||||
|
}
|
||||||
|
FluRectangle{
|
||||||
|
width: 50
|
||||||
|
height: 50
|
||||||
|
color:"#744da9"
|
||||||
|
radius:[15,15,15,15]
|
||||||
|
}
|
||||||
|
FluRectangle{
|
||||||
|
width: 50
|
||||||
|
height: 50
|
||||||
|
color:"#ffeb3b"
|
||||||
|
radius:[15,0,0,0]
|
||||||
|
}
|
||||||
|
FluRectangle{
|
||||||
|
width: 50
|
||||||
|
height: 50
|
||||||
|
color:"#f7630c"
|
||||||
|
radius:[0,15,0,0]
|
||||||
|
}
|
||||||
|
FluRectangle{
|
||||||
|
width: 50
|
||||||
|
height: 50
|
||||||
|
color:"#e71123"
|
||||||
|
radius:[0,0,15,0]
|
||||||
|
}
|
||||||
|
FluRectangle{
|
||||||
|
width: 50
|
||||||
|
height: 50
|
||||||
|
color:"#b4009e"
|
||||||
|
radius:[0,0,0,15]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ScrollView{
|
FluText{
|
||||||
clip: true
|
text:"配合图片使用"
|
||||||
width: parent.width
|
fontStyle: FluText.Subtitle
|
||||||
contentWidth: parent.width
|
Layout.topMargin: 20
|
||||||
anchors{
|
}
|
||||||
top: title.bottom
|
RowLayout{
|
||||||
bottom: parent.bottom
|
spacing: 14
|
||||||
}
|
FluRectangle{
|
||||||
ColumnLayout{
|
width: 50
|
||||||
spacing: 5
|
height: 50
|
||||||
width: parent.width
|
radius:[25,0,25,25]
|
||||||
height: parent.height
|
Image {
|
||||||
RowLayout{
|
asynchronous: true
|
||||||
Layout.topMargin: 20
|
anchors.fill: parent
|
||||||
FluRectangle{
|
source: "qrc:/res/svg/avatar_1.svg"
|
||||||
width: 50
|
sourceSize: Qt.size(width,height)
|
||||||
height: 50
|
|
||||||
color:"#0078d4"
|
|
||||||
radius:[0,0,0,0]
|
|
||||||
}
|
|
||||||
FluRectangle{
|
|
||||||
width: 50
|
|
||||||
height: 50
|
|
||||||
color:"#744da9"
|
|
||||||
radius:[15,15,15,15]
|
|
||||||
}
|
|
||||||
FluRectangle{
|
|
||||||
width: 50
|
|
||||||
height: 50
|
|
||||||
color:"#ffeb3b"
|
|
||||||
radius:[15,0,0,0]
|
|
||||||
}
|
|
||||||
FluRectangle{
|
|
||||||
width: 50
|
|
||||||
height: 50
|
|
||||||
color:"#f7630c"
|
|
||||||
radius:[0,15,0,0]
|
|
||||||
}
|
|
||||||
FluRectangle{
|
|
||||||
width: 50
|
|
||||||
height: 50
|
|
||||||
color:"#e71123"
|
|
||||||
radius:[0,0,15,0]
|
|
||||||
}
|
|
||||||
FluRectangle{
|
|
||||||
width: 50
|
|
||||||
height: 50
|
|
||||||
color:"#b4009e"
|
|
||||||
radius:[0,0,0,15]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
FluText{
|
|
||||||
text:"配合图片使用"
|
|
||||||
fontStyle: FluText.Subtitle
|
|
||||||
Layout.topMargin: 20
|
|
||||||
}
|
|
||||||
RowLayout{
|
|
||||||
spacing: 14
|
|
||||||
FluRectangle{
|
|
||||||
width: 50
|
|
||||||
height: 50
|
|
||||||
radius:[25,0,25,25]
|
|
||||||
Image {
|
|
||||||
asynchronous: true
|
|
||||||
anchors.fill: parent
|
|
||||||
source: "qrc:/res/svg/avatar_1.svg"
|
|
||||||
sourceSize: Qt.size(width,height)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
FluRectangle{
|
|
||||||
width: 50
|
|
||||||
height: 50
|
|
||||||
radius:[10,10,10,10]
|
|
||||||
Image {
|
|
||||||
asynchronous: true
|
|
||||||
anchors.fill: parent
|
|
||||||
sourceSize: Qt.size(width,height)
|
|
||||||
source: "qrc:/res/svg/avatar_2.svg"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
FluRectangle{
|
|
||||||
width: 50
|
|
||||||
height: 50
|
|
||||||
radius:[25,25,25,25]
|
|
||||||
Image {
|
|
||||||
asynchronous: true
|
|
||||||
anchors.fill: parent
|
|
||||||
sourceSize: Qt.size(width,height)
|
|
||||||
source: "qrc:/res/svg/avatar_3.svg"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
FluRectangle{
|
|
||||||
width: 50
|
|
||||||
height: 50
|
|
||||||
radius:[0,25,25,25]
|
|
||||||
Image {
|
|
||||||
asynchronous: true
|
|
||||||
anchors.fill: parent
|
|
||||||
sourceSize: Qt.size(width,height)
|
|
||||||
source: "qrc:/res/svg/avatar_4.svg"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
FluRectangle{
|
|
||||||
width: 1080/5
|
|
||||||
height: 1439/5
|
|
||||||
radius:[25,25,25,25]
|
|
||||||
Image {
|
|
||||||
asynchronous: true
|
|
||||||
source: "qrc:/res/image/image_huoyin.webp"
|
|
||||||
anchors.fill: parent
|
|
||||||
sourceSize: Qt.size(width,height)
|
|
||||||
}
|
|
||||||
Layout.topMargin: 10
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluRectangle{
|
||||||
|
width: 50
|
||||||
|
height: 50
|
||||||
|
radius:[10,10,10,10]
|
||||||
|
Image {
|
||||||
|
asynchronous: true
|
||||||
|
anchors.fill: parent
|
||||||
|
sourceSize: Qt.size(width,height)
|
||||||
|
source: "qrc:/res/svg/avatar_2.svg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluRectangle{
|
||||||
|
width: 50
|
||||||
|
height: 50
|
||||||
|
radius:[25,25,25,25]
|
||||||
|
Image {
|
||||||
|
asynchronous: true
|
||||||
|
anchors.fill: parent
|
||||||
|
sourceSize: Qt.size(width,height)
|
||||||
|
source: "qrc:/res/svg/avatar_3.svg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluRectangle{
|
||||||
|
width: 50
|
||||||
|
height: 50
|
||||||
|
radius:[0,25,25,25]
|
||||||
|
Image {
|
||||||
|
asynchronous: true
|
||||||
|
anchors.fill: parent
|
||||||
|
sourceSize: Qt.size(width,height)
|
||||||
|
source: "qrc:/res/svg/avatar_4.svg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluRectangle{
|
||||||
|
width: 1080/5
|
||||||
|
height: 1439/5
|
||||||
|
radius:[25,25,25,25]
|
||||||
|
Image {
|
||||||
|
asynchronous: true
|
||||||
|
source: "qrc:/res/image/image_huoyin.webp"
|
||||||
|
anchors.fill: parent
|
||||||
|
sourceSize: Qt.size(width,height)
|
||||||
|
}
|
||||||
|
Layout.topMargin: 10
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,33 +5,19 @@ import QtQuick.Controls 2.15
|
|||||||
import QtGraphicalEffects 1.15
|
import QtGraphicalEffects 1.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluScrollablePage{
|
||||||
FluText{
|
|
||||||
id:title
|
title:"Slider"
|
||||||
text:"Slider"
|
|
||||||
fontStyle: FluText.TitleLarge
|
FluSlider{
|
||||||
|
Layout.topMargin: 20
|
||||||
|
Layout.leftMargin: 15
|
||||||
|
value: 50
|
||||||
}
|
}
|
||||||
ScrollView{
|
FluSlider{
|
||||||
clip: true
|
orientation:FluSlider.Vertical
|
||||||
width: parent.width
|
Layout.topMargin: 20
|
||||||
contentWidth: parent.width
|
Layout.leftMargin: 15
|
||||||
anchors{
|
value: 50
|
||||||
top: title.bottom
|
|
||||||
bottom: parent.bottom
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 5
|
|
||||||
FluSlider{
|
|
||||||
Layout.topMargin: 20
|
|
||||||
Layout.leftMargin: 15
|
|
||||||
value: 50
|
|
||||||
}
|
|
||||||
FluSlider{
|
|
||||||
orientation:FluSlider.Vertical
|
|
||||||
Layout.topMargin: 20
|
|
||||||
Layout.leftMargin: 15
|
|
||||||
value: 50
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,58 +5,44 @@ import QtQuick.Window 2.15
|
|||||||
import QtGraphicalEffects 1.15
|
import QtGraphicalEffects 1.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluScrollablePage{
|
||||||
FluText{
|
|
||||||
id:title
|
title:"TextBox"
|
||||||
text:"TextBox"
|
|
||||||
fontStyle: FluText.TitleLarge
|
FluTextBox{
|
||||||
|
Layout.topMargin: 20
|
||||||
|
placeholderText: "单行输入框"
|
||||||
|
Layout.preferredWidth: 300
|
||||||
}
|
}
|
||||||
ScrollView{
|
FluMultiLineTextBox{
|
||||||
clip: true
|
Layout.topMargin: 20
|
||||||
width: parent.width
|
Layout.preferredWidth: 300
|
||||||
contentWidth: parent.width
|
placeholderText: "多行输入框"
|
||||||
anchors{
|
}
|
||||||
top: title.bottom
|
FluAutoSuggestBox{
|
||||||
bottom: parent.bottom
|
Layout.topMargin: 20
|
||||||
}
|
values:generateRandomNames(100)
|
||||||
ColumnLayout{
|
placeholderText: "AutoSuggestBox"
|
||||||
spacing: 5
|
Layout.preferredWidth: 300
|
||||||
FluTextBox{
|
|
||||||
Layout.topMargin: 20
|
|
||||||
placeholderText: "单行输入框"
|
|
||||||
Layout.preferredWidth: 300
|
|
||||||
}
|
|
||||||
FluMultiLineTextBox{
|
|
||||||
Layout.topMargin: 20
|
|
||||||
Layout.preferredWidth: 300
|
|
||||||
placeholderText: "多行输入框"
|
|
||||||
}
|
|
||||||
FluAutoSuggestBox{
|
|
||||||
Layout.topMargin: 20
|
|
||||||
values:generateRandomNames(100)
|
|
||||||
placeholderText: "AutoSuggestBox"
|
|
||||||
Layout.preferredWidth: 300
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function generateRandomNames(numNames) {
|
function generateRandomNames(numNames) {
|
||||||
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||||
const names = [];
|
const names = [];
|
||||||
function generateRandomName() {
|
function generateRandomName() {
|
||||||
const nameLength = Math.floor(Math.random() * 5) + 4;
|
const nameLength = Math.floor(Math.random() * 5) + 4;
|
||||||
let name = '';
|
let name = '';
|
||||||
for (let i = 0; i < nameLength; i++) {
|
for (let i = 0; i < nameLength; i++) {
|
||||||
const letterIndex = Math.floor(Math.random() * 26);
|
const letterIndex = Math.floor(Math.random() * 26);
|
||||||
name += alphabet.charAt(letterIndex);
|
name += alphabet.charAt(letterIndex);
|
||||||
|
}
|
||||||
|
return name;
|
||||||
}
|
}
|
||||||
return name;
|
for (let i = 0; i < numNames; i++) {
|
||||||
}
|
const name = generateRandomName();
|
||||||
for (let i = 0; i < numNames; i++) {
|
names.push(name);
|
||||||
const name = generateRandomName();
|
}
|
||||||
names.push(name);
|
return names;
|
||||||
}
|
|
||||||
return names;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -5,71 +5,57 @@ import QtQuick.Controls 2.15
|
|||||||
import QtGraphicalEffects 1.15
|
import QtGraphicalEffects 1.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluScrollablePage{
|
||||||
FluText{
|
|
||||||
id:title
|
title:"Theme"
|
||||||
text:"Theme"
|
|
||||||
fontStyle: FluText.TitleLarge
|
RowLayout{
|
||||||
}
|
Layout.topMargin: 20
|
||||||
ScrollView{
|
Repeater{
|
||||||
clip: true
|
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||||
width: parent.width
|
delegate: Rectangle{
|
||||||
contentWidth: parent.width
|
width: 42
|
||||||
anchors{
|
height: 42
|
||||||
top: title.bottom
|
radius: 4
|
||||||
bottom: parent.bottom
|
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
|
||||||
}
|
FluIcon {
|
||||||
ColumnLayout{
|
anchors.centerIn: parent
|
||||||
spacing: 5
|
icon: FluentIcons.FA_check
|
||||||
RowLayout{
|
iconSize: 15
|
||||||
Layout.topMargin: 20
|
visible: modelData === FluTheme.primaryColor
|
||||||
Repeater{
|
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||||
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
}
|
||||||
delegate: Rectangle{
|
MouseArea{
|
||||||
width: 42
|
id:mouse_item
|
||||||
height: 42
|
anchors.fill: parent
|
||||||
radius: 4
|
hoverEnabled: true
|
||||||
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
|
onClicked: {
|
||||||
FluIcon {
|
FluTheme.primaryColor = modelData
|
||||||
anchors.centerIn: parent
|
|
||||||
icon: FluentIcons.FA_check
|
|
||||||
iconSize: 15
|
|
||||||
visible: modelData === FluTheme.primaryColor
|
|
||||||
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
|
||||||
}
|
|
||||||
MouseArea{
|
|
||||||
id:mouse_item
|
|
||||||
anchors.fill: parent
|
|
||||||
hoverEnabled: true
|
|
||||||
onClicked: {
|
|
||||||
FluTheme.primaryColor = modelData
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluText{
|
}
|
||||||
text:"夜间模式"
|
}
|
||||||
fontStyle: FluText.Subtitle
|
FluText{
|
||||||
Layout.topMargin: 20
|
text:"夜间模式"
|
||||||
}
|
fontStyle: FluText.Subtitle
|
||||||
FluToggleSwitch{
|
Layout.topMargin: 20
|
||||||
checked: FluTheme.isDark
|
}
|
||||||
onClickFunc:function(){
|
FluToggleSwitch{
|
||||||
FluTheme.isDark = !FluTheme.isDark
|
checked: FluTheme.isDark
|
||||||
}
|
onClickFunc:function(){
|
||||||
}
|
FluTheme.isDark = !FluTheme.isDark
|
||||||
FluText{
|
}
|
||||||
text:"无边框"
|
}
|
||||||
fontStyle: FluText.Subtitle
|
FluText{
|
||||||
Layout.topMargin: 20
|
text:"无边框"
|
||||||
}
|
fontStyle: FluText.Subtitle
|
||||||
FluToggleSwitch{
|
Layout.topMargin: 20
|
||||||
checked: FluTheme.isFrameless
|
}
|
||||||
onClickFunc:function(){
|
FluToggleSwitch{
|
||||||
FluTheme.isFrameless = !FluTheme.isFrameless
|
checked: FluTheme.isFrameless
|
||||||
}
|
onClickFunc:function(){
|
||||||
}
|
FluTheme.isFrameless = !FluTheme.isFrameless
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,26 +5,11 @@ import QtQuick.Controls 2.15
|
|||||||
import QtGraphicalEffects 1.15
|
import QtGraphicalEffects 1.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluScrollablePage{
|
||||||
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
|
|
||||||
FluToggleSwitch{
|
|
||||||
Layout.topMargin: 20
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
title:"ToggleSwitch"
|
||||||
|
|
||||||
|
FluToggleSwitch{
|
||||||
|
Layout.topMargin: 20
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,15 +2,11 @@
|
|||||||
import QtQuick.Layouts 1.15
|
import QtQuick.Layouts 1.15
|
||||||
import QtQuick.Window 2.15
|
import QtQuick.Window 2.15
|
||||||
import QtQuick.Controls 2.15
|
import QtQuick.Controls 2.15
|
||||||
import QtGraphicalEffects 1.15
|
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluContentPage {
|
||||||
FluText{
|
|
||||||
id:title
|
title:"TreeView"
|
||||||
text:"TreeView"
|
|
||||||
fontStyle: FluText.TitleLarge
|
|
||||||
}
|
|
||||||
|
|
||||||
function randomName() {
|
function randomName() {
|
||||||
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
|
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
|
||||||
@ -56,7 +52,7 @@ Item {
|
|||||||
id:tree_view
|
id:tree_view
|
||||||
width:240
|
width:240
|
||||||
anchors{
|
anchors{
|
||||||
top:title.bottom
|
top:parent.top
|
||||||
left:parent.left
|
left:parent.left
|
||||||
bottom:parent.bottom
|
bottom:parent.bottom
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,24 +3,15 @@ import QtQuick.Layouts 1.15
|
|||||||
import QtQuick.Controls 2.15
|
import QtQuick.Controls 2.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Item {
|
FluContentPage {
|
||||||
|
|
||||||
|
title: "Typography"
|
||||||
property int textSize: 13
|
property int textSize: 13
|
||||||
|
|
||||||
FluText{
|
|
||||||
id:title
|
|
||||||
text:"Typography"
|
|
||||||
fontStyle: FluText.TitleLarge
|
|
||||||
}
|
|
||||||
|
|
||||||
ScrollView{
|
ScrollView{
|
||||||
clip: true
|
clip: true
|
||||||
width: parent.width
|
width: parent.width
|
||||||
contentWidth: parent.width
|
contentWidth: parent.width
|
||||||
anchors{
|
|
||||||
top: title.bottom
|
|
||||||
bottom: parent.bottom
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
ColumnLayout{
|
||||||
spacing: 0
|
spacing: 0
|
||||||
FluText{
|
FluText{
|
||||||
@ -85,7 +76,7 @@ Item {
|
|||||||
topMargin: 30
|
topMargin: 30
|
||||||
}
|
}
|
||||||
onValueChanged:{
|
onValueChanged:{
|
||||||
textSize = value/100*16+8
|
textSize = value/100*16+8
|
||||||
}
|
}
|
||||||
value: 31
|
value: 31
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,6 @@
|
|||||||
<file>T_ToggleSwitch.qml</file>
|
<file>T_ToggleSwitch.qml</file>
|
||||||
<file>T_Typography.qml</file>
|
<file>T_Typography.qml</file>
|
||||||
<file>App.qml</file>
|
<file>App.qml</file>
|
||||||
<file>MainPage.qml</file>
|
|
||||||
<file>SettingPage.qml</file>
|
<file>SettingPage.qml</file>
|
||||||
<file>AboutPage.qml</file>
|
<file>AboutPage.qml</file>
|
||||||
<file>T_Buttons.qml</file>
|
<file>T_Buttons.qml</file>
|
||||||
@ -30,5 +29,6 @@
|
|||||||
<file>T_Dialog.qml</file>
|
<file>T_Dialog.qml</file>
|
||||||
<file>T_TreeView.qml</file>
|
<file>T_TreeView.qml</file>
|
||||||
<file>T_Expander.qml</file>
|
<file>T_Expander.qml</file>
|
||||||
|
<file>MainPage.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
|||||||
@ -33,6 +33,15 @@ void Fluent::registerTypes(const char *uri){
|
|||||||
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
|
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
|
||||||
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
|
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/FluAutoSuggestBox.qml"),uri,major,minor,"FluAutoSuggestBox");
|
||||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluExpander.qml"),uri,major,minor,"FluExpander");
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluExpander.qml"),uri,major,minor,"FluExpander");
|
||||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTreeView.qml"),uri,major,minor,"FluTreeView");
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTreeView.qml"),uri,major,minor,"FluTreeView");
|
||||||
|
|||||||
@ -14,7 +14,8 @@ Rectangle{
|
|||||||
return Window.window.active ? borerlessColor : Qt.lighter(borerlessColor,1.1)
|
return Window.window.active ? borerlessColor : Qt.lighter(borerlessColor,1.1)
|
||||||
}
|
}
|
||||||
visible: FluTheme.isFrameless
|
visible: FluTheme.isFrameless
|
||||||
height: visible ? 50 : 0
|
height: visible ? 34 : 0
|
||||||
|
|
||||||
width: {
|
width: {
|
||||||
if(parent==null)
|
if(parent==null)
|
||||||
return 200
|
return 200
|
||||||
@ -60,7 +61,7 @@ Rectangle{
|
|||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left: parent.left
|
left: parent.left
|
||||||
leftMargin: 14
|
leftMargin: 10
|
||||||
}
|
}
|
||||||
color:root.textColor
|
color:root.textColor
|
||||||
fontStyle: FluText.Title
|
fontStyle: FluText.Title
|
||||||
@ -69,14 +70,13 @@ Rectangle{
|
|||||||
}
|
}
|
||||||
|
|
||||||
RowLayout{
|
RowLayout{
|
||||||
anchors.right: parent.right;
|
anchors.right: parent.right
|
||||||
anchors.rightMargin: 10
|
height: 30
|
||||||
height: parent.height
|
spacing: 0
|
||||||
spacing: 5
|
|
||||||
|
|
||||||
TFpsMonitor{
|
TFpsMonitor{
|
||||||
Layout.alignment: Qt.AlignVCenter
|
Layout.alignment: Qt.AlignVCenter
|
||||||
Layout.rightMargin: 12
|
Layout.rightMargin: 20
|
||||||
Layout.topMargin: 5
|
Layout.topMargin: 5
|
||||||
color:root.textColor
|
color:root.textColor
|
||||||
visible: showFps
|
visible: showFps
|
||||||
@ -84,8 +84,9 @@ Rectangle{
|
|||||||
|
|
||||||
RowLayout{
|
RowLayout{
|
||||||
Layout.alignment: Qt.AlignVCenter
|
Layout.alignment: Qt.AlignVCenter
|
||||||
spacing: 5
|
Layout.rightMargin: 14
|
||||||
visible: showDark
|
visible: showDark
|
||||||
|
spacing: 5
|
||||||
FluText{
|
FluText{
|
||||||
text:"夜间模式"
|
text:"夜间模式"
|
||||||
color:root.textColor
|
color:root.textColor
|
||||||
|
|||||||
28
src/controls/FluArea.qml
Normal file
28
src/controls/FluArea.qml
Normal 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)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
29
src/controls/FluContentPage.qml
Normal file
29
src/controls/FluContentPage.qml
Normal 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
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -10,6 +10,8 @@ Item {
|
|||||||
id:root
|
id:root
|
||||||
height: layout_header.height + container.height
|
height: layout_header.height + container.height
|
||||||
width: 400
|
width: 400
|
||||||
|
implicitWidth: width
|
||||||
|
implicitHeight: height
|
||||||
|
|
||||||
property int contentHeight : 300
|
property int contentHeight : 300
|
||||||
|
|
||||||
|
|||||||
@ -14,9 +14,9 @@ Rectangle {
|
|||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
property bool hovered: button_mouse.containsMouse
|
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 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(50/255,50/255,50/255,1) : Qt.rgba(1,1,1,1)
|
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(1,1,1,1)
|
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0)
|
||||||
|
|
||||||
property color textColor: {
|
property color textColor: {
|
||||||
if(FluTheme.isDark){
|
if(FluTheme.isDark){
|
||||||
|
|||||||
341
src/controls/FluNavigationView.qml
Normal file
341
src/controls/FluNavigationView.qml
Normal 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
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
7
src/controls/FluPaneItem.qml
Normal file
7
src/controls/FluPaneItem.qml
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import QtQuick 2.15
|
||||||
|
|
||||||
|
QtObject {
|
||||||
|
property string title
|
||||||
|
signal tap
|
||||||
|
signal repTap
|
||||||
|
}
|
||||||
5
src/controls/FluPaneItemHeader.qml
Normal file
5
src/controls/FluPaneItemHeader.qml
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import QtQuick 2.15
|
||||||
|
|
||||||
|
QtObject {
|
||||||
|
property string title
|
||||||
|
}
|
||||||
5
src/controls/FluPaneItemSeparator.qml
Normal file
5
src/controls/FluPaneItemSeparator.qml
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import QtQuick 2.15
|
||||||
|
|
||||||
|
QtObject {
|
||||||
|
|
||||||
|
}
|
||||||
34
src/controls/FluScrollablePage.qml
Normal file
34
src/controls/FluScrollablePage.qml
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -5,9 +5,8 @@ import QtQuick.Controls 2.15
|
|||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
import QtGraphicalEffects 1.15
|
import QtGraphicalEffects 1.15
|
||||||
|
|
||||||
Rectangle {
|
Item {
|
||||||
id:root
|
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 {
|
enum TreeViewSelectionMode {
|
||||||
None,
|
None,
|
||||||
@ -101,12 +100,12 @@ Rectangle {
|
|||||||
if(item_layout.singleSelected && selectionMode === FluTreeView.Single){
|
if(item_layout.singleSelected && selectionMode === FluTreeView.Single){
|
||||||
return Qt.rgba(62/255,62/255,62/255,1)
|
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{
|
}else{
|
||||||
if(item_layout.singleSelected && selectionMode === FluTreeView.Single){
|
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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -60,6 +60,7 @@ Item {
|
|||||||
color:root.color
|
color:root.color
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.margins: borderless
|
anchors.margins: borderless
|
||||||
|
clip: true
|
||||||
Behavior on color{
|
Behavior on color{
|
||||||
ColorAnimation {
|
ColorAnimation {
|
||||||
duration: 300
|
duration: 300
|
||||||
|
|||||||
@ -36,5 +36,12 @@
|
|||||||
<file>controls/FluTreeView.qml</file>
|
<file>controls/FluTreeView.qml</file>
|
||||||
<file>controls/FluExpander.qml</file>
|
<file>controls/FluExpander.qml</file>
|
||||||
<file>controls/FluAutoSuggestBox.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>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user