FluExpander 添加属性 headerHeight 和 headerDelegate

- 使 FluExpander 支持自定义非展开状态下 header 的高度和内容
- 在 example 添加对应的使用例子
This commit is contained in:
lucky9loogn
2024-12-03 22:32:52 +08:00
parent a8ca78f3f1
commit cd6a46c22e
7 changed files with 232 additions and 16 deletions

View File

@ -5,6 +5,8 @@ import FluentUI 1.0
Item {
property string headerText: ""
property int headerHeight : 45
property Component headerDelegate: com_header
property bool expand: false
property int contentHeight : 300
default property alias content: container.data
@ -21,10 +23,23 @@ Item {
}
}
clip: true
Component {
id: com_header
Item {
FluText {
text: control.headerText
anchors {
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 15
}
}
}
}
Rectangle{
id:layout_header
width: parent.width
height: 45
height: control.headerHeight
radius: 4
border.color: FluTheme.dividerColor
color: {
@ -41,15 +56,17 @@ Item {
d.toggle()
}
}
FluText{
text: headerText
anchors{
verticalCenter: parent.verticalCenter
FluLoader {
anchors {
top: parent.top
bottom: parent.bottom
left: parent.left
leftMargin: 15
right: btn_toggle.left
}
sourceComponent: control.headerDelegate
}
FluIconButton{
id: btn_toggle
anchors{
verticalCenter: parent.verticalCenter
right: parent.right

View File

@ -5,6 +5,8 @@ import FluentUI
Item {
property string headerText: ""
property int headerHeight : 45
property Component headerDelegate: com_header
property bool expand: false
property int contentHeight : 300
default property alias content: container.data
@ -21,10 +23,23 @@ Item {
}
}
clip: true
Component {
id: com_header
Item {
FluText {
text: control.headerText
anchors {
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 15
}
}
}
}
Rectangle{
id:layout_header
width: parent.width
height: 45
height: control.headerHeight
radius: 4
border.color: FluTheme.dividerColor
color: {
@ -41,15 +56,17 @@ Item {
d.toggle()
}
}
FluText{
text: headerText
anchors{
verticalCenter: parent.verticalCenter
FluLoader {
anchors {
top: parent.top
bottom: parent.bottom
left: parent.left
leftMargin: 15
right: btn_toggle.left
}
sourceComponent: control.headerDelegate
}
FluIconButton{
id: btn_toggle
anchors{
verticalCenter: parent.verticalCenter
right: parent.right

View File

@ -355,8 +355,8 @@
<context>
<name>FluWindow</name>
<message>
<location filename="Qt5/imports/FluentUI/Controls/FluWindow.qml" line="354"/>
<location filename="Qt6/imports/FluentUI/Controls/FluWindow.qml" line="354"/>
<location filename="Qt5/imports/FluentUI/Controls/FluWindow.qml" line="375"/>
<location filename="Qt6/imports/FluentUI/Controls/FluWindow.qml" line="374"/>
<source>Loading...</source>
<translation type="unfinished"></translation>
</message>

View File

@ -355,8 +355,8 @@
<context>
<name>FluWindow</name>
<message>
<location filename="Qt5/imports/FluentUI/Controls/FluWindow.qml" line="354"/>
<location filename="Qt6/imports/FluentUI/Controls/FluWindow.qml" line="354"/>
<location filename="Qt5/imports/FluentUI/Controls/FluWindow.qml" line="375"/>
<location filename="Qt6/imports/FluentUI/Controls/FluWindow.qml" line="374"/>
<source>Loading...</source>
<translation type="unfinished">...</translation>
</message>