提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

Flet-基于Flutter的Python跨平台开发框架（组件学习）

Pythonflutter组件学习框架开发 基于 跨平台
2023-06-13 09:14:41 时间

Flet是一个基于谷歌开发Flutter的Python跨平台开发框架，允许用你喜欢的语言构建交互式多用户Web，桌面和移动应用程序，而无需拥有前端开发的经验。使用Flet，您只需在Python中编写一个整体式有状态应用程序。

Flet UI 由Flutter控件构建，应用程序看起来相当专业。控件被组织到层次结构或树中，其中每个控件都有一个父控件（Page 除外）和容器控件（如 Column），下拉列表可以包含子控件。

按类别划分的控件：

下面分别介绍框架常用组件及示例：

1、Layout布局

  • 页面

页是视图控件的容器。页面实例和根视图是在启动新用户会话时自动创建的。

  • 视图

视图是所有其他控件的最顶层容器。根视图是在启动新用户会话时自动创建的。从布局角度来看，View 表示一个 Column 控件，因此它具有类似的行为并共享相同的属性。

向页中添加一个新控件
page.controls.append(Text("Hello!"))
page.update()
或者
page.add(Text("Hello!"))

删除页面上最上面的控件
page.controls.pop()
page.update()

页面内容与其边缘之间的空间。 默认值为每边 10 个像素。
page.padding = 0
page.update()
  • Container容器

容器允许使用背景色和边框装饰控件，并使用填充，边距和对齐方式对其进行定位。

import flet
from flet import Container, ElevatedButton, OutlinedButton, Page, colors


def main(page: Page):
    page.title = "Containers with background color"

    c1 = Container(
        content=ElevatedButton("Elevated Button in Container"),
        bgcolor=colors.YELLOW,
        padding=5,
    )

    c2 = Container(
        content=ElevatedButton(
            "Elevated Button with opacity=0.5 in Container", opacity=0.5
        ),
        bgcolor=colors.YELLOW,
        padding=5,
    )

    c3 = Container(
        content=OutlinedButton("Outlined Button in Container"),
        bgcolor=colors.YELLOW,
        padding=5,
    )
    page.add(c1, c2, c3)


flet.app(target=main)
  • Row行

在水平数组中显示其子项的控件。要使子控件展开并填充可用的水平空间，请设置其展开属性。

import flet
from flet import Column, Container, Page, Row, Text, alignment, colors

def main(page: Page):
    def items(count):
        items = []
        for i in range(1, count + 1):
            items.append(
                Container(
                    content=Text(value=i),
                    alignment=alignment.center,
                    width=50,
                    height=50,
                    bgcolor=colors.AMBER_500,
                )
            )
        return items

    def row_with_alignment(align):
        return Column(
            [
                Text(align, size=16),
                Container(
                    content=Row(items(3), alignment=align),
                    bgcolor=colors.AMBER_100,
                ),
            ]
        )

    page.add(
        row_with_alignment("start"),
        row_with_alignment("center"),
        row_with_alignment("end"),
        row_with_alignment("spaceBetween"),
        row_with_alignment("spaceAround"),
        row_with_alignment("spaceEvenly"),
    )

flet.app(target=main)
  • Column列

在垂直数组中显示其子项的控件。

要使子控件展开并填充可用的垂直空间，请设置其展开属性。

import flet
from flet import Column, Container, Page, Row, Text, alignment, colors

def main(page: Page):
    def items(count):
        items = []
        for i in range(1, count + 1):
            items.append(
                Container(
                    content=Text(value=i),
                    alignment=alignment.center,
                    width=50,
                    height=50,
                    bgcolor=colors.AMBER_500,
                )
            )
        return items

    def column_with_alignment(align):
        return Column(
            [
                Text(align, size=16),
                Container(
                    content=Column(items(3), alignment=align),
                    bgcolor=colors.AMBER_100,
                    height=400,
                ),
            ]
        )

    page.add(
        Row(
            [
                column_with_alignment("start"),
                column_with_alignment("center"),
                column_with_alignment("end"),
                column_with_alignment("spaceBetween"),
                column_with_alignment("spaceAround"),
                column_with_alignment("spaceEvenly"),
            ],
            spacing=30,
            alignment="start",
        )
    )

flet.app(target=main)
  • ListView列表显示

线性排列的可滚动控件列表。ListView 是最常用的滚动控件。 它在滚动方向上一个接一个地显示其子级。 在交叉轴上，子项需要填充 ListView。

