文本 Text

文本是用于显示文本的控件。

示例

在线示例

自定义文本样式

import flet as ft

def main(page: ft.Page):
    page.title = "自定义文本样式"
    page.scroll = "adaptive"

    page.add(
        ft.Text("大小为10", size=10),
        ft.Text("大小为30，斜体", size=30, color="pink600", italic=True),
        ft.Text(
            "大小为40，w100",
            size=40,
            color=ft.colors.WHITE,
            bgcolor=ft.colors.BLUE_600,
            weight=ft.FontWeight.W_100,
        ),
        ft.Text(
            "大小为50，普通",
            size=50,
            color=ft.colors.WHITE,
            bgcolor=ft.colors.ORANGE_800,
            weight=ft.FontWeight.NORMAL,
        ),
        ft.Text(
            "大小为60，粗体，斜体",
            size=50,
            color=ft.colors.WHITE,
            bgcolor=ft.colors.GREEN_700,
            weight=ft.FontWeight.BOLD,
            italic=True,
        ),
        ft.Text("大小为70，w900，可选", size=70, weight=ft.FontWeight.W_900, selectable=True),
        ft.Text("限制长文本为1行并使用省略号", style=ft.TextThemeStyle.HEADLINE_SMALL),
        ft.Text(
            "Proin rutrum, purus sit amet elementum volutpat, nunc lacus vulputate orci, cursus ultrices neque dui quis purus. Ut ultricies purus nec nibh bibendum, eget vestibulum metus varius. Duis convallis maximus justo, eu rutrum libero maximus id. Donec ullamcorper arcu in sapien molestie, non pellentesque tellus pellentesque. Nulla nec tristique ex. Maecenas euismod nisl enim, a convallis arcu laoreet at. Ut at tortor finibus, rutrum massa sit amet, pulvinar velit. Phasellus diam lorem, viverra vitae leo vitae, consequat suscipit lorem.",
            max_lines=1,
            overflow="ellipsis",
        ),
        ft.Text("限制长文本为2行并淡出", style=ft.TextThemeStyle.HEADLINE_SMALL),
        ft.Text(
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis nibh vitae purus consectetur facilisis sed vitae ipsum. Quisque faucibus sed nulla placerat sagittis. Phasellus condimentum risus vitae nulla vestibulum auctor. Curabitur scelerisque, nibh eget imperdiet consequat, odio ante tempus diam, sed volutpat nisl erat eget turpis. Sed viverra, diam sit amet blandit vulputate, mi tellus dapibus lorem, vitae vehicula diam mauris placerat diam. Morbi sit amet pretium turpis, et consequat ligula. Nulla velit sem, suscipit sit amet dictum non, tincidunt sed nulla. Aenean pellentesque odio porttitor sagittis aliquam. Nam varius at metus vitae vulputate. Praesent faucibus nibh lorem, eu pretium dolor dictum nec. Phasellus eget dui laoreet, viverra magna vitae, pellentesque diam.",
            max_lines=2,
        ),
        ft.Text("限制长文本的宽度和高度", style=ft.TextThemeStyle.HEADLINE_SMALL),
        ft.Text(
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis nibh vitae purus consectetur facilisis sed vitae ipsum. Quisque faucibus sed nulla placerat sagittis. Phasellus condimentum risus vitae nulla vestibulum auctor. Curabitur scelerisque, nibh eget imperdiet consequat, odio ante tempus diam, sed volutpat nisl erat eget turpis. Sed viverra, diam sit amet blandit vulputate, mi tellus dapibus lorem, vitae vehicula diam mauris placerat diam. Morbi sit amet pretium turpis, et consequat ligula. Nulla velit sem, suscipit sit amet dictum non, tincidunt sed nulla. Aenean pellentesque odio porttitor sagittis aliquam. Nam varius at metus vitae vulputate. Praesent faucibus nibh lorem, eu pretium dolor dictum nec. Phasellus eget dui laoreet, viverra magna vitae, pellentesque diam.",
            width=700,
            height=100,
        ),
    )

ft.app(target=main)

预定义的主题文本样式

import flet as ft

