HusCollapse 折叠面板

August 16, 2026 · View on GitHub

可以折叠/展开的内容区域。

模块 { HuskarUI.Basic }
继承自 { Control }

支持的代理：

titleDelegate: Component 面板标题代理，代理可访问属性：
- index: int 面板项索引
- model: var 面板项数据
- isActive: bool 是否激活
contentDelegate: Component 面板内容代理，代理可访问属性：
- index: int 面板项索引
- model: var 面板项数据
- isActive: bool 是否激活

支持的属性：

属性名	类型	默认值	描述
animationEnabled	bool	HusTheme.animationEnabled	是否开启动画
hoverCursorShape	int	Qt.PointingHandCursor	悬浮时鼠标形状(来自 Qt.*Cursor)
initModel	array	[]	初始面板模型
count	int	0	模型中的数据条目数
spacing	int	-1	每个面板间的间隔
accordion	bool	false	是否为手风琴
activeKey	string丨list	''丨[]	当前激活的键(手风琴模式为string,否则为list)
defaultActiveKey	array	[]	初始激活的面板项 key 数组
expandIcon	int丨string	HusIcon.RightOutlined	展开图标(来自 HusIcon)或图标链接
titleFont	font	-	标题字体
contentFont	font	-	内容字体
colorBg	color	-	背景颜色
colorIcon	color	-	展开图标颜色
colorTitle	color	-	标题文本颜色
colorTitleBg	color	-	标题背景颜色
colorContent	color	-	内容文本颜色
colorContentBg	color	-	内容背景颜色
radiusBg	HusRadius	-	背景圆角
borderBg	HusBorder	-	背景边框

模型支持的属性：

属性名	类型	可选/必选	描述
key	string	可选	本面板键
title	string	可选	本面板标题
content	string	可选	本面板内容
contentDelegate	var	可选	本面板内容代理(将覆盖contentDelegate)

支持的函数：

get(index: int): Object 获取 index 处的模型数据
set(index: int, object: Object) 设置 index 处的模型数据为 object
setProperty(index: int, propertyName: string, value: any) 设置 index 处的模型数据属性名 propertyName 值为 value
move(from: int, to: int, count: int = 1) 将 count 个模型数据从 from 位置移动到 to 位置
insert(index: int, object: Object) 插入标签 object 到 index 处
append(object: Object) 在末尾添加标签 object
remove(index: int, count: int = 1) 删除 index 处 count 个模型数据
clear() 清空所有模型数据

支持的信号：

activated(key: string, index: int) 激活面板时发出
- key 该面板的键值
- index 该面板的索引

代码演示

示例 1

通过 defaultActiveKey 属性设置默认激活(即展开)键，这个例子默认展开了第一个。

import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10

    HusCollapse {
        width: parent.width
        defaultActiveKey: ['1']
        initModel: [
            {
                key: '1',
                title: 'This is panel header 1',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            },
            {
                key: '2',
                title: 'This is panel header 2',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            },
            {
                key: '3',
                title: 'This is panel header 3',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            }
        ]
    }
}

示例 2 - 手风琴

通过 accordion 属性设置手风琴模式，始终只有一个面板处在激活状态。

import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10

    HusCollapse {
        width: parent.width
        accordion: true
        initModel: [
            {
                key: '1',
                title: 'This is panel header 1',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            },
            {
                key: '2',
                title: 'This is panel header 2',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            },
            {
                key: '3',
                title: 'This is panel header 3',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            }
        ]
    }
}

示例 3 - 高级定制

通过 contentDelegate 属性设置自定义内容代理，可以单独定制每个面板的内容。

import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10

    Component {
        id: contentDelegate1
        Rectangle { height: 100; color: '#80ff0000' }
    }

    Component {
        id: contentDelegate2
        Rectangle { height: 100; color: '#8000ff00' }
    }

    Component {
        id: contentDelegate3
        Rectangle { height: 100; color: '#800000ff' }
    }

    HusCollapse {
        width: parent.width
        radiusBg.all: 0
        initModel: [
            {
                key: '1',
                title: 'This is panel header 1',
                contentDelegate: contentDelegate1
            },
            {
                key: '1',
                title: 'This is panel header 2',
                contentDelegate: contentDelegate2
            },
            {
                key: '1',
                title: 'This is panel header 3',
                contentDelegate: contentDelegate3
            },
        ]
    }
}

示例 4 - 高级定制

通过 contentDelegate 属性设置自定义内容代理，可以实现嵌套折叠面板。

import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10

    Component {
        id: customContentDelegate

        Item {
            height: innerCollapse.height + 20

            HusCollapse {
                id: innerCollapse
                width: parent.width - 20
                anchors.centerIn: parent
                initModel: [
                    {
                        key: '1-1',
                        title: 'This is panel header 1-1',
                        content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
                    }
                ]
                defaultActiveKey: ['1-1']
            }
        }
    }

    HusCollapse {
        id: collapse
        width: parent.width
        initModel: [
            {
                key: '1',
                title: 'This is panel header 1',
                contentDelegate: customContentDelegate,
            },
            {
                key: '2',
                title: 'This is panel header 2',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            },
            {
                key: '3',
                title: 'This is panel header 3',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            }
        ]
    }
}

示例 5

通过 spacing 属性设置面板之间的间隔以分离各个面板。

import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10

    HusCollapse {
        width: parent.width
        spacing: 10
        initModel: [
            {
                key: '1',
                title: 'This is panel header 1',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            },
            {
                key: '2',
                title: 'This is panel header 2',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            },
            {
                key: '3',
                title: 'This is panel header 3',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            }
        ]
    }
}

示例 6

通过 expandIcon 属性设置展开图标, 设置为 0 则不显示图标。

import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10

    HusCollapse {
        width: parent.width
        expandIcon: HusIcon.CaretRightOutlined
        initModel: [
            {
                key: '1',
                title: 'This is panel header 1',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            },
            {
                key: '2',
                title: 'This is panel header 2',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            },
            {
                key: '3',
                title: 'This is panel header 3',
                content: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'
            }
        ]
    }
}