from time import sleep
import flet
from flet import ListView, Page, Text

def main(page: Page):
    page.title = "Auto-scrolling ListView"

    lv = ListView(expand=1, spacing=10, padding=20, auto_scroll=True)

    page.add(lv)

    count = 1
    for i in range(0, 10):
        sleep(1)
        lv.controls.append(Text(f"Line {count}"))
        count += 1
        page.update()

flet.app(target=main)
  • ListTile标题列表

单个固定高度的行，通常包含一些文本以及前导或图标。

import flet
from flet import (
    Card,
    Column,
    Container,
    Icon,
    Image,
    ListTile,
    PopupMenuButton,
    PopupMenuItem,
    Text,
    icons,
    padding,
)

def main(page):
    page.title = "ListTile Examples"
    page.add(
        Card(
            content=Container(
                width=500,
                content=Column(
                    [
                        ListTile(
                            title=Text("One-line list tile"),
                        ),
                        ListTile(title=Text("One-line dense list tile"), dense=True),
                        ListTile(
                            leading=Icon(icons.SETTINGS),
                            title=Text("One-line selected list tile"),
                            selected=True,
                        ),
                        ListTile(
                            leading=Image(src="/icons/icon-192.png", fit="contain"),
                            title=Text("One-line with leading control"),
                        ),
                        ListTile(
                            title=Text("One-line with trailing control"),
                            trailing=PopupMenuButton(
                                icon=icons.MORE_VERT,
                                items=[
                                    PopupMenuItem(text="Item 1"),
                                    PopupMenuItem(text="Item 2"),
                                ],
                            ),
                        ),
                        ListTile(
                            leading=Icon(icons.ALBUM),
                            title=Text("One-line with leading and trailing controls"),
                            trailing=PopupMenuButton(
                                icon=icons.MORE_VERT,
                                items=[
                                    PopupMenuItem(text="Item 1"),
                                    PopupMenuItem(text="Item 2"),
                                ],
                            ),
                        ),
                        ListTile(
                            leading=Icon(icons.SNOOZE),
                            title=Text("Two-line with leading and trailing controls"),
                            subtitle=Text("Here is a second title."),
                            trailing=PopupMenuButton(
                                icon=icons.MORE_VERT,
                                items=[
                                    PopupMenuItem(text="Item 1"),
                                    PopupMenuItem(text="Item 2"),
                                ],
                            ),
                        ),
                    ],
                    spacing=0,
                ),
                padding=padding.symmetric(vertical=10),
            )
        )
    )

flet.app(target=main)
  • GridView网格列表

GridView 对于大型列表（数千个项目）非常有效。更喜欢它而不是包装 Column 或 Row 以实现平滑滚动。

  • Tabs标签

选项卡控件用于导航经常访问的不同内容类别。选项卡允许在两个或多个内容视图之间导航，并依靠文本标题来表达内容的不同部分。

import flet
from flet import Container, Icon, Page, Tab, Tabs, Text, alignment, icons

def main(page: Page):

    t = Tabs(
        selected_index=1,
        animation_duration=300,
        tabs=[
            Tab(
                text="Tab 1",
                content=Container(
                    content=Text("This is Tab 1"), alignment=alignment.center
                ),
            ),
            Tab(
                tab_content=Icon(icons.SEARCH),
                content=Text("This is Tab 2"),
            ),
            Tab(
                text="Tab 3",
                icon=icons.SETTINGS,
                content=Text("This is Tab 3"),
            ),
        ],
        expand=1,
    )

    page.add(t)

flet.app(target=main)
  • Card卡片

材料设计卡：带有略微圆角和高程阴影的面板。

import flet
from flet import Card, Column, Container, Icon, ListTile, Row, Text, TextButton, icons

def main(page):
    page.title = "Card Example"
    page.add(
        Card(
            content=Container(
                content=Column(
                    [
                        ListTile(
                            leading=Icon(icons.ALBUM),
                            title=Text("The Enchanted Nightingale"),
                            subtitle=Text(
                                "Music by Julie Gable. Lyrics by Sidney Stein."
                            ),
                        ),
                        Row(
                            [TextButton("Buy tickets"), TextButton("Listen")],
                            alignment="end",
                        ),
                    ]
                ),
                width=400,
                padding=10,
            )
        )
    )

flet.app(target=main, view=flet.WEB_BROWSER)
  • Divider水平分隔线
