This commit is contained in:
zhuzihcu
2023-03-08 18:14:21 +08:00
parent 3fbd494724
commit 818b588daa
7 changed files with 177 additions and 11 deletions

View File

@ -0,0 +1,82 @@
import QtQuick 2.15
import FluentUI 1.0
Item {
property string headerText: "Titlte"
property bool expand: false
id:root
height: layout_header.height + container.height
width: 400
property int contentHeight : 300
default property alias content: container.data
Rectangle{
id:layout_header
width: parent.width
height: 50
radius: 4
border.color: FluTheme.isDark ? Qt.rgba(53/255,53/255,53/255,1) : Qt.rgba(240/255,240/255,240/255,1)
color: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
MouseArea{
id:root_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
expand = !expand
}
}
FluText{
text: headerText
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 15
}
}
FluIconButton{
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 15
}
hoverColor: FluTheme.isDark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
hovered: root_mouse.containsMouse
icon: expand ? FluentIcons.FA_angle_up : FluentIcons.FA_angle_down
onClicked: {
expand = !expand
}
}
}
Rectangle{
id:container
width: parent.width
clip: true
anchors{
top: layout_header.bottom
left: layout_header.left
}
radius: 4
border.color: FluTheme.isDark ? Qt.rgba(53/255,53/255,53/255,1) : Qt.rgba(240/255,240/255,240/255,1)
color: FluTheme.isDark ? Qt.rgba(57/255,57/255,57/255,1) : Qt.rgba(249/255,249/255,249/255,1)
height: expand ? contentHeight : 0
Behavior on height {
NumberAnimation{
duration: 150
}
}
}
}

View File

@ -13,6 +13,11 @@ Rectangle {
signal clicked
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 textColor: {
if(FluTheme.isDark){
if(disabled){
@ -29,17 +34,10 @@ Rectangle {
radius: 4
color: {
if(FluTheme.isDark){
if(disabled){
return Qt.rgba(59/255,59/255,59/255,1)
}
return button_mouse.containsMouse ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(50/255,50/255,50/255,1)
}else{
if(disabled){
return Qt.rgba(1,1,1,1)
}
return button_mouse.containsMouse ? Qt.rgba(244/255,244/255,244/255,1) : Qt.rgba(1,1,1,1)
if(disabled){
return disableColor
}
return (hovered || button_mouse.containsMouse) ? hoverColor : normalColor
}
Text {
@ -69,7 +67,7 @@ Rectangle {
if(button.text === ""){
return false
}
return button_mouse.containsMouse
return (hovered || button_mouse.containsMouse)
}
delay: 1000
}