FluentUI/example/MainPage.qml

203 lines
4.9 KiB
QML
Raw Normal View History

2023-02-26 23:47:07 +08:00
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
2023-03-02 18:21:43 +08:00
2023-02-26 23:47:07 +08:00
import FluentUI 1.0
2023-02-27 18:46:39 +08:00
FluWindow {
2023-02-26 23:47:07 +08:00
id:rootwindow
width: 800
2023-03-06 14:22:13 +08:00
height: 600
2023-02-27 23:04:52 +08:00
title: "FluentUI"
2023-03-02 18:21:43 +08:00
minimumWidth: 600
2023-03-06 14:22:13 +08:00
minimumHeight: 400
2023-02-27 18:46:39 +08:00
FluAppBar{
id:appbar
title: "FluentUI"
2023-03-03 18:19:48 +08:00
showDark: true
2023-02-27 18:46:39 +08:00
}
2023-02-26 23:47:07 +08:00
2023-03-06 18:08:01 +08:00
ListModel{
id:nav_items
ListElement{
text:"Buttons"
page:"qrc:/T_Buttons.qml"
}
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"
}
2023-03-08 18:14:21 +08:00
ListElement{
text:"Expander"
page:"qrc:/T_Expander.qml"
}
2023-03-07 00:05:27 +08:00
ListElement{
text:"TreeView"
page:"qrc:/T_TreeView.qml"
}
2023-03-06 18:08:01 +08:00
ListElement{
text:"Theme"
page:"qrc:/T_Theme.qml"
}
ListElement{
text:"Awesome"
page:"qrc:/T_Awesome.qml"
}
ListElement{
text:"Typography"
page:"qrc:/T_Typography.qml"
2023-02-28 23:57:55 +08:00
}
2023-03-02 18:21:43 +08:00
}
FluIconButton{
icon:FluentIcons.FA_navicon
anchors{
left: parent.left
bottom: parent.bottom
leftMargin: 12
bottomMargin: 12
2023-03-02 12:20:16 +08:00
}
2023-03-02 23:58:50 +08:00
FluMenu{
id:menu
x:40
margins:4
FluMenuItem{
2023-03-03 18:19:48 +08:00
text:"意见反馈"
2023-03-02 23:58:50 +08:00
onClicked:{
2023-03-03 18:19:48 +08:00
showInfo("正在建设中...")
2023-03-02 23:58:50 +08:00
}
}
FluMenuItem{
2023-03-03 18:19:48 +08:00
text:"关于"
2023-03-02 23:58:50 +08:00
onClicked:{
2023-03-03 18:19:48 +08:00
FluApp.navigate("/About")
2023-03-02 23:58:50 +08:00
}
}
}
2023-03-02 18:21:43 +08:00
onClicked:{
2023-03-02 23:58:50 +08:00
menu.open()
2023-02-26 23:47:07 +08:00
}
}
ListView{
id:nav_list
anchors{
2023-02-27 18:46:39 +08:00
top: appbar.bottom
2023-02-26 23:47:07 +08:00
bottom: parent.bottom
topMargin: 20
2023-03-02 18:21:43 +08:00
bottomMargin: 52
2023-02-26 23:47:07 +08:00
}
2023-03-08 18:14:21 +08:00
ScrollBar.vertical: ScrollBar { }
2023-03-05 23:39:13 +08:00
boundsBehavior: Flickable.StopAtBounds
2023-03-02 18:21:43 +08:00
clip: true
2023-02-26 23:47:07 +08:00
width: 160
model: nav_items
delegate: Item{
height: 38
width: nav_list.width
2023-03-05 23:39:13 +08:00
2023-02-26 23:47:07 +08:00
Rectangle{
radius: 4
anchors{
top: parent.top
bottom: parent.bottom
left: parent.left
right: parent.right
topMargin: 2
bottomMargin: 2
leftMargin: 6
rightMargin: 6
}
2023-03-05 23:39:13 +08:00
MouseArea{
id:item_mouse
hoverEnabled: true
anchors.fill: parent
onClicked: {
nav_list.currentIndex = index
}
}
2023-03-06 18:08:01 +08:00
color: {
if(FluTheme.isDark){
if(nav_list.currentIndex === index){
return "#2D2D2D"
}
if(item_mouse.containsMouse){
return "#292929"
}
return "#202020"
}else{
if(nav_list.currentIndex === index){
return "#EAEAEA"
}
if(item_mouse.containsMouse){
return "#EDEDED"
}
return "#F3f3f3"
}
}
2023-03-05 23:39:13 +08:00
FluText{
text:model.text
anchors.centerIn: parent
fontStyle: FluText.Caption
2023-02-26 23:47:07 +08:00
}
}
}
}
Rectangle{
2023-03-06 14:22:13 +08:00
color: FluTheme.isDark ? "#323232" : "#FFFFFF"
2023-02-26 23:47:07 +08:00
radius: 10
clip: true
anchors{
left: nav_list.right
leftMargin: 2
2023-02-27 18:46:39 +08:00
top: appbar.bottom
2023-02-26 23:47:07 +08:00
topMargin: 20
right: parent.right
rightMargin: 10
bottom: parent.bottom
bottomMargin: 20
}
border.width: 1
2023-03-06 14:22:13 +08:00
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
2023-02-26 23:47:07 +08:00
Loader{
anchors.fill: parent
anchors.margins:20
source: nav_items.get(nav_list.currentIndex).page
}
}
}