import flet
from flet import Column, Container, Divider, Page, alignment, colors

def main(page: Page):

    page.add(
        Column(
            [
                Container(
                    bgcolor=colors.AMBER,
                    alignment=alignment.center,
                    expand=True,
                ),
                Divider(),
                Container(bgcolor=colors.PINK, alignment=alignment.center, expand=True),
                Divider(height=1, color="white"),
                Container(
                    bgcolor=colors.BLUE_300,
                    alignment=alignment.center,
                    expand=True,
                ),
                Divider(height=9, thickness=3),
                Container(
                    bgcolor=colors.DEEP_PURPLE_200,
                    alignment=alignment.center,
                    expand=True,
                ),
            ],
            spacing=0,
            expand=True,
        ),
    )

flet.app(target=main)
  • VerticalDivider垂直分隔线
import flet
from flet import Container, Page, Row, VerticalDivider, alignment, colors

def main(page: Page):

    page.add(
        Row(
            [
                Container(
                    bgcolor=colors.ORANGE_300,
                    alignment=alignment.center,
                    expand=True,
                ),
                VerticalDivider(),
                Container(
                    bgcolor=colors.BROWN_400,
                    alignment=alignment.center,
                    expand=True,
                ),
                VerticalDivider(width=1, color="white"),
                Container(
                    bgcolor=colors.BLUE_300,
                    alignment=alignment.center,
                    expand=True,
                ),
                VerticalDivider(width=9, thickness=3),
                Container(
                    bgcolor=colors.GREEN_300,
                    alignment=alignment.center,
                    expand=True,
                ),
            ],
            spacing=0,
            expand=True,
        )
    )

flet.app(target=main)

2、Navigation导航

  • AppBar设计应用栏
import flet
from flet import (
    AppBar,
    Icon,
    IconButton,
    Page,
    PopupMenuButton,
    PopupMenuItem,
    Text,
    colors,
    icons,
)

def main(page: Page):
    def check_item_clicked(e):
        e.control.checked = not e.control.checked
        page.update()

    page.appbar = AppBar(
        leading=Icon(icons.PALETTE),
        leading_width=40,
        title=Text("AppBar Example"),
        center_title=False,
        bgcolor=colors.SURFACE_VARIANT,
        actions=[
            IconButton(icons.WB_SUNNY_OUTLINED),
            IconButton(icons.FILTER_3),
            PopupMenuButton(
                items=[
                    PopupMenuItem(text="Item 1"),
                    PopupMenuItem(),  # divider
                    PopupMenuItem(
                        text="Checked item", checked=False, on_click=check_item_clicked
                    ),
                ]
            ),
        ],
    )
    page.add(Text("Body!"))

flet.app(target=main)
  • 导航轨

一种材质小部件，旨在显示在应用程序的左侧或右侧，以在少量视图之间导航，通常在三到五个之间。

import flet
from flet import (
    Column,
    FloatingActionButton,
    Icon,
    NavigationRail,
    NavigationRailDestination,
    Page,
    Row,
    Text,
    VerticalDivider,
    icons,
)

def main(page: Page):

    rail = NavigationRail(
        selected_index=0,
        label_type="all",
        # extended=True,
        min_width=100,
        min_extended_width=400,
        leading=FloatingActionButton(icon=icons.CREATE, text="Add"),
        group_alignment=-0.9,
        destinations=[
            NavigationRailDestination(
                icon=icons.FAVORITE_BORDER, selected_icon=icons.FAVORITE, label="First"
            ),
            NavigationRailDestination(
                icon_content=Icon(icons.BOOKMARK_BORDER),
                selected_icon_content=Icon(icons.BOOKMARK),
                label="Second",
            ),
            NavigationRailDestination(
                icon=icons.SETTINGS_OUTLINED,
                selected_icon_content=Icon(icons.SETTINGS),
                label_content=Text("Settings"),
            ),
        ],
        on_change=lambda e: print("Selected destination:", e.control.selected_index),
    )

    page.add(
        Row(
            [
                rail,
                VerticalDivider(width=1),
                Column([Text("Body!")], alignment="start", expand=True),
            ],
            expand=True,
        )
    )

flet.app(target=main)

3、Information Displays信息显示

  • Text文本
  • Icon显示图标
import flet
from flet import Icon, Page, Row, colors, icons

