GridView is a powerful and efficient component in Flet for displaying a scrollable, two-dimensional array of controls. It is particularly effective for handling large lists containing thousands of items, ensuring smooth scrolling performance compared to using a wrapped Column or Row.
Why Use GridView?
GridView is optimized for large datasets, making it preferable over traditional Column or Row layouts when working with many elements. A great example of its usage is in the Flet Icons Browser, where it efficiently organizes and displays a large number of icons.
Example: Photo Gallery
Below is a simple example demonstrating how to create a photo gallery using GridView in Flet.
import flet as ft
def main(page: ft.Page):
page.title = "GridView Example"
page.theme_mode = ft.ThemeMode.DARK
page.padding = 50
page.update()
images = ft.GridView(
expand=1,
runs_count=5,
max_extent=150,
child_aspect_ratio=1.0,
spacing=5,
run_spacing=5,
)
page.add(images)
for i in range(0, 60):
images.controls.append(
ft.Image(
src=f"https://picsum.photos/150/150?{i}",
fit=ft.ImageFit.NONE,
repeat=ft.ImageRepeat.NO_REPEAT,
border_radius=ft.border_radius.all(10),
)
)
page.update()
ft.app(main, view=ft.AppView.WEB_BROWSER)
This example dynamically loads 60 images from an online source and arranges them in a GridView with customizable spacing, aspect ratio, and scrolling behavior.
Key Properties of GridView
Layout and Display Options
-
runs_count
– Defines the number of children in the cross axis. -
max_extent
– Sets the maximum width or height of a grid item. -
child_aspect_ratio
– Determines the ratio of width to height for each child. -
spacing
– Specifies the space between each child in the main axis. -
run_spacing
– Defines spacing between rows or columns.
Scrolling Behavior
-
auto_scroll
– If set toTrue
, the scrollbar automatically moves to the end when items are updated. -
reverse
– Reverses the scrolling direction if set toTrue
. -
horizontal
– Allows GridView to be displayed in a horizontal layout. -
scroll_to(offset, delta, key, duration, curve)
– Moves the scroll position based on absolute offset, relative delta, or a specified control.
Performance Optimization
-
cache_extent
– Determines how many extra pixels are preloaded before and after the visible area, enhancing scroll performance. -
semantic_child_count
– Specifies the number of children contributing semantic information for accessibility.
Events
-
on_scroll
– Fires when the scroll position is changed by the user, allowing for event-driven behavior such as lazy loading.
Conclusion
GridView is an essential component in Flet for creating high-performance, scrollable grids. Whether you're building photo galleries, icon browsers, or product listings, GridView offers the flexibility, efficiency, and smooth scrolling performance needed for an optimal user experience.
Copyright Statement: Unless stated otherwise, all articles are original to this site, please credit the source when sharing.
Article link:http://pybeginners.com/python-flet/understanding-gridview-in-flet/
License Agreement:Attribution-NonCommercial 4.0 International License