跳到主要内容

扩展面板列表 ExpansionPanelList

一个材料扩展面板列表，它布局其子项并动画展开。

例子​

在线示例

简单例子​

import flet as ft


def main(page: ft.Page):
    def handle_change(e: ft.ControlEvent):
        print(f"更改了索引为 {e.data} 的面板")

    def handle_delete(e: ft.ControlEvent):
        panel.controls.remove(e.control.data)
        page.update()

    panel = ft.ExpansionPanelList(
        expand_icon_color=ft.colors.AMBER,
        elevation=8,
        divider_color=ft.colors.AMBER,
        on_change=handle_change,
        controls=[
            ft.ExpansionPanel(
                # 没有标题和内容 - 将使用占位符
                bgcolor=ft.colors.BLUE_400,
                expanded=True,
            )
        ]
    )

    colors = [
        ft.colors.GREEN_500,
        ft.colors.BLUE_800,
        ft.colors.RED_800,
    ]
    
    for i in range(3):
        exp = ft.ExpansionPanel(
            bgcolor=colors[i % len(colors)],
            header=ft.ListTile(title=ft.Text(f"面板 {i}")),
        )

        exp.content = ft.ListTile(
            title=ft.Text(f"这是在面板 {i} 中"),
            subtitle=ft.Text(f"点击图标删除面板 {i}"),
            trailing=ft.IconButton(ft.icons.DELETE, on_click=handle_delete, data=exp),
        )

        panel.controls.append(exp)

    page.add(panel)


ft.app(target=main)

ExpansionPanelList 属性​

controls​

要在 ExpansionPanelList 内显示的 ExpansionPanel 的列表。

divider_color​

当 ExpansionPanel.expanded 为 False 时分隔线的颜色。

elevation​

定义子控件（ExpansionPanel）展开时的高度。默认值为 2。

expanded_header_padding​

定义展开时围绕标题的填充。

填充值是 Padding 类的实例。默认值为 padding.symmetric(vertical=16.0)。

expanded_icon_color​

图标的颜色。在浅色主题模式下默认为 colors.BLACK_54，在暗色主题模式下默认为 colors.WHITE_60。

spacing​

当展开时 ExpansionPanel 之间的间隔大小。

事件​

on_change​

当扩展或折叠 ExpansionPanel 时触发。事件的数据 (e.data) 包含触发此事件的 ExpansionPanel 的索引。

ExpansionPanel 属性​

bgcolor​

面板的背景颜色。

content​

在 ExpansionPanel 主体中找到的控件。在展开面板时显示在 header 下方。

如果此属性为 None，则 ExpansionPanel 将具有占位符 Text 作为内容。

can_tap_header​

如果为 True，则点击面板的 header 将展开或折叠它。默认为 False。

expanded​

是否展开（True）或折叠（False）。默认为 False。

在 ExpansionPanel 标题中找到的控件。如果 can_tap_header 为 True，则点击标题将展开或折叠面板。

如果此属性为 None，则 ExpansionPanel 将具有占位符 [Text`](/docs/controls/text) 作为标题。