def main(page: ft.Page):
    page.title = "文本主题样式"
    page.scroll = "adaptive"

    page.add(
        ft.Text("大号展示文本", style=ft.TextThemeStyle.DISPLAY_LARGE),
        ft.Text("中号展示文本", style=ft.TextThemeStyle.DISPLAY_MEDIUM),
        ft.Text("小号展示文本", style=ft.TextThemeStyle.DISPLAY_SMALL),
        ft.Text("大号标题", style=ft.TextThemeStyle.HEADLINE_LARGE),
        ft.Text("中号标题", style=ft.TextThemeStyle.HEADLINE_MEDIUM),
        ft.Text("小号标题", style=ft.TextThemeStyle.HEADLINE_SMALL),
        ft.Text("大号标题", style=ft.TextThemeStyle.TITLE_LARGE),
        ft.Text("中号标题", style=ft.TextThemeStyle.TITLE_MEDIUM),
        ft.Text("小号标题", style=ft.TextThemeStyle.TITLE_SMALL),
        ft.Text("大号标签", style=ft.TextThemeStyle.LABEL_LARGE),
        ft.Text("中号标签", style=ft.TextThemeStyle.LABEL_MEDIUM),
        ft.Text("小号标签", style=ft.TextThemeStyle.LABEL_SMALL),
        ft.Text("大号正文", style=ft.TextThemeStyle.BODY_LARGE),
        ft.Text("中号正文", style=ft.TextThemeStyle.BODY_MEDIUM),
        ft.Text("小号正文", style=ft.TextThemeStyle.BODY_SMALL),
    )

ft.app(target=main)

可变字重的字体

import flet as ft

def main(page: ft.Page):
    page.fonts = {
        "RobotoSlab": "https://github.com/google/fonts/raw/main/apache/robotoslab/RobotoSlab%5Bwght%5D.ttf"
    }

    t = ft.Text(
        "这是使用 Roboto Slab 字体渲染的文本",
        size=30,
        font_family="RobotoSlab",
        weight=ft.FontWeight.W_100,
    )

    def width_changed(e):
        t.weight = f"w{int(e.control.value)}"
        t.update()

    page.add(
        t,
        ft.Slider(
            min=100,
            max=900,
            divisions=8,
            label="{value}",
            width=500,
            on_change=width_changed,
        ),
    )

ft.app(target=main)

富文本基础知识

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Text("纯文本，默认样式"),
        ft.Text(
            "一些文本",
            size=30,
            spans=[
                ft.TextSpan(
                    "这里是斜体",
                    ft.TextStyle(italic=True, size=20, color=ft.colors.GREEN),
                    spans=[
                        ft.TextSpan(
                            "加粗和斜体",
                            ft.TextStyle(weight=ft.FontWeight.BOLD),
                        ),
                        ft.TextSpan(
                            "只有斜体",
                            spans=[
                                ft.TextSpan("较小的斜体", ft.TextStyle(size=15))
                            ],
                        ),
                    ],
                )
            ],
        ),
        ft.Text(
            disabled=False,
            spans=[
                ft.TextSpan(
                    "下划线和可点击",
                    ft.TextStyle(decoration=ft.TextDecoration.UNDERLINE),
                    on_click=lambda e: print(f"点击了span: {e.control.uid}"),
                    on_enter=lambda e: print(f"进入了span: {e.control.uid}"),
                    on_exit=lambda e: print(f"离开了span: {e.control.uid}"),
                ),
                ft.TextSpan(" "),
                ft.TextSpan(
                    "红色波浪下划线",
                    ft.TextStyle(
                        decoration=ft.TextDecoration.UNDERLINE,
                        decoration_color=ft.colors.RED,
                        decoration_style=ft.TextDecorationStyle.WAVY,
                    ),
                    on_enter=lambda e: print(f"进入了span: {e.control.uid}"),
                    on_exit=lambda e: print(f"离开了span: {e.control.uid}"),
                ),
                ft.TextSpan(" "),
                ft.TextSpan(
                    "上划线蓝色",
                    ft.TextStyle(
                        decoration=ft.TextDecoration.OVERLINE, decoration_color="blue"
                    ),
                ),
                ft.TextSpan(" "),
                ft.TextSpan(
                    "上划线和下划线",
                    ft.TextStyle(
                        decoration=ft.TextDecoration.OVERLINE
                        | ft.TextDecoration.UNDERLINE
                    ),
                ),
                ft.TextSpan(" "),
                ft.TextSpan(
                    "删除线粗",
                    ft.TextStyle(
                        decoration=ft.TextDecoration.LINE_THROUGH,
                        decoration_thickness=3,
                    ),
                ),
            ],
        ),
    )

    def highlight_link(e):
        e.control.style.color = ft.colors.BLUE
        e.control.update()

    def unhighlight_link(e):
        e.control.style.color = None
        e.control.update()

    page.add(
        ft.Text(
            disabled=False,
            spans=[
                ft.TextSpan("AwesomeApp 1.0 "),
                ft.TextSpan(
                    "访问我们的网站",
                    ft.TextStyle(decoration=ft.TextDecoration.UNDERLINE),
                    url="https://google.com",
                    on_enter=highlight_link,
                    on_exit=unhighlight_link,
                ),
                ft.TextSpan(" 版权所有. "),
                ft.TextSpan(
                    "文档",
                    ft.TextStyle(decoration=ft.TextDecoration.UNDERLINE),
                    url="https://google.com",
                    on_enter=highlight_link,
                    on_exit=unhighlight_link,
                ),
            ],
        ),
    )

