0

a medida que se invocan textos en la salida de texto, estos van superando el tamaño del contenedor, cosa que no quiero que ocurra, que puedo hacer, no encontré en documentación algo relevante, y es la primera vez que uso flet, tenía en mente que tal vez container tuviese alguna propiedad overflow, pero no la encontré, aparentemente no tiene, entonces, cual es la solución para que el contenedor hijo(salida_de_texto), no supere el tamaño total del contenedor predefinido, tengo como prueba que al tocar el botón eliminar humano, se imprima "sep", y al tocarlo multiples veces poco a poco va superando el tamaño del contenedor padre

import flet as ft
from actores.humanos import Crear_Humano
import sys

COLORS = {
    'bgc_btn_crear_humano': ft.colors.BLUE,
    'bgc_btn_eliminar_humano': ft.colors.RED,
    'bgc_btn_eliminar_raza': ft.colors.DEEP_ORANGE,
    'bgc_btn_nuevo_dia': ft.colors.GREEN,
    'bgc_btn_eventos': ft.colors.PURPLE,
    'fc_btn': ft.colors.WHITE,
    'yellow': ft.colors.YELLOW
}

class StdoutRedirector:
    def __init__(self, text_component: ft.Column):
        self.text_component = text_component
        self.old_stdout = sys.stdout
        sys.stdout = self
    
    def write(self, text: str):
        lines = text.splitlines()
        for line in lines:
            if line.strip():  # Solo añade líneas no vacías
                self.text_component.controls.append(
                    ft.Text(value=line, size=16, weight="bold", color=ft.colors.WHITE)
                )
        
        self.text_component.scroll_to(offset=-1)  # Desplazar hacia abajo
        self.text_component.page.update()
    
    def flush(self):
        pass

    def __del__(self):
        sys.stdout = self.old_stdout

