Text 控件

Text控件用于输出文本数据。它的主要属性是value和size，但它也有许多格式化属性来控制其外观。例如

t = Text(
    value="This is a Text control sample",
    size=30,
    color="white",
    bgcolor="pink",
    weight="bold",
    italic=True,
)
page.add(t)

Text style

import flet
from flet import ListView, Page, Text

def main(page: Page):
    page.title = "Text theme styles"
    page.scroll = "adaptive"

    page.add(
        Text("Display Large", style="displayLarge"),
        Text("Display Medium", style="displayMedium"),
        Text("Display Small", style="displaySmall"),
        Text("Headline Large", style="headlineLarge"),
        Text("Headline Medium", style="headlineMedium"),
        Text("Headline Small", style="headlineMedium"),
        Text("Title Large", style="titleLarge"),
        Text("Title Medium", style="titleMedium"),
        Text("Title Small", style="titleSmall"),
        Text("Label Large", style="labelLarge"),
        Text("Label Medium", style="labelMedium"),
        Text("Label Small", style="labelSmall"),
        Text("Body Large", style="bodylLarge"),
        Text("Body Medium", style="bodyMedium"),
        Text("Body Small", style="bodySmall"),
    )

flet.app(target=main)

Text 属性

value

显示的字符

size

显示像素大小，默认14

weight

默认 normal，支持 bold, w100, w200, w300, w400, w500, w600, w700, w800, w900

italic

斜体：True ，False

no_wrap

默认值：False，超过边界自动分行，True：截断

style：

字体样式：

"displayLarge",

"displayMedium",

"displaySmall",

"headlineLarge",

"headlineMedium",

"headlineSmall",

"titleLarge",

"titleMedium",

"titleSmall",

"labelLarge",

"labelMedium",

"labelSmall",

"bodyLarge",

"bodyMedium",

"bodySmall",

max-lines:

no-wrap必须为False，否则多行不生效

文本如超出给定的行数，则溢出截断

overflow：

溢出部分文字的处理，支持fade (默认), ellipsis, clip, visible

selectable：

否是可选择，True，False

color：

字体颜色，"red","blue",或者colors.RED,colors.BLUE

bgcolor：

背景色，"red","blue",或者colors.RED,colors.BLUE

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)

Icon 属性

name：

图标名字，如icons.XXX

color:

图标颜色

size：

图标大写，默认24

tooltip:

鼠标悬停，显示信息

Image 控件

显示图片

import flet
from flet import Image, Page, Row, border_radius

def main(page: Page):
    page.title = "Images Example"
    page.theme_mode = "light"
    page.padding = 50
    page.update()

    img = Image(
        src="/a2020/img/data-img.jpg" data-src=f"/icons/icon-512.png",
        width=100,
        height=100,
        fit="contain",
    )
    images = Row(expand=1, wrap=False, scroll="always")

    page.add(img, images)

    for i in range(0, 30):
        images.controls.append(
            Image(
                src="/a2020/img/data-img.jpg" data-src=f"https://picsum.photos/200/200?{i}",
                width=200,
                height=200,
                fit="none",
                repeat="noRepeat",
                border_radius=border_radius.all(10),
            )
        )
    page.update()

flet.app(target=main)

Image 属性

src:

网络地址如
https://picsum.photos/200/200

或者本地文件地址 /images/my-image.png，本地需要指定assets文件位置，如文件结构如下

/assets
   /images/my-image.png
main.py

程序

import flet
from flet import Page, Image

def main(page: Page):
    page.add(Image(src=f"/images/my-image.png"))

flet.app(
    target=main,
    assets_dir="assets"
)

src_base64:

使用如下

import flet
from flet import Page, Image

def main(page: Page):
    page.add(Image(src_base64="iVBORw0KGgoAAAANSUhEUgAAABkAAAAgCAYAAADnnNMGAAAACXBIWXMAAAORAAADkQFnq8zdAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA6dJREFUSImllltoHFUYx3/fzOzm0lt23ZrQ1AQbtBehNpvQohgkBYVo410RwQctNE3Sh0IfiiBoIAjqi6TYrKnFy4O3oiiRavDJFi3mXomIBmOxNZe63ay52GR3Zj4f2sTEzmx3m//TYf7/c35zvgPnO6KqrESXqpq3muocAikv6m+/zytj3ejik1VN21G31YA9CgJ6xC+bMyQZPVCuarciPAMYC99V6Vw5pLbFSibHmlVoRVj9P3cmPBM8tSJI/M6mzabpfoAQ9fIF7WK4bd5vvuFnLGgy2vi0abg94A0AcJGvMq3hDxGRyar9r4F+iLAm0yIiRk8m37tctS1WsrIhhrI30+Srmg+J87OXUf3lWGS1q89dC6ltsSanxk4Aj2QBABii96300g87P/rtlrWr8l+vyDMfdlXSyyEikqxsiOUAQJCBhfHdXRfCq1LSsSlcWG+KBAGStvvrMkgiuv8lUc2mREukPwLUfHG+uTQv8Eown7VL3XlbBxYhf1c17hbVF3MDwA9bts280TnaU1YYqPby07aeFlUlHt27wSQ4CLo+F8AvoTCvHmyKF+ZbEb/M77P2LgvAwmrTHAHflN3KZxVbMC2jMFNOpgPnrMSOhvvFkMezXdwV4ePbtvHtxnJAMQ0j4JtVnO+eLb5oiSlt5HDbv7t1O90lpYCCCKbhfzW5kAIwUAazR0BlfII8Ow0I6uoVmI9MyAMwbMs8CExmDbk4zgu931MyO4OI4KrYflkRjOoTI+uM9d1vjotwKPu9QMk/sxzuO8POiVFcdZ1M2YBVsMEAKOqLvaPIe7mACuw0z/80SMH58SMplxlfiDhVi7dw2pltRhjKBQTQdrSja2KKTfE551NHuaZ0QVPvWYQUn31/Vm2nDvgjF4grVJx6suSvrvrSJ/6cSW2Oz9mf264uNrB806xZ1k/CZ49dUKgDEtlCROX2hfHpx8pGuuo3PpqYulw8fjndOp1yhgtNKRevJ1FyR2Ola+jXAjdnwTkZ6o896GdWdxDw7IxFg+0DpmXchTKSBWQnIuJn9u4j7dt+13UfHXEkXQOcuQ4kMhVtqsgUyPiQiPQfHw1NB2sRjmXKuTg1NwwBYLhtPtQX26eqTwGXPDOqvmcC4Hnwfrrad94GrVsOYTqUTkQY+iTlNe/6O1miSP/x0VB/+wMIDwHn/vtV1iQC4Xv95uUEWVCoL9Y5Z+gdovoyMHUFJHv88jmVy0vTuw7cZNv2YaA61Bfb7ZX5F8SaUv2xwZevAAAAAElFTkSuQmCC"))

flet.app(target=main)

转化文件内容到base64

linux，wsl，macos

base64 -i  -o 

windows powershell

[convert]::ToBase64String((Get-Content -path "your_file_path" -Encoding byte))

width：

宽度

height：

高度

repeat:

绘制XY方向，支持noRepeat (默认), repeat, repeatX, repeatY

fit：

类似repeat，支持 none (默认), contain, cover, fill, fitHeight, fitWidth, scaleDown

border_radius:

图片四角的弧度

tooltip:

鼠标悬停，提示信息