ft.app(main)

带有边框和描边的富文本

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Stack(
            [
                ft.Text(
                    spans=[
                        ft.TextSpan(
                            "你好，星球！",
                            ft.TextStyle(
                                size=40,
                                weight=ft.FontWeight.BOLD,
                                foreground=ft.Paint(
                                    color=ft.colors.BLUE_700,
                                    stroke_width=6,
                                    stroke_join=ft.StrokeJoin.ROUND,
                                    style=ft.PaintingStyle.STROKE,
                                ),
                            ),
                        ),
                    ],
                ),
                ft.Text(
                    spans=[
                        ft.TextSpan(
                            "你好，星球！",
                            ft.TextStyle(
                                size=40,
                                weight=ft.FontWeight.BOLD,
                                color=ft.colors.GREY_300,
                            ),
                        ),
                    ],
                ),
            ]
        )
    )

ft.app(main)

带有渐变效果的富文本

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Text(
            spans=[
                ft.TextSpan(
                    "你好，星球！",
                    ft.TextStyle(
                        size=40,
                        weight=ft.FontWeight.BOLD,
                        foreground=ft.Paint(
                            gradient=ft.PaintLinearGradient(
                                (0, 20), (150, 20), [ft.colors.RED, ft.colors.YELLOW]
                            )
                        ),
                    ),
                ),
            ],
        )
    )

ft.app(main)

属性

bgcolor

文本背景颜色。

color

文本前景颜色。

font_family

用于渲染文本的系统或自定义字体系列。请查看page.fonts以了解如何导入和使用自定义字体。

使用系统字体

您可以使用计算机上安装的字体，例如"Consolas"、"Arial"、"Verdana"、"Tahoma"等。例如：

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Text("这段文本使用Consolas字体渲染", font_family="Consolas")
    )

ft.app(target=main)

但是有一个限制 - 在使用"CanvasKit"渲染器的Flet Web应用中无法使用系统字体。

Flet Web应用可以使用以下渲染器之一来渲染其用户界面：

• HTML渲染器 - 使用HTML元素、CSS、Canvas元素和SVG元素的组合。该渲染器具有较小的下载大小。
• CanvasKit渲染器 - 此渲染器与Flutter移动和桌面完全一致，具有更高的小部件密度和更快的性能，但会增加约2MB的下载大小。

默认情况下，Flet在桌面和移动浏览器上都使用CanvasKit渲染器。

在运行Flet程序时，您可以明确设置要使用的渲染器：

# ...
ft.app(target=main, view=ft.AppView.WEB_BROWSER, web_renderer=ft.WebRenderer.HTML)

现在，当您运行相同的程序时，您将看到使用"Consolas"字体。

支持的web_renderer值：

• canvaskit（默认值） - 优先考虑性能和在桌面和移动浏览器上的像素完美一致性。
• html - 在桌面和移动浏览器上优化下载大小而非性能。
• auto - 在移动浏览器上优化下载大小，在桌面浏览器上优化性能。

italic

设置为True以使用斜体字体。

max_lines