class MyApp:
    def crear_humano(self, e):
        nuevo_humano = Crear_Humano().humano_creado()
        self.humanos.append(nuevo_humano)
        self.contenedor_lista_humanos.controls.append(
            ft.Row(controls=[
                ft.Text(f"{nuevo_humano.nombre}"),
                ft.Text(f"{nuevo_humano.edad}"),
                ft.Text(f"{nuevo_humano.estado}"),
                ft.ElevatedButton(text="Info", icon=ft.icons.INFO, on_click=lambda e: self.ver_info(nuevo_humano))
            ])
        )
        self.page.update()

    def ver_info(self, humano):
        humano.info()
    
    def eliminar_humano(self, e):
        print("Sep")


    def main(self, page: ft.Page):
        self.humanos = []
        self.page = page
        self.page.title = "Tres Columnas en Flet"
        self.page.vertical_alignment = ft.MainAxisAlignment.START

        # Panel izquierdo
        panel_izquierdo = ft.Container(
            content=ft.Column(
                controls=[
                    ft.Column(
                        controls=[
                            ft.ElevatedButton(
                                text="Crear Humano",
                                width=250,
                                bgcolor=COLORS['bgc_btn_crear_humano'],
                                color=COLORS['fc_btn'],
                                icon=ft.icons.ADD,
                                on_click=self.crear_humano
                            ),
                            ft.ElevatedButton(
                                text="Eliminar Humano",
                                width=250,
                                bgcolor=COLORS['bgc_btn_eliminar_humano'],
                                color=COLORS['fc_btn'],
                                icon=ft.icons.REMOVE,
                                on_click=self.eliminar_humano
                            ),
                            ft.ElevatedButton(
                                text="Destruir Humanos",
                                width=250,
                                bgcolor=COLORS['bgc_btn_eliminar_raza'],
                                color=COLORS['fc_btn'],
                                icon=ft.icons.WARNING,
                                on_click=self.eliminar_raza_humana,
                                icon_color=COLORS['yellow']
                            ),
                            ft.ElevatedButton(
                                text="Avanzar Día",
                                width=250,
                                bgcolor=COLORS['bgc_btn_nuevo_dia'],
                                color=COLORS['fc_btn'],
                                icon=ft.icons.TRANSFER_WITHIN_A_STATION,
                                on_click=self.siguiente_dia
                            ),
                            ft.ElevatedButton(
                                text="Ocasionar Evento",
                                width=250,
                                bgcolor=COLORS['bgc_btn_eventos'],
                                color=COLORS['fc_btn'],
                                icon=ft.icons.FLASH_ON,
                                on_click=self.forzar_evento,
                                icon_color=COLORS['yellow']
                            ),
                        ],
                        spacing=20,
                    ),
                    ft.Text("Estación actual: Primavera", size=20, weight="bold", color=ft.colors.WHITE),
                    ft.Text("Clima actual: Soleado", size=20, weight="bold", color=ft.colors.WHITE),
                    ft.Text("Humanos Vivos: 0", size=20, weight="bold", color=ft.colors.WHITE),
                    ft.Text("Humanos: 0", size=20, weight="bold", color=ft.colors.WHITE),
                ],
                spacing=20,
            ),
            width=self.page.window_width / 4,
            height=self.page.window_height,
        )
        
        # Contenedor lista humanos
        self.contenedor_lista_humanos = ft.Column(
            controls=[],
            scroll=ft.ScrollMode.ALWAYS,
            height=(self.page.window_height / 2) - 50,
            width=self.page.window_width / 2,
            alignment=ft.MainAxisAlignment.START,
        )
        
        # Contenedor salida de texto
        self.salida_texto = ft.Column(
            controls=[ft.Text(value="Texto de prueba", size=16, weight="bold", color=ft.colors.WHITE)],  # Texto de prueba
            width=self.page.window_width / 2,
            height=(self.page.window_height / 2) - 50,
            scroll=ft.ScrollMode.AUTO
        )
        
        # Panel central
        self.panel_central = ft.Container(
            margin= ft.margin.only(bottom=40),
            content=ft.Column(
                controls=[                         
                    self.contenedor_lista_humanos,               
                    self.salida_texto,
                ]
            ),
            width=self.page.window_width / 2,
            height=self.page.window_height - 50,
            bgcolor=ft.colors.BLACK

        )

        # Panel derecho
        panel_derecho = ft.Container(
            content=ft.Text("Panel Derecho"),
            width=self.page.window_width / 4,
            height=self.page.window_height,
        )

        # Redirigir salida estándar al componente de texto
        redirector = StdoutRedirector(self.salida_texto)

        # Estructura de las tres columnas
        columnas = ft.Row(
            controls=[
                panel_izquierdo,
                self.panel_central,
                panel_derecho,
            ],
            alignment=ft.MainAxisAlignment.START
        )

        # Contenedor principal que asegura que las columnas están en la parte superior
        contenedor_principal = ft.Container(
            content=columnas,
            expand=True,
        )

        self.page.add(contenedor_principal)

ft.app(target=MyApp().main)

1 respuesta 1

0

El problema no es que el widget hijo crezca más que el padre, el problema es que estás estableciendo el tamaño de los widgets de forma explícita, pero solo al momento de crearlos. Cuando se redimenciona la ventana esos widgets no se adaptan al cambio de tamaño de la página, se quedan en todo momento con el tamaño establecido durante la inicialización.

Si estableces el tamaño de un widget de forma explícita y relativa al tamaño de la página o de su padre, debes modificar las dimenciones de los widgets cuando se redimenciona éste último, algo cómo:

# ...

# Método que será llamado cada vez que la pagína cambie de tamaño
def on_page_resize(self, _event):
    self.panel_izquierdo.width =  self.page.window_width / 4
    self.panel_izquierdo.height = self.page.window_height
    
    self.contenedor_lista_humanos.height = (self.page.window_height / 2) - 50
    self.contenedor_lista_humanoswidth = self.page.window_width / 2
    
    self.salida_texto.height = (self.page.window_height / 2) - 50
    self.salida_texto.width = self.page.window_width / 2

    self.panel_central.width = self.page.window_width / 2
    self.panel_central.height = self.page.window_height - 50
    
    self.panel_derecho.width = self.page.window_width / 4
    self.panel_derecho.height = self.page.window_height
    
    self.page.update()
    