def main(page: Page):
    page.add(
        Row(
            [
                Icon(name=icons.FAVORITE, color=colors.PINK),
                Icon(name=icons.AUDIOTRACK, color=colors.GREEN_400, size=30),
                Icon(name=icons.BEACH_ACCESS, color=colors.BLUE, size=50),
                Icon(name="settings", color="#c1c1c1"),
            ]
        )
    )

flet.app(target=main)
  • Image图片
  • Markdown
  • CircleAvatar圆形头像
  • ProgressBar进度条
  • ProgressRing进度环
from time import sleep
import flet
from flet import Column, Page, ProgressRing, Row, Text

def main(page: Page):
    pr = ProgressRing(width=16, height=16, stroke_width=2)

    page.add(
        Text("Circular progress indicator", style="headlineSmall"),
        Row([pr, Text("Wait for the completion...")]),
        Text("Indeterminate cicrular progress", style="headlineSmall"),
        Column(
            [ProgressRing(), Text("I'm going to run for ages...")],
            horizontal_alignment="center",
        ),
    )

    for i in range(0, 101):
        pr.value = i * 0.01
        sleep(0.1)
        page.update()

flet.app(target=main)

4、Buttons按钮

5、Input and Selections输入和选择

  • checkbox复选框

复选框允许从组中选择一个或多个项目，或在两个互斥选项（选中或未选中，打开或关闭）之间切换。

import flet
from flet import Checkbox, ElevatedButton, Text

def main(page):
    def button_clicked(e):
        t.value = (
            f"Checkboxes values are:  {c1.value}, {c2.value}, {c3.value}, {c4.value}, {c5.value}."
        )
        page.update()

    t = Text()
    c1 = Checkbox(label="Unchecked by default checkbox", value=False)
    c2 = Checkbox(label="Undefined by default tristate checkbox", tristate=True)
    c3 = Checkbox(label="Checked by default checkbox", value=True)
    c4 = Checkbox(label="Disabled checkbox", disabled=True)
    c5 = Checkbox(
        label="Checkbox with rendered label_position='left'", label_position="left"
    )
    b = ElevatedButton(text="Submit", on_click=button_clicked)
    page.add(c1, c2, c3, c4, c5, b, t)

flet.app(target=main)
  • Dropdown下拉框

下拉列表允许用户从多个项目中进行选择。 下拉列表显示当前选定的项目以及打开菜单以选择另一个项目的箭头。

import flet
from flet import Dropdown, Page, dropdown

def main(page: Page):
    page.add(
        Dropdown(
            label="Color",
            hint_text="Choose your favourite color?",
            options=[
                dropdown.Option("Red"),
                dropdown.Option("Green"),
                dropdown.Option("Blue"),
            ],
            autofocus=True,
        )
    )

flet.app(target=main)
  • Radio单选按钮
import flet
from flet import Column, ElevatedButton, Radio, RadioGroup, Text

def main(page):
  def button_clicked(e):
    t.value = f"Your favorite color is:  {cg.value}"
    page.update()

  t = Text()
  b = ElevatedButton(text='Submit', on_click=button_clicked)
  cg = RadioGroup(content=Column([
    Radio(value="red", label="Red"),
    Radio(value="green", label="Green"),
    Radio(value="blue", label="Blue")]))
  
  page.add(Text("Select your favorite color:"), cg, b, t)

flet.app(target=main)
  • Slider滑动条
import flet
from flet import Slider, Text

def main(page):
    page.add(
        Text("Slider with value:"),
        Slider(value=0.3),
        Text("Slider with a custom range and label:"),
        Slider(min=0, max=100, divisions=10, label="{value}%"))

flet.app(target=main)
  • Switch切换开关
import flet
from flet import Page, Switch

def main(page: Page):

  def theme_changed(e):
    page.theme_mode = "dark" if page.theme_mode == "light" else "light"
    c.label = "Light theme" if page.theme_mode == "light" else "Dark theme"
    page.update()

  page.theme_mode = "light"
  c = Switch(label="Light theme", on_change=theme_changed)
  page.add(c)

flet.app(target=main)
  • TextField文本域

文本字段允许用户使用硬件键盘或屏幕键盘输入文本。

import flet
from flet import ElevatedButton, Page, Text, TextField, icons

