阴影按键 ElevatedButton

ElevatedButton（阴影按钮）本质上是具有阴影效果的填充按钮。为了防止阴影逐渐增加，只有在绝对必要的情况下才使用它们，例如当按钮需要与图案背景有视觉分离时。详情请参阅Material 3 - 按钮。

示例

基本的阴影按钮

Python

import flet as ft

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

ft.app(target=main)

带图标的阴影按钮

Python

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)

带有`click`事件的阴影按钮

Python

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

    page.add(b, t)

ft.app(target=main)

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

Python

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)

属性

`autofocus`

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

`bgcolor`

按钮的背景颜色。

`color`

按钮的文本颜色。

`content`

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

`elevation`

按钮的阴影。

`icon`

按钮中显示的图标。

`icon_color`

图标的颜色。

`style`

ButtonStyle 类的实例。ButtonStyle可用于控制按钮的所有视觉方面，例如形状、前景、背景和阴影颜色、内容填充、边框宽度和半径等。

可以为按钮的每个“材料状态”配置每个个体样式属性，例如“悬停”、“聚焦”、“禁用”和其他状态。例如，可以为悬停状态配置不同的形状、背景颜色，并为所有其他状态配置后备值。

支持以下MaterialState值：

HOVERED
FOCUSED
PRESSED
DRAGGED
SELECTED
SCROLLEDUNDER
DISABLED
ERROR
DEFAULT - 异常状态，表示“所有其他状态”。

要为所有材料状态设置样式属性，请将其值设置为文字（或类实例）。例如，如果将color属性设置为文字，则该值将应用于所有按钮状态：

ButtonStyle(
    color=ft.colors.WHITE
)

要为特定材料状态设置样式属性，请将其值设置为一个字典，其中键是状态名称。例如，要为HOVERED和FOCUSED状态配置不同的背景颜色，并为所有其他状态配置另一个颜色：

ButtonStyle(
    color={
        ft.MaterialState.HOVERED: ft.colors.WHITE,
        ft.MaterialState.FOCUSED: ft.colors.BLUE,
        ft.MaterialState.DEFAULT: ft.colors.BLACK,
    }
)

以下是一个示例，演示各种按钮形状：

import flet as ft

def main(page: ft.Page):

    page.add(
        ft.ElevatedButton(
            "样式化按钮1",
            style=ft.ButtonStyle(
                color={
                    ft.MaterialState.HOVERED: ft.colors.WHITE,
                    ft.MaterialState.FOCUSED: ft.colors.BLUE,
                    ft.MaterialState.DEFAULT: ft.colors.BLACK,
                },
                bgcolor={ft.MaterialState.FOCUSED: ft.colors.PINK_200, "": ft.colors.YELLOW},
                padding={ft.MaterialState.HOVERED: 20},
                overlay_color=ft.colors.TRANSPARENT,
                elevation={"pressed": 0, "": 1},
                animation_duration=500,
                side={
                    ft.MaterialState.DEFAULT: ft.BorderSide(1, ft.colors.BLUE),
                    ft.MaterialState.HOVERED: ft.BorderSide(2, ft.colors.BLUE),
                },
                shape={
                    ft.MaterialState.HOVERED: ft.RoundedRectangleBorder(radius=20),
                    ft.MaterialState.DEFAULT: ft.RoundedRectangleBorder(radius=2),
                },
            ),
        )
    )

ft.app(target=main)

`ButtonStyle` 类

ButtonStyle 类具有以下属性：

color - 按钮文本和图标的颜色。
bgcolor - 按钮的背景填充颜色。
overlay_color - 通常用于指示按钮处于焦点、悬停或按下状态的高亮颜色。
shadow_color - 按钮材质的阴影颜色。
surface_tint_color - 按钮材质的表面着色颜色。
elevation - 按钮材质的高度。
animation_duration - 定义形状和高度的动画变化持续时间（以毫秒为单位）。
padding - 按钮边界与其子元素之间的间距。
side - BorderSide 类的实例，表示按钮轮廓的颜色和线条粗细。
shape - 按钮底层材质的形状，是以下实现之一的实例：
- StadiumBorder
- RoundedRectangleBorder
  - radius - 边框半径，是 BorderRadius 类的实例或数字。
- CircleBorder
- BeveledRectangleBorder
  - radius - 边框半径，是 BorderRadius 类的实例或数字。
- ContinuousRectangleBorder
  - radius - 边框半径，是 BorderRadius 类的实例或数字。

下面是演示不同按钮形状的示例：

import flet as ft

def main(page: ft.Page):
    page.padding = 30
    page.spacing = 30
    page.add(
        ft.FilledButton(
            "Stadium",
            style=ft.ButtonStyle(
                shape=ft.StadiumBorder(),
            ),
        ),
        ft.FilledButton(
            "Rounded rectangle",
            style=ft.ButtonStyle(
                shape=ft.RoundedRectangleBorder(radius=10),
            ),
        ),
        ft.FilledButton(
            "Continuous rectangle",
            style=ft.ButtonStyle(
                shape=ft.ContinuousRectangleBorder(radius=30),
            ),
        ),
        ft.FilledButton(
            "Beveled rectangle",
            style=ft.ButtonStyle(
                shape=ft.BeveledRectangleBorder(radius=10),
            ),
        ),
        ft.FilledButton(
            "Circle",
            style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30),
        ),
    )

ft.app(target=main)

`text`

按钮上显示的文本。

`tooltip`

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

`url`

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

`url_target`

在Web模式下打开URL的位置：

_blank（默认）- 在新标签页/窗口中打开。
_self - 在当前标签页/窗口中打开。

方法

`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`

当按钮长按时触发。

示例​

基本的阴影按钮​

带图标的阴影按钮​

带有click事件的阴影按钮​

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

属性​

autofocus​

bgcolor​

color​

content​

elevation​

icon​

icon_color​

style​

ButtonStyle 类​

text​

tooltip​

url​

url_target​

方法​

focus()​

事件​

on_blur​

on_click​

on_focus​

on_hover​

on_long_press​

示例