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)