Flet教程之 05 OutlinedButton基础入门（教程含源码）

什么是OutlinedButton

轮廓按钮是中等强调按钮。它们包含重要的操作，但不是应用程序中的主要操作。轮廓按钮与填充按钮很好地配对，以指示替代的次要操作。

实战代码

import flet
from flet import OutlinedButton, Page


def main(page: Page):
    page.title = "Basic outlined buttons"
    page.add(
        OutlinedButton(text="Outlined button"),
        OutlinedButton("Disabled button", disabled=True),
    )

flet.app(target=main)

带图的button

import flet
from flet import OutlinedButton, Page


def main(page: Page):
    page.title = "Outlined buttons with icons"
    page.add(
        OutlinedButton("Button with icon", icon="chair_outlined"),
        OutlinedButton(
            "Button with colorful icon",
            icon="park_rounded",
            icon_color="green400",
        ),
    )

flet.app(target=main)

响应点击

import flet
from flet import OutlinedButton, Page, Text


def main(page: Page):
    page.title = "Outlined button with 'click' event"

    def button_clicked(e):
        b.data += 1
        t.value = f"Button clicked {b.data} time(s)"
        page.update()

    b = OutlinedButton("Button with 'click' event", on_click=button_clicked, data=0)
    t = Text()

    page.add(b, t)

flet.app(target=main)

自定义按钮

import flet
from flet import (
    Column,
    Container,
    Icon,
    OutlinedButton,
    Page,
    Row,
    Text,
    icons,
    padding,
)


def main(page: Page):
    page.title = "Outlined buttons with custom content"
    page.add(
        OutlinedButton(
            width=150,
            content=Row(
                [
                    Icon(name=icons.FAVORITE, color="pink"),
                    Icon(name=icons.AUDIOTRACK, color="green"),
                    Icon(name=icons.BEACH_ACCESS, color="blue"),
                ],
                alignment="spaceAround",
            ),
        ),
        OutlinedButton(
            content=Container(
                content=Column(
                    [
                        Text(value="Compound button", size=20),
                        Text(value="This is secondary text"),
                    ],
                    alignment="center",
                    spacing=5,
                ),
                padding=padding.all(10),
            ),
        ),
    )

flet.app(target=main)