【传奇开心果系列】Flet纵向瀑布流本地图片布局排列自定义模板

一、效果GIF动图

二、特色说明

1. 本地图片展示：该应用从本地文件夹中读取图片，并在界面上以瀑布流的形式展示。

2. 多列布局：通过计算每列的图片数量，将图片均匀分布在多列中，形成瀑布流效果。

3. 响应式设计：使用 ft.Row 和 ft.Column 控件，确保布局在不同屏幕尺寸下都能良好显示。

4. 自动滚动：使用 ft.Column 控件的 scroll 属性，当内容超出容器高度时，自动启用垂直滚动条。

5. 图片适应：使用 ft.ImageFit.COVER 属性，确保图片在固定宽度下保持比例并填充整个控件区域。

三、代码结构

1. 导入模块：

flet：用于创建用户界面。
os：用于处理文件路径。

2. 设置页面标题：

page.title = “本地图片瀑布流”：设置页面的标题。

3. 获取图片文件列表：

image_folder = “images”：指定图片文件夹路径。
images = [os.path.join(image_folder, f"{i}.jpg") for i in range(1, 10)]：生成图片文件路径列表。

4. 计算每列的图片数量：

num_columns = 3：设置列数。
num_images_per_column = len(images) // num_columns：计算每列的图片数量。

5. 创建图片控件列表：

遍历每列，计算每列的起始和结束索引。
使用 ft.Image 控件创建每张图片的显示控件。
将每列的图片控件添加到 ft.Column 中。

6. 水平排列列：

使用 ft.Row 控件将所有列水平排列。

7. 添加垂直滚动条：

使用 ft.Column 控件包裹 ft.Row，并启用垂直滚动条。

8. 添加到页面：

将包含滚动条的 ft.Column 添加到页面中。

9. 运行应用：

ft.app(target=main)：启动应用。
四、源码下载地址
https://download.csdn.net/download/jackchuanqi/91528409