跳到主要内容

轮廓按钮

轮廓按钮是中等强调按钮。它们包含重要的操作,但不是应用程序中的主要操作。 轮廓按钮与填充按钮搭配使用,以指示备选的次要操作。有关更多信息,请参阅 Material 3 按钮

示例

Live 示例

基本轮廓按钮

import flet as ft


def main(page: ft.Page):
page.title = "基本轮廓按钮"
page.add(
ft.OutlinedButton(text="轮廓按钮"),
ft.OutlinedButton("禁用按钮", disabled=True),
)

ft.app(target=main)

带图标的轮廓按钮

import flet as ft


def main(page: ft.Page):
page.title = "带图标的轮廓按钮"
page.add(
ft.OutlinedButton("带图标的按钮", icon="chair_outlined"),
ft.OutlinedButton(
"带彩色图标的按钮",
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.OutlinedButton("带点击事件的按钮", 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.OutlinedButton(
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.OutlinedButton(
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 ElevatedButton

默认值为 False

autofocus

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

clip_behavior

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

默认为 NONE

content

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

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 当光标退出时。

on_long_press

当按钮被长按时触发。