开发任何应用，都少不了图象，这是必备技术。虽然简单，仍有技巧。

今天，我们设计一个常见的滚动图片效果，以此说明 Flet 的 图象 Image 控件使用。

一、单个图片/普通图片使用

就是定义一个 ft.Image 对象即可，设定相关属性。这里特别说明一下代码 fit=ft.ImageFit.CONTAIN ，这是个“新知识点”。

属性 fit：

如何将图像镶入分配的空间。默认为 NONE，其他值是 ImageFit 枚举值，ImageFit 包括以下几个值：

• NONE - 无
• CONTAIN - 包含
• COVER - 覆盖
• FILL - 填充
• FIT_HEIGHT - 适应高度
• FIT_WIDTH - 适应宽度
• SCALE_DOWN - 缩小

二、多个图片，在制定区域滑动显示

三、图象 Image 的相关属性介绍

border_radius

将图像剪裁为圆角。border_radius 是 BorderRadius 类的实例。

border_radius.BorderRadius 类具有描述四个角值的以下属性：

• top_left （左上）
• top_right （右上）
• bottom_left （左下）
• bottom_right （右下）

color

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

color_blend_mode

用于将 color 与图像组合的方式。属性值是 BlendMode 。默认值为 BlendMode.COLOR。在混合模式方面，颜色是源，此图像是目标。

BlendMode 枚举具有以下值：

• CLEAR（清除）
• COLOR（颜色）
• COLOR_BURN（颜色加深）
• COLOR_DODGE（颜色减淡）
• DARKEN（加深）
• DIFFERENCE（差值）
• DST（目标）
• DST_A_TOP（目标顶部）
• DST_IN（目标内部）
• DST_OUT（目标外部）
• DST_OVER（目标覆盖）
• EXCLUSION（排除）
• HARD_LIGHT（强光）
• HUE（色调）
• LIGHTEN（减淡）
• LUMINOSITY（亮度）
• MODULATE（调制）
• MULTIPLY（正片叠底）
• OVERLAY（叠加）
• PLUS（加）
• SATURATION（饱和度）
• SCREEN（屏幕）
• SOFT_LIGHT（柔光）
• SRC（源）
• SRC_A_TOP（源顶部）
• SRC_IN（源内部）
• SRC_OUT（源外部）
• SRC_OVER（源覆盖）
• VALUES（值）
• XOR（异或）

error_content

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

exclude_from_semantics

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

filter_quality

图像的渲染质量。值是 FilterQuality 。默认为 FilterQuality.MEDIUM。

FilterQuality 枚举具有以下值：

• NONE
• LOW
• MEDIUM
• HIGH

fit

前面已介绍，不再重复

gapless_playback

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

width

如果设置了，要求图像具有此宽度。如果未设置，图像将选择最能保持其固有宽高比的大小。

height

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

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

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

semantics_label

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

src

图像源。这可以是外部 URL 或本地资源文件asset file。

src_base64

从 Base64 编码的字符串显示图像

repeat

如何绘制布局边界未覆盖的任何部分。该值是 ImageRepeat 。默认为 NO_REPEAT。

ImageRepeat 枚举具有以下值：

• NO_REPEAT（不重复）
• REPEAT（重复）
• REPEAT_X（在水平方向重复）
• REPEAT_Y（在垂直方向重复）

semantics_label

此图像的语义标签。

tooltip

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

四、图象自动播放/滚动

这里暂略，在分享 Flet 动画 知识点时，我们再补充，不然要跳跃将“Flet 动画”了

（汇报完毕，感谢收看，收藏+点赞！）

#python# #flet# #程序#