def main(page: Page):
    def button_clicked(e):
        t.value = f"Textboxes values are:  '{tb1.value}', '{tb2.value}', '{tb3.value}', '{tb4.value}', '{tb5.value}'."
        page.update()

    t = Text()
    tb1 = TextField(label="Standard")
    tb2 = TextField(label="Disabled", disabled=True, value="First name")
    tb3 = TextField(label="Read-only", read_only=True, value="Last name")
    tb4 = TextField(label="With placeholder", hint_text="Please enter text here")
    tb5 = TextField(label="With an icon", icon=icons.EMOJI_EMOTIONS)
    b = ElevatedButton(text="Submit", on_click=button_clicked)
    page.add(tb1, tb2, tb3, tb4, tb5, b, t)

flet.app(target=main)

Multiline TextFields多行输入

import flet
from flet import Page, TextField

def main(page: Page):
    page.add(
        TextField(label="standard", multiline=True),
        TextField(
            label="disabled",
            multiline=True,
            disabled=True,
            value="line1\nline2\nline3\nline4\nline5",
        ),
        TextField(
            label="Auto adjusted height with max lines",
            multiline=True,
            min_lines=1,
            max_lines=3,
        ),
    )

flet.app(target=main)

TextFields with prefixes and suffixes文本带前缀、后缀

import flet
from flet import Page, TextField, icons

def main(page: Page):
    page.add(
        TextField(label="With prefix", prefix_text="https://"),
        TextField(label="With suffix", suffix_text=".com"),
        TextField(
            label="With prefix and suffix", prefix_text="https://", suffix_text=".com"
        ),
        TextField(
            label="My favorite color",
            icon=icons.FORMAT_SIZE,
            hint_text="Type your favorite color",
            helper_text="You can type only one color",
            counter_text="0 symbols typed",
            prefix_icon=icons.COLOR_LENS,
            suffix_text="...is your color",
        ),
    )

flet.app(target=main)

6、Dialogs, Alerts and Panels对话框、警报和面板

  • Banner横幅面板

横幅显示重要、简洁的消息，并为用户提供处理（或关闭横幅）的操作。需要用户操作才能将其关闭。

横幅显示在屏幕顶部，顶部应用栏下方。它们是持久的和非模态的，允许用户在任何时候忽略它们或与它们交互。

  • SnackBar提示信息

带有可选操作的轻量级消息，在屏幕底部短暂显示。 

import flet
from flet import ElevatedButton, SnackBar, Text

class Data:
    def __init__(self) -> None:
        self.counter = 0

d = Data()

def main(page):

    page.snack_bar = SnackBar(
        content=Text("Hello, world!"),
        action="Alright!",
    )

    def on_click(e):
        page.snack_bar = SnackBar(Text(f"Hello {d.counter}"))
        page.snack_bar.open = True
        d.counter += 1
        page.update()

    page.add(ElevatedButton("Open SnackBar", on_click=on_click))

flet.app(target=main)
  • AlertDialog警报对话框

警报对话框通知用户需要确认的情况。警报对话框有一个可选的标题和一个可选的操作列表。标题显示在内容上方，动作显示在内容下方。

import flet
from flet import AlertDialog, ElevatedButton, Page, Text, TextButton

def main(page: Page):
    page.title = "AlertDialog examples"

    dlg = AlertDialog(
        title=Text("Hello, you!"), on_dismiss=lambda e: print("Dialog dismissed!")
    )

    def close_dlg(e):
        dlg_modal.open = False
        page.update()

    dlg_modal = AlertDialog(
        modal=True,
        title=Text("Please confirm"),
        content=Text("Do you really want to delete all those files?"),
        actions=[
            TextButton("Yes", on_click=close_dlg),
            TextButton("No", on_click=close_dlg),
        ],
        actions_alignment="end",
        on_dismiss=lambda e: print("Modal dialog dismissed!"),
    )

    def open_dlg(e):
        page.dialog = dlg
        dlg.open = True
        page.update()

    def open_dlg_modal(e):
        page.dialog = dlg_modal
        dlg_modal.open = True
        page.update()

    page.add(
        ElevatedButton("Open dialog", on_click=open_dlg),
        ElevatedButton("Open modal dialog", on_click=open_dlg_modal),
    )

flet.app(target=main)

7、FilePicker文件选择器

  • 一个控件，允许您使用本机文件资源管理器来选择单个或多个文件，并具有扩展过滤支持和上传。
import flet
from flet import (
    ElevatedButton,
    FilePicker,
    FilePickerResultEvent,
    Page,
    Row,
    Text,
    icons,
)


