跳到主要内容

图像

图像是某物的图形表示(例如照片或插图)。

示例

实时示例

import flet as ft

def main(page: ft.Page):
page.title = "图像示例"
page.theme_mode = ft.ThemeMode.LIGHT
page.padding = 50
page.update()

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

page.add(img, images)

for i in range(0, 30):
images.controls.append(
ft.Image(
src=f"https://picsum.photos/200/200?{i}",
width=200,
height=200,
fit=ft.ImageFit.NONE,
repeat=ft.ImageRepeat.NO_REPEAT,
border_radius=ft.border_radius.all(10),
)
)
page.update()

ft.app(target=main)

属性

border_radius

将图像剪裁为圆角。border_radiusborder_radius.BorderRadius 类的实例。

color

如果设置了,将此颜色与每个图像像素混合使用 color_blend_mode

color_blend_mode

用于将 color 与图像组合的方式。属性值是 BlendMode 枚举。

默认值为 BlendMode.COLOR。在混合模式方面,颜色是源,此图像是目标。

error_content

如果无法从源加载图像,则显示备用的 Control

exclude_from_semantics

是否将此图像排除在语义之外。默认为 False

filter_quality

图像的渲染质量。值是 FilterQuality 枚举。默认为 LOW

fit

如何将图像镶入分配的空间。

该值是 ImageFit 枚举。默认为 NONE

gapless_playback

当图像提供者更改时,是否继续显示旧图像(True),或者短暂地显示空白(False)。默认值为 False

height

如果设置了,要求图像具有此高度。

如果未设置,图像将选择最能保持其固有宽高比的大小。

备注

强烈建议要么同时指定宽度和高度,要么将图像放置在设置了紧凑布局约束的上下文中,以便图像在加载时不会改变大小。如果无法提前知道图像的确切尺寸,请考虑使用 fit 来调整图像的呈现以适应给定的宽度和高度。

semantics_label

图像的语义描述。用于向 Android 上的 TalkBack 和 iOS 上的 VoiceOver 提供图像描述。

src

图像 URL。这可以是外部 URL,例如 https://picsum.photos/200/200,也可以是内部 URL 用于引用应用程序资产,例如 /my-image.png

您可以在 flet.app() 调用中指定 assets_dir 来设置应用程序资产的位置,这些资产应该对应用程序可用。assets_dir 可以是相对于您的 main.py 目录的路径,也可以是绝对路径。例如,考虑以下程序结构:

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

您可以如下访问您的图像:

import flet as ft

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

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

src_base64

从 Base64 编码的字符串显示图像,例如:

import flet as ft

def main(page: ft.Page):
page.add(ft.Image(src_base64="iVBORw0KGgoAAAANSUhEUgAAABkAAAAgCAYAAADnnNMGAAAACXBIWXMAAAORAAADkQFnq8zdAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA6dJREFUSImllltoHFUYx3/fzOzm0lt23ZrQ1AQbtBehNpvQohgkBYVo410RwQctNE3Sh0IfiiBoIAjqi6TYrKnFy4O3oiiRavDJFi3mXomIBmOxNZe63ay52GR3Zj4f2sTEzmx3m//TYf7/c35zvgPnO6KqrESXqpq3muocAikv6m+/zytj3ejik1VN21G31YA9CgJ6xC+bMyQZPVCuarciPAMYC99V6Vw5pLbFSibHmlVoRVj9P3cmPBM8tSJI/M6mzabpfoAQ9fIF7WK4bd5vvuFnLGgy2vi0abg94A0AcJGvMq3hDxGRyar9r4F+iLAm0yIiRk8m37tctS1WsrIhhrI30+Srmg+J87OXUf3lWGS1q89dC6ltsSanxk4Aj2QBABii96300g87P/rtlrWr8l+vyDMfdlXSyyEikqxsiOUAQJCBhfHdXRfCq1LSsSlcWG+KBAGStvvrMkgiuv8lUc2mREukPwLUfHG+uTQv8Eown7VL3XlbB

xYhf1c17hbVF3MDwA9bts280TnaU1YYqPby07aeFlUlHt27wSQ4CLo+F8AvoTCvHmyKF+ZbEb/M77P2LgvAwmrTHAHflN3KZxVbMC2jMFNOpgPnrMSOhvvFkMezXdwV4ePbtvHtxnJAMQ0j4JtVnO+eLb5oiSlt5HDbv7t1O90lpYCCCKbhfzW5kAIwUAazR0BlfII8Ow0I6uoVmI9MyAMwbMs8CExmDbk4zgu931MyO4OI4KrYflkRjOoTI+uM9d1vjotwKPu9QMk/sxzuO8POiVFcdZ1M2YBVsMEAKOqLvaPIe7mACuw0z/80SMH58SMplxlfiDhVi7dw2pltRhjKBQTQdrSja2KKTfE551NHuaZ0QVPvWYQUn31/Vm2nDvgjF4grVJx6suSvrvrSJ/6cSW2Oz9mf264uNrB806xZ1k/CZ49dUKgDEtlCROX2hfHpx8pGuuo3PpqYulw8fjndOp1yhgtNKRevJ1FyR2Ola+jXAjdnwTkZ6o896GdWdxDw7IxFg+0DpmXchTKSBWQnIuJn9u4j7dt+13UfHXEkXQOcuQ4kMhVtqsgUyPiQiPQfHw1NB2sRjmXKuTg1NwwBYLhtPtQX26eqTwGXPDOqvmcC4Hnwfrrad94GrVsOYTqUTkQY+iTlNe/6O1miSP/x0VB/+wMIDwHn/vtV1iQC4Xv95uUEWVCoL9Y5Z+gdovoyMHUFJHv88jmVy0vTuw7cZNv2YaA61Bfb7ZX5F8SaUv2xwZevAAAAAElFTkSuQmCC"))

ft.app(target=main)

使用 base64 命令(Linux、macOS、WSL)将文件转换为 Base64 格式,例如:

base64 -i <image.png> -o <image-base64.txt>

在 Windows 上,您可以使用 PowerShell 将字符串编码为 Base64 格式:

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

repeat

如何绘制布局边界未覆盖的任何部分。

该值是 ImageRepeat 枚举。默认为 NO_REPEAT

semantics_label

此图像的语义标签。

tooltip

当鼠标悬停在图像上时显示的文本。

width

如果设置了,要求图像具有此宽度。

如果未设置,图像将选择最能保持其固有宽高比的大小。

备注

强烈建议要么同时指定宽度和高度,要么将图像放置在设置了紧凑布局约束的上下文中,以便图像在加载时不会改变大小。如果无法提前知道图像的确切尺寸,请考虑使用 fit 来调整图像的呈现以适应给定的宽度和高度。