跳到主要内容

图标按钮 IconButton

IconButton（图标按钮）是一个圆形按钮，中间有一个图标，并通过填充颜色（墨水）对触摸做出反应。

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

示例​

在线示例

图标按钮​

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)

带有click事件的图标按钮​

import flet as ft


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

    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)

属性​

autofocus​

如果控件应被选择为初始聚焦，则为 True。如果页面上有多个设置了 autofocus 的控件，则首先添加到页面上的控件将获取焦点。

content​

表示自定义按钮内容的 Control。

icon​

按钮中显示的图标。

icon_color​

图标的颜色。

icon_size​

图标的虚拟像素大小。

selected​

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

selected_icon​

选中状态下按钮中显示的图标。

selected_icon_color​

选中状态下的图标颜色。

图标切换按钮示例：

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)

style​

有关此属性的更多信息，请参见 ElevatedButton.style。

tooltip​

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

url​

点击按钮后要打开的 URL。如果注册了此属性，将在打开 URL 后触发 on_click 事件。

url_target​

在 Web 模式下要在何处打开 URL：

  • _blank（默认） - 新标签页/窗口。
  • _self - 当前标签页/窗口。

方法​

focus()​

将焦点移动到按钮。

事件​

on_blur​

当控件失去焦点时触发。

on_click​

当用户点击按钮时触发。

on_focus​

当控件获得焦点时触发。