文本跨越的最大行数，如果需要可以换行。如果文本超过给定的行数，将根据overflow进行截断。

如果为1，文本不会换行。否则，文本将在框的边缘处换行。

no_wrap

如果为False（默认值），则文本应在软换行处断开。

如果为True，则文本中的字形将被定位，就好像有无限的水平空间一样。

overflow

属性值是TextOverflow枚举，具有以下值：

• FADE（默认值）
• ELLIPSIS
• CLIP
• VISIBLE

selectable

如果文本应该可选择，则为True。

semantics_label

此文本的替代语义标签。

如果存在，此控件的语义将包含此值，而不是实际文本。

这对于用完整的文本值替换缩写或简写非常有用：

ft.Text("$$", semantics_label="双美元")

size

虚拟像素中的文本大小。默认为14。

spans

用于构建富文本段落的ft.TextSpan对象列表。

style

属性值为TextThemeStyle枚举类型，可选值如下：

text_align

文本水平对齐方式。

属性值是 TextAlign 枚举，具有以下值：

• LEFT（默认）
• RIGHT
• CENTER
• JUSTIFY
• START
• END

theme_style

主题样式。

属性值是 TextThemeStyle 枚举，具有以下值：

• DISPLAY_LARGE
• DISPLAY_MEDIUM
• DISPLAY_SMALL
• HEADLINE_LARGE
• HEADLINE_MEDIUM
• HEADLINE_SMALL
• TITLE_LARGE
• TITLE_MEDIUM
• TITLE_SMALL
• LABEL_LARGE
• LABEL_MEDIUM
• LABEL_SMALL
• BODY_LARGE
• BODY_MEDIUM
• BODY_SMALL

value

显示的文本内容。

weight

字体的粗细程度。

属性值为FontWeight枚举类型，可选值如下：

• NORMAL（默认值）
• BOLD
• W_100
• W_200
• W_300
• W_400
• W_500
• W_600
• W_700
• W_800
• W_900

TextStyle 属性

描述文本格式和绘制方式的样式。

bgcolor

参见 Text.bgcolor。

color

参见 Text.color。

decoration

绘制在文本附近的装饰效果（例如下划线）。

属性值为 ft.TextDecoration 枚举类型：

• NONE（默认值）- 不绘制装饰效果。
• UNDERLINE- 在每行文本下方绘制一条线。
• OVERLINE- 在每行文本上方绘制一条线。
• LINE_THROUGH- 在每行文本中间绘制一条线。

该枚举类型是一个标志，可以将多个装饰效果组合在一起，例如：

style = ft.TextStyle(decoration=ft.TextDecoration.UNDERLINE | ft.TextDecoration.OVERLINE)

decoration_color

绘制文本装饰效果时使用的颜色。

decoration_style

绘制文本装饰效果的样式（例如虚线）。

属性值为 ft.TextDecorationStyle 枚举类型：

• SOLID（默认值）- 绘制实线。
• DOUBLE- 绘制两条线。
• DOTTED- 绘制点线。
• DASHED- 绘制虚线。
• WAVY- 绘制波浪线。

decoration_thickness

装饰效果线条的粗细，以字体定义的粗细为基准的倍数。

font_family

参见 Text.font_family。

foreground

作为文本前景绘制的画笔。

属性值为 ft.Paint 类。

italic

是否使用斜体字体。

shadow

参见 Container.shadow。

size

绘制文本时使用的字形大小（以逻辑像素为单位）。默认值为14。

weight

字体的粗细程度 - 可参见 Text.weight 中的可选值。

TextSpan 属性

文本的一个片段。

spans

要包含的其他文本片段。

如果同时定义了 text 和 spans，则 text 将位于 spans 之前。

style

应用于此文本片段的 TextStyle。

text

此片段中包含的文本。

如果同时定义了 text 和 spans，则 text 将位于 spans 之前。

url

单击该片段时要打开的 URL。如果注册了该 URL，则在打开 URL 后触发 on_click 事件。

url_target

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

• _blank（默认值）- 新标签页/窗口。
• _self - 当前标签页/窗口。

TextSpan 事件

on_click

单击该片段时触发。

on_enter

鼠标指针进入该片段时触发。

on_exit

鼠标指针离开该片段时触发。