跳到主要内容

ElevatedButton

阴影按钮是具有阴影的填充色按钮。为了防止阴影蔓延，只有在绝对必要时使用它们，例如当按钮需要从背景图案中视觉分离时。请参阅Material 3 按钮以获取更多信息。

示例​

Live 示例

基本阴影按钮​

import flet as ft

def main(page: ft.Page):
    page.title = "基本高程按钮"
    page.add(
        ft.ElevatedButton(text="高程按钮"),
        ft.ElevatedButton("禁用按钮", disabled=True),
    )

ft.app(target=main)

带图标的阴影按钮​

import flet as ft


def main(page: ft.Page):
    page.title = "带图标的高程按钮"
    page.add(
        ft.ElevatedButton("带图标的按钮", icon="chair_outlined"),
        ft.ElevatedButton(
            "带彩色图标的按钮",
            icon="park_rounded",
            icon_color="green400",
        ),
    )

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.ElevatedButton("带点击事件的按钮", on_click=button_clicked, data=0)
    t = ft.Text()

    page.add(b, t)

ft.app(target=main)

带自定义内容的阴影按钮​

import flet as ft

def main(page: ft.Page):
    page.title = "带自定义内容的高程按钮"
    page.add(
        ft.ElevatedButton(
            width=150,
            content=ft.Row(
                [
                    ft.Icon(name=ft.icons.FAVORITE, color="pink"),
                    ft.Icon(name=ft.icons.AUDIOTRACK, color="green"),
                    ft.Icon(name=ft.icons.BEACH_ACCESS, color="blue"),
                ],
                alignment=ft.MainAxisAlignment.SPACE_AROUND,
            ),
        ),
        ft.ElevatedButton(
            content=ft.Container(
                content=ft.Column(
                    [
                        ft.Text(value="复合按钮", size=20),
                        ft.Text(value="这是次要文本"),
                    ],
                    alignment=ft.MainAxisAlignment.CENTER,
                    spacing=5,
                ),
                padding=ft.padding.all(10),
            ),
        ),
    )

ft.app(target=main)

属性​

adaptive​

如果值为 True, 则根据目标平台是 iOS/macOS 创建自适应按钮。

在 iOS 和 macOS 上，创建一个 CupertinoButton，该按钮匹配了该按钮的功能和呈现方式。在其他平台上，创建一个 Material 高程按钮。

默认值为 False。

autofocus​

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

bgcolor​

按钮的背景 颜色。

clip_behavior​

内容将根据此选项被剪辑（或不剪辑）。属性值是 ClipBehavior 枚举。

默认为 NONE。

color​

按钮的文本 颜色。

content​

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

elevation​

按钮的阴影。

icon​

按钮中的图标。

icon_color​

图标的 颜色。

style​

该值是 ButtonStyle 类的实例。

text​

按钮上显示的文本。

tooltip​

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

url​

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

url_target​

在 web 模式下打开 URL 的位置。该值是 UrlTarget 枚举的实例。默认为 BLANK。

方法​

focus()​

将焦点移到按钮。

事件​

on_blur​

控件失去焦点时触发。

on_click​

用户点击按钮时触发。

on_focus​

控件获得焦点时触发。

on_hover​

鼠标指针进入或退出按钮响应区域时触发。事件对象的 data 属性包含 true（字符串）表示光标进入，false 表示光标退出。

import flet as ft

def main(page: ft.Page):
    def on_hover(e):
        e.control.bgcolor = "orange" if e.data == "true" else "yellow"
        e.control.update()

    page.add(
        ft.ElevatedButton(
            "我在悬停时改变颜色", bgcolor="yellow", on_hover=on_hover
        )
    )

ft.app(target=main)

on_long_press​

按钮长按时触发。