def main(self, page: ft.Page):
    self.page.on_resize = self.on_page_resize  # <<<<<<<<<<<<<<<<<<
    # ....

# ...

Te dejo el código completo, es un ejemplo reproducible basado en tu código agregando la clase y métodos dummy necesarios que le faltan a tu código para que se pueda ejecutar:

import flet as ft
import sys


class Crear_Humano():
    def humano_creado(self):
        self.nombre = ""
        self.edad = 0
        self.estado= ""
        return self

COLORS = {
    'bgc_btn_crear_humano': ft.colors.BLUE,
    'bgc_btn_eliminar_humano': ft.colors.RED,
    'bgc_btn_eliminar_raza': ft.colors.DEEP_ORANGE,
    'bgc_btn_nuevo_dia': ft.colors.GREEN,
    'bgc_btn_eventos': ft.colors.PURPLE,
    'fc_btn': ft.colors.WHITE,
    'yellow': ft.colors.YELLOW
}

class StdoutRedirector:
    def __init__(self, text_component: ft.Column):
        self.text_component = text_component
        self.old_stdout = sys.stdout
        sys.stdout = self
    
    def write(self, text: str):
        lines = text.splitlines()
        for line in lines:
            if line.strip():  # Solo añade líneas no vacías
                self.text_component.controls.append(
                    ft.Text(value=line, size=16, weight="bold", color=ft.colors.WHITE)
                )
        
        self.text_component.scroll_to(offset=-1)  # Desplazar hacia abajo
        self.text_component.page.update()
    
    def flush(self):
        pass

    def __del__(self):
        sys.stdout = self.old_stdout

