Flet中的滚动和导航铁路

Question

当我使用NavigationRail的时候，它是扁平的。我无法激活滚动功能，并且出现了这个错误：
错误显示导航栏，控件的高度没有限制。你可以设置“expand”属性，或者设置一个固定的“高度”，或者把NavigationRail放在另一个有固定高度的控件里面。

`
import time
import flet as ft


def main(page: ft.Page):
    # PAGE SETTING
    page.window_height = 800
    page.scroll = True
    page.window_width = 1200
    page.bgcolor = "#2D033B"
    page.appbar = ft.AppBar(
        leading=ft.IconButton(icon=ft.icons.MENU),
    bgcolor="#E5B8F4",
    color="#2D033B"
    )
    
    # APP CODE
    
    side_menu = ft.NavigationRail(
        selected_index=0,
        label_type=ft.NavigationRailLabelType.ALL,
        min_width=100,
        min_extended_width=100,
        leading=ft.FloatingActionButton(icon=ft.icons.CREATE, text="Add"),
        group_alignment=-0.9,
        destinations=[
            ft.NavigationRailDestination(
                icon_content=ft.Icon(ft.icons.PERSON_2_OUTLINED),
                selected_icon_content=ft.Icon(ft.icons.PERSON_2),
                label="Atila interchange",
            ),
        ],
        on_change=lambda e: print("Selected destination:", e.control.selected_index),
    )
    cl = ft.Column()
    for i in range(100):
        cl.controls.append(
            ft.ListTile(
                title=ft.Text(f"Atila{i}"),
                subtitle=ft.Text("Pasha")
            )
        )
    page.add(
        ft.Row([
            side_menu,
            ft.VerticalDivider(width=1),
                cl,
                
        ],expand=True),
    )

    


ft.app(main)
`

Answer 1

我对flets也不是很懂，但我觉得如果你在页面设置里不启用滚动功能，同时在列的控制选项里允许滚动的话，你就能得到你想要的效果。

import flet as ft

def main(page: ft.Page):
    # PAGE SETTING
    page.window_height = 800
    page.window_width = 1200
    #page.scroll = True
    page.bgcolor = "#2D033B"
    page.appbar = ft.AppBar(
        leading=ft.IconButton(icon=ft.icons.MENU),
    bgcolor="#E5B8F4",
    color="#2D033B"
    )

    side_menu = ft.NavigationRail(
        selected_index=0,
        label_type=ft.NavigationRailLabelType.ALL,
        # extended=True,
        min_width=100,
        min_extended_width=400,
        leading=ft.FloatingActionButton(icon=ft.icons.CREATE, text="Add"),
        group_alignment=-0.9,
        destinations=[
            ft.NavigationRailDestination(
                icon_content=ft.Icon(ft.icons.PERSON_2_OUTLINED),
                selected_icon_content=ft.Icon(ft.icons.PERSON_2),
                label="Atila interchange",
            ),
        ],
        on_change=lambda e: print("Selected destination:", e.control.selected_index),
    )
    cl = ft.Column(scroll=True)
    for i in range(100):
        cl.controls.append(
            ft.ListTile(
                title=ft.Text(f"Atila{i}"),
                subtitle=ft.Text(f"Pasha{i}", color=ft.colors.YELLOW)
            )
        )

    page.add(
        ft.Row(
            [
                side_menu,
                ft.VerticalDivider(width=1),
                cl
            ],
            expand=True,
        )
    )

ft.app(target=main)