FluentUI/example/qml/page/T_Theme.qml

100 lines
3.0 KiB
QML
Raw Normal View History

2023-05-22 16:17:51 +08:00
import QtQuick
2023-03-30 21:52:55 +08:00
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
2023-06-12 16:46:02 +08:00
import "qrc:///example/qml/component"
2023-03-06 12:09:06 +08:00
2023-03-10 18:08:32 +08:00
FluScrollablePage{
title:"Theme"
2023-04-06 17:32:21 +08:00
FluArea{
Layout.fillWidth: true
2023-03-10 18:08:32 +08:00
Layout.topMargin: 20
2023-07-07 16:04:17 +08:00
height: 270
2023-04-06 17:32:21 +08:00
paddings: 10
ColumnLayout{
spacing:0
anchors{
left: parent.left
}
RowLayout{
Layout.topMargin: 10
Repeater{
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
delegate: FluRectangle{
width: 42
height: 42
radius: [4,4,4,4]
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium
iconSize: 15
visible: modelData === FluTheme.primaryColor
color: FluTheme.dark ? 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
}
}
2023-03-10 18:08:32 +08:00
}
2023-03-09 11:50:40 +08:00
}
}
2023-04-06 17:32:21 +08:00
FluText{
text:"夜间模式"
Layout.topMargin: 20
}
FluToggleSwitch{
Layout.topMargin: 5
2023-05-26 13:49:32 +08:00
checked: FluTheme.dark
onClicked: {
2023-04-20 09:15:28 +08:00
if(FluTheme.dark){
2023-07-18 18:24:06 +08:00
FluTheme.darkMode = FluThemeType.Light
2023-04-20 09:15:28 +08:00
}else{
2023-07-18 18:24:06 +08:00
FluTheme.darkMode = FluThemeType.Dark
2023-04-20 09:15:28 +08:00
}
2023-04-06 17:32:21 +08:00
}
}
FluText{
text:"native文本渲染"
Layout.topMargin: 20
}
FluToggleSwitch{
Layout.topMargin: 5
2023-05-26 13:49:32 +08:00
checked: FluTheme.nativeText
onClicked: {
2023-04-06 17:32:21 +08:00
FluTheme.nativeText = !FluTheme.nativeText
}
}
2023-07-07 16:04:17 +08:00
FluText{
text:"开启动画效果"
Layout.topMargin: 20
}
FluToggleSwitch{
Layout.topMargin: 5
checked: FluTheme.enableAnimation
onClicked: {
FluTheme.enableAnimation = !FluTheme.enableAnimation
}
}
2023-03-06 12:09:06 +08:00
}
}
2023-04-06 17:32:21 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-06 17:32:21 +08:00
code:'FluTheme.primaryColor = FluColors.Orange
FluTheme.dark = true
2023-04-19 17:25:46 +08:00
FluTheme.nativeText = true'
2023-03-11 21:15:36 +08:00
}
2023-04-06 17:32:21 +08:00
2023-03-06 12:09:06 +08:00
}