class MyApp:
    def crear_humano(self, e):
        nuevo_humano = Crear_Humano().humano_creado()
        self.humanos.append(nuevo_humano)
        self.contenedor_lista_humanos.controls.append(
            ft.Row(controls=[
                ft.Text(f"{nuevo_humano.nombre}"),
                ft.Text(f"{nuevo_humano.edad}"),
                ft.Text(f"{nuevo_humano.estado}"),
                ft.ElevatedButton(text="Info", icon=ft.icons.INFO, on_click=lambda e: self.ver_info(nuevo_humano))
            ])
        )
        self.page.update()

    def ver_info(self, humano):
        humano.info()
    
    def eliminar_humano(self, e):
        print("Sep")
        
    def eliminar_raza_humana(self, e):
        pass
        
    def siguiente_dia(self, e):
        pass
        
    def forzar_evento(self, e):
        pass
        
    
    def on_page_resize(self, e):
        self.panel_izquierdo.width =  self.page.window_width / 4
        self.panel_izquierdo.height = self.page.window_height
        
        self.contenedor_lista_humanos.height = (self.page.window_height / 2) - 50
        self.contenedor_lista_humanoswidth = self.page.window_width / 2
        
        self.salida_texto.height = (self.page.window_height / 2) - 50
        self.salida_texto.width = self.page.window_width / 2
    
        self.panel_central.width = self.page.window_width / 2
        self.panel_central.height = self.page.window_height - 50
        
        self.panel_derecho.width = self.page.window_width / 4
        self.panel_derecho.height = self.page.window_height
        
        self.page.update()
        
    def main(self, page: ft.Page):
        self.humanos = []
        self.page = page
        self.page.title = "Tres Columnas en Flet"
        self.page.vertical_alignment = ft.MainAxisAlignment.START
        self.page.on_resize = self.on_page_resize

        # Panel izquierdo
        self.panel_izquierdo = ft.Container(
            content=ft.Column(
                controls=[
                    ft.Column(
                        controls=[
                            ft.ElevatedButton(
                                text="Crear Humano",
                                width=250,
                                bgcolor=COLORS['bgc_btn_crear_humano'],
                                color=COLORS['fc_btn'],
                                icon=ft.icons.ADD,
                                on_click=self.crear_humano
                            ),
                            ft.ElevatedButton(
                                text="Eliminar Humano",
                                width=250,
                                bgcolor=COLORS['bgc_btn_eliminar_humano'],
                                color=COLORS['fc_btn'],
                                icon=ft.icons.REMOVE,
                                on_click=self.eliminar_humano
                            ),
                            ft.ElevatedButton(
                                text="Destruir Humanos",
                                width=250,
                                bgcolor=COLORS['bgc_btn_eliminar_raza'],
                                color=COLORS['fc_btn'],
                                icon=ft.icons.WARNING,
                                on_click=self.eliminar_raza_humana,
                                icon_color=COLORS['yellow']
                            ),
                            ft.ElevatedButton(
                                text="Avanzar Día",
                                width=250,
                                bgcolor=COLORS['bgc_btn_nuevo_dia'],
                                color=COLORS['fc_btn'],
                                icon=ft.icons.TRANSFER_WITHIN_A_STATION,
                                on_click=self.siguiente_dia
                            ),
                            ft.ElevatedButton(
                                text="Ocasionar Evento",
                                width=250,
                                bgcolor=COLORS['bgc_btn_eventos'],
                                color=COLORS['fc_btn'],
                                icon=ft.icons.FLASH_ON,
                                on_click=self.forzar_evento,
                                icon_color=COLORS['yellow']
                            ),
                        ],
                        spacing=20,
                    ),
                    ft.Text("Estación actual: Primavera", size=20, weight="bold", color=ft.colors.WHITE),
                    ft.Text("Clima actual: Soleado", size=20, weight="bold", color=ft.colors.WHITE),
                    ft.Text("Humanos Vivos: 0", size=20, weight="bold", color=ft.colors.WHITE),
                    ft.Text("Humanos: 0", size=20, weight="bold", color=ft.colors.WHITE),
                ],
                spacing=20,
            ),
            width=self.page.window_width / 4,
            height=self.page.window_height,
        )
        
        # Contenedor lista humanos
        self.contenedor_lista_humanos = ft.Column(
            controls=[],
            scroll=ft.ScrollMode.ALWAYS,
            height=(self.page.window_height / 2) - 50,
            width=self.page.window_width / 2,
            alignment=ft.MainAxisAlignment.START,
        )
        
        # Contenedor salida de texto
        self.salida_texto = ft.Column(
            controls=[ft.Text(value="Texto de prueba", size=16, weight="bold", color=ft.colors.WHITE)],  # Texto de prueba
            width=self.page.window_width / 2,
            height=(self.page.window_height / 2) - 50,
            scroll=ft.ScrollMode.AUTO
        )
        
        # Panel central
        self.panel_central = ft.Container(
            margin= ft.margin.only(bottom=40),
            content=ft.Column(
                controls=[                         
                    self.contenedor_lista_humanos,               
                    self.salida_texto,
                ]
            ),
            width=self.page.window_width / 2,
            height=self.page.window_height - 50,
            bgcolor=ft.colors.BLACK,


        )

        # Panel derecho
        self.panel_derecho = ft.Container(
            content=ft.Text("Panel Derecho"),
            width=self.page.window_width / 4,
            height=self.page.window_height,
        )

        # Redirigir salida estándar al componente de texto
        redirector = StdoutRedirector(self.salida_texto)

        # Estructura de las tres columnas
        columnas = ft.Row(
            controls=[
                self.panel_izquierdo,
                self.panel_central,
                self.panel_derecho,
            ],
            alignment=ft.MainAxisAlignment.START
        )

        # Contenedor principal que asegura que las columnas están en la parte superior
        contenedor_principal = ft.Container(
            content=columnas,
            expand=True,
        )

        self.page.add(contenedor_principal)

ft.app(target=MyApp().main)

introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.