如何在Flet中使页面内具有列的选项卡可滚动?

huangapple go评论91阅读模式
英文:

How do I have a tab with a column inside a page scroll in flet?

问题

I got a problem with page.scroll that I don't know how to fix. It used to work with flet 0.5 but it doesn't work with newer versions (right now I'm using 0.6.2). A minimal example is this:

import flet as ft

def main(page: ft.Page):
    # page.scroll = ft.ScrollMode.AUTO <-- If uncomment this, it doesn't work

    text = ft.Text("Hello, world!")

    col_content = ft.Column(controls=[text], auto_scroll=True)

    tabs = ft.Tabs(
        expand=1,
        tabs=[
            ft.Tab(
                text="Example",
                content=ft.Container(
                    content=col_content,
                ),
            ),
        ],
    )

    page.add(tabs)


ft.app(target=main, view=ft.WEB_BROWSER)

The problem is that the content inside the tab (the Hello, world!) is not shown when I enable scroll in the page. How do I fix it?

英文:

I got a problem with page.scroll that I don't know to fix. It used to work with flet 0.5 but it doesn't work with newer versions (right now I'm using 0.6.2). A minimal example is this:

import flet as ft

def main(page: ft.Page):
    # page.scroll = ft.ScrollMode.AUTO &lt;-- If uncomment this, it doesn&#39;t work

    text = ft.Text(&quot;Hello, world!&quot;)

    col_content = ft.Column(controls=[text], auto_scroll=True)

    tabs = ft.Tabs(
        expand=1,
        tabs=[
            ft.Tab(
                text=&quot;Example&quot;,
                content=ft.Container(
                    content=col_content,
                ),
            ),
        ],
    )

    page.add(tabs)


ft.app(target=main, view=ft.WEB_BROWSER)

The problem is that the content inside the tab (the Hello, world!) is not shown when I enable scroll in the page. How do I fix it?

答案1

得分: 0

可能的解决方案是不使整个页面滚动,而是只让列滚动,就像这样:

import flet as ft

def main(page: ft.Page):
    text = ft.Text("Hello, world!")

    col_content = ft.Column(controls=[text], auto_scroll=True, scroll=True)

    tabs = ft.Tabs(
        expand=1,
        tabs=[
            ft.Tab(
                text="Example",
                content=ft.Container(
                    content=col_content,
                ),
            ),
        ],
    )

    page.add(tabs)


ft.app(target=main, view=ft.WEB_BROWSER)

基本上,解决方案是在Column中添加scroll=True

英文:

A possible solution is not to make all the page scroll, but only the column, like this:

import flet as ft

def main(page: ft.Page):
    text = ft.Text(&quot;Hello, world!&quot;)

    col_content = ft.Column(controls=[text], auto_scroll=True, scroll=True)

    tabs = ft.Tabs(
        expand=1,
        tabs=[
            ft.Tab(
                text=&quot;Example&quot;,
                content=ft.Container(
                    content=col_content,
                ),
            ),
        ],
    )

    page.add(tabs)


ft.app(target=main, view=ft.WEB_BROWSER)

Basically, the solution is adding scroll=True to the Column.

huangapple
  • 本文由 发表于 2023年5月7日 20:18:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76193880.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定