flet-dev / flet

Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.
https://flet.dev
Apache License 2.0
11.5k stars 449 forks source link

How to implement two tabs, where one can scroll and the other cannot. #4262

Closed hionwi closed 3 weeks ago

hionwi commented 3 weeks ago

Duplicate Check

Describe the bug

How to implement two tabs, where one can scroll and the other cannot.Now, I can only make them both scroll or stop at the same time by using page.scroll.

Code sample

Code ```python import flet as ft def main(page: ft.Page): page.scroll = ft.ScrollMode.ALWAYS col1 = ft.Column( scroll=ft.ScrollMode.ALWAYS ) col2 = ft.Column() for i in range(30): col1.controls.append(ft.Text(f"item {i}")) col2.controls.append(ft.Text(f"item {i}")) page.add( ft.Tabs( tabs=[ ft.Tab( "tab 1", col1 ), ft.Tab( "tab 2", col2 ), ] ) ) ft.app(main) ```

To reproduce

run the code

Expected behavior

Make one tab scrollable while the other stops scrolling

Screenshots / Videos

Captures [Upload media here]

https://github.com/user-attachments/assets/bd20ad0b-026e-445a-b1fe-426600cb09b7

Operating System

Windows

Operating system details

windows 11

Flet version

0.24.1

Regression

I'm not sure / I don't know

Suggestions

No response

Logs

Logs ```console [Paste your logs here] ```

Additional details

No response

lasifea commented 3 weeks ago

It's not a problem, just add the expand attribute in the tabs component.

import flet as ft

def main(page: ft.Page):
    # page.scroll = ft.ScrollMode.ALWAYS
    col1 = ft.Column(
        scroll=ft.ScrollMode.AUTO
    )
    col2 = ft.Column()

    for i in range(30):
        col1.controls.append(ft.Text(f"item {i}"))
        col2.controls.append(ft.Text(f"item {i}"))
    page.add(
        ft.Tabs(
            tabs=[
                ft.Tab(
                    "tab 1",
                    col1

                ),
                ft.Tab(
                    "tab 2",
                    col2
                ), ],
            expand=1,
        )
    )

ft.app(main)
hionwi commented 3 weeks ago

It's not a problem, just add the expand attribute in the tabs component.

import flet as ft

def main(page: ft.Page):
    # page.scroll = ft.ScrollMode.ALWAYS
    col1 = ft.Column(
        scroll=ft.ScrollMode.AUTO
    )
    col2 = ft.Column()

    for i in range(30):
        col1.controls.append(ft.Text(f"item {i}"))
        col2.controls.append(ft.Text(f"item {i}"))
    page.add(
        ft.Tabs(
            tabs=[
                ft.Tab(
                    "tab 1",
                    col1

                ),
                ft.Tab(
                    "tab 2",
                    col2
                ), ],
            expand=1,
        )
    )

ft.app(main)

It worked, thank you!