Как в flet автоматически опускать ряд вниз при добавлении контейнеров

Question

Как реализовать такой момент. У меня имеется список названия, и нужно поместить эти названия отдельно в контейнера, а также фотографии и к ним нужно сделать, чтобы он автоматически выкладывал в 1 ряд. Столько элементов, сколько поместится затем, если в списки остались ещё элементы, выкладывать их снизу с новой строки и так пока список не закончится. Не вручную добавлять в ft.Row, а чтобы он сам добавлял учитывая размер контейнера а также expand = True

import flet as ft
import findpars as pd

class Menu(ft.Container):
    def __init__(self, name, img):
        super().__init__()
        
        self.width = 200
        self.height = 200
        self.image = img
        self.image_fit = 'cover'
        self.ink = True
        self.expand = True
    
        self.bgcolor = 'Red'
        self.name = name
        self.content = ft.Column([
                                    ft.ElevatedButton('CLICK'),
                                    ft.Text(self.name)
                                ])


def main(page):
    page.theme_mode='light'
    page.horizontal_alignment=ft.CrossAxisAlignment.CENTER
    page.vertical_alignment=ft.MainAxisAlignment.CENTER
    page.scroll = True
    
    def menu(e):
        page.clean()
        
        for i in range(len(pd.name)):
            page.add(
                Menu(pd.name[i], pd.img[i])
            )
    
        page.update()
        
    
    page.add(
        ft.Image('qq.jpg', width = 100,
                                                    height = 100),
        ft.IconButton(ft.icons.HOME, on_click = menu)
    
    
    )
    
    
ft.app(main)

Answer 1

import flet as ft
import findpars as pd

class Menu(ft.Container):
    def __init__(self, name, img):
        super().__init__()

        self.width = 200
        self.height = 200
        self.image = img
        self.image_fit = 'cover'
        self.ink = True
        self.expand = True

        self.bgcolor = 'Red'
        self.name = name
        self.content = ft.Column([
            ft.ElevatedButton('CLICK'),
            ft.Text(self.name)
        ])

def main(page):
    page.theme_mode = 'light'
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.scroll = True

    def menu(e):
        page.clean()

        for i in range(len(pd.name)):
            page.add(
                Menu(pd.name[i], pd.img[i])
            )

        page.update()

    page.add(
        ft.Image('qq.jpg', width=100, height=100),
        ft.IconButton(ft.icons.HOME, on_click=menu)
    )

ft.app(main)

Answer 2

Если верно уловил вашу проблему, то предлагаю воспользоваться виджетом GridView, он позволяет располагать элементы управления в прокручиваемой сетке. Из бонусов: сам будет следить за масштабируемостью, позволяет ограничить количество единовременно отрисованных объектов если их будет очень много.

Пример:

import flet as ft

class Menu(ft.Container):
    def __init__(self, name, img):
        super().__init__()

        self.width = 200
        self.height = 200
        self.image_src = img

        self.content = ft.Column(
            [
                ft.ElevatedButton('CLICK'),
                ft.Text(name, weight="bold", color="white", size=14),
            ]
        )


def main(page):
    page.theme_mode = 'light'

    # import findpars as pd
    names = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7"]
    images = ["https://www.gravatar.com/avatar/4ebe6379be091f123047fa75a2b6ea06?s=256&d=identicon&r=PG"] * len(names)

    grid = ft.GridView(expand=True, max_extent=150,
                       child_aspect_ratio=1,
                       spacing=10,
                       run_spacing=10
                       )


    for name, img in zip(names, images):
        grid.controls.append(Menu(name, img))

    page.add(grid)
    page.update()


ft.app(target=main)

БЛОГ НА HUSL

Как в flet автоматически опускать ряд вниз при добавлении контейнеров

Ответы (2 шт):