def main(page: Page):
    # Pick files dialog
    def pick_files_result(e: FilePickerResultEvent):
        selected_files.value = (
            ", ".join(map(lambda f: f.name, e.files)) if e.files else "Cancelled!"
        )
        selected_files.update()

    pick_files_dialog = FilePicker(on_result=pick_files_result)
    selected_files = Text()

    # Save file dialog
    def save_file_result(e: FilePickerResultEvent):
        save_file_path.value = e.path if e.path else "Cancelled!"
        save_file_path.update()

    save_file_dialog = FilePicker(on_result=save_file_result)
    save_file_path = Text()

    # Open directory dialog
    def get_directory_result(e: FilePickerResultEvent):
        directory_path.value = e.path if e.path else "Cancelled!"
        directory_path.update()

    get_directory_dialog = FilePicker(on_result=get_directory_result)
    directory_path = Text()

    # hide all dialogs in overlay
    page.overlay.extend([pick_files_dialog, save_file_dialog, get_directory_dialog])

    page.add(
        Row(
            [
                ElevatedButton(
                    "Pick files",
                    icon=icons.UPLOAD_FILE,
                    on_click=lambda _: pick_files_dialog.pick_files(
                        allow_multiple=True
                    ),
                ),
                selected_files,
            ]
        ),
        Row(
            [
                ElevatedButton(
                    "Save file",
                    icon=icons.SAVE,
                    on_click=lambda _: save_file_dialog.save_file(),
                    disabled=page.web,
                ),
                save_file_path,
            ]
        ),
        Row(
            [
                ElevatedButton(
                    "Open directory",
                    icon=icons.FOLDER_OPEN,
                    on_click=lambda _: get_directory_dialog.get_directory_path(),
                    disabled=page.web,
                ),
                directory_path,
            ]
        ),
    )


flet.app(target=main)

Upload multiple files上传多个文件

from typing import Dict

import flet
from flet import (
    ElevatedButton,
    FilePicker,
    FilePickerResultEvent,
    FilePickerUploadEvent,
    FilePickerUploadFile,
    Page,
    ProgressRing,
    Ref,
    Row,
    Text,
    icons,
)
from flet.column import Column


def main(page: Page):
    prog_bars: Dict[str, ProgressRing] = {}
    files = Ref[Column]()
    upload_button = Ref[ElevatedButton]()

    def file_picker_result(e: FilePickerResultEvent):
        upload_button.current.disabled = True if e.files == None else False
        prog_bars.clear()
        files.current.controls.clear()
        if e.files != None:
            for f in e.files:
                prog = ProgressRing(value=0, bgcolor="#eeeeee", width=20, height=20)
                prog_bars[f.name] = prog
                files.current.controls.append(Row([prog, Text(f.name)]))
        page.update()

    def on_upload_progress(e: FilePickerUploadEvent):
        prog_bars[e.file_name].value = e.progress
        prog_bars[e.file_name].update()

    file_picker = FilePicker(on_result=file_picker_result, on_upload=on_upload_progress)

    def upload_files(e):
        uf = []
        if file_picker.result != None and file_picker.result.files != None:
            for f in file_picker.result.files:
                uf.append(
                    FilePickerUploadFile(
                        f.name,
                        upload_url=page.get_upload_url(f.name, 600),
                    )
                )
            file_picker.upload(uf)

    # hide dialog in a overlay
    page.overlay.append(file_picker)

    page.add(
        ElevatedButton(
            "Select files...",
            icon=icons.FOLDER_OPEN,
            on_click=lambda _: file_picker.pick_files(allow_multiple=True),
        ),
        Column(ref=files),
        ElevatedButton(
            "Upload",
            ref=upload_button,
            icon=icons.UPLOAD,
            on_click=upload_files,
            disabled=True,
        ),
    )


flet.app(target=main, upload_dir="uploads")#目标文件路径

一个典型的 Flet 程序以调用 flet.app() 结束，应用程序开始等待新的用户会话。函数 main() 是 Flet 应用程序中的入口点。每个用户会话都在一个新线程上调用它，并传入一个Page 实例。

目前这个项目还只是一个BETA版的，功能组件还在进一步完善，目前已有组件交互效果、美观程度非常nice！造车的轮子都给大家准备好了，各位有兴趣的小伙伴可以尝试参考官方文档开发一些基础应用。下次分享Flet框架实际应用案例讲解，敬请期待~

相关文章