跳到主要内容

图标按钮

图标按钮是一个圆形按钮，中间带有一个图标，当用户点击时会填充颜色（墨水）。

图标按钮通常用于工具栏，但也可以在其他地方使用。

示例​

Live 示例

图标按钮​

import flet as ft


def main(page: ft.Page):
    page.title = "图标按钮"
    page.add(
        ft.Row(
            [
                ft.IconButton(
                    icon=ft.icons.PAUSE_CIRCLE_FILLED_ROUNDED,
                    icon_color="blue400",
                    icon_size=20,
                    tooltip="暂停记录",
                ),
                ft.IconButton(
                    icon=ft.icons.DELETE_FOREVER_ROUNDED,
                    icon_color="pink600",
                    icon_size=40,
                    tooltip="删除记录",
                ),
            ]
        ),
    )


ft.app(target=main)

带点击事件的图标按钮​

import flet as ft


def main(page: ft.Page):
    page.title = "带点击事件的图标按钮"

    def button_clicked(e):
        b.data += 1
        t.value = f"按钮点击 {b.data} 次"
        page.update()

    b = ft.IconButton(
        icon=ft.icons.PLAY_CIRCLE_FILL_OUTLINED, on_click=button_clicked, data=0
    )
    t = ft.Text()

    page.add(b, t)

ft.app(target=main)

属性​

adaptive​

如果值为 True，则根据目标平台创建适应性按钮。如果目标平台是 iOS/macOS，则创建一个 CupertinoButton，否则创建一个 Material 图标按钮。

默认值为 False。

alignment​

定义图标在图标按钮中的位置。对齐方式是 alignment.Alignment 类的实例。默认值为 alignment.center。

autofocus​

如果控件将被选为初始焦点，则为 True。如果页面上有多个控件具有 autofocus 属性，则第一个添加到页面的控件将获得焦点。

content​

一个表示自定义按钮内容的控件。

disabled_color​

按钮禁用时图标的颜色。

enable_feedback​

是否检测手势以提供音频和/或触觉反馈。例如，在 Android 上，将其设置为 True 将产生点击声音，并且长按将产生短暂的振动。

默认值为 True。

focus_color​

按钮在焦点状态下的颜色。

highlight_color​

按钮被按下时的颜色。高亮颜色快速淡入作为按钮被按下。

hover_color​

按钮被悬停时的颜色。

icon​

按钮中的图标。

icon_color​

图标的颜色。

icon_size​

图标的大小（虚拟像素）。

mouse_cursor​

鼠标指针进入或悬停在该控件上时显示的光标。 值是 MouseCursor 枚举。

padding​

定义按钮周围的填充。整个填充图标将响应输入手势。

填充值是 padding.Padding 类的实例。

默认值为 padding.all(8)。

selected​

将图标按钮转换为 toggle 按钮：True - 按钮处于选中状态，False - 正常状态。

selected_icon​

按钮在选中状态下的图标。

selected_icon_color​

选中状态下的图标颜色。

一个 toggle 图标按钮的示例：

import flet as ft

def main(page: ft.Page):

    def toggle_icon_button(e):
        e.control.selected = not e.control.selected
        e.control.update()

    page.add(
        ft.IconButton(
            icon=ft.icons.BATTERY_1_BAR,
            selected_icon=ft.icons.BATTERY_FULL,
            on_click=toggle_icon_button,
            selected=False,
            style=ft.ButtonStyle(color={"selected": ft.colors.GREEN, "": ft.colors.RED}),
        )
    )

ft.app(target=main)

splash_color​

按钮在按下状态下的主要颜色。

splash_radius​

溅射半径。仅在 Material 2 中生效。

style​

按钮的样式。值是 ButtonStyle 类的实例。

tooltip​

鼠标悬停在按钮上时显示的文本。

url​

按钮被点击时打开的 URL。如果注册了，on_click 事件将在打开 URL 后触发。

url_target​

在 Web 模式下打开 URL 的目标。值是 UrlTarget 枚举。默认值为 BLANK。

visual_density​

定义控件的布局紧凑度。值是 ThemeVisualDensity 枚举。

方法​

focus()​

将焦点移到按钮上。

事件​

on_blur​

控件失去焦点时触发。

on_click​

用户点击按钮时触发。

on_focus​

控件获得焦点时触发。