启用滚动的Flet Column控件垂直居中，覆盖alignment设置的问题

当Flet的Column设置scroll=ft.ScrollMode.ALWAYS后，alignment=ft.MainAxisAlignment.START会被覆盖，导致控件垂直居中。要实现顶部对齐同时保留滚动功能，可通过以下两种方式解决：

方法一：嵌套Column实现顶部对齐 #

将原Column的控件放入内部Column，内部Column设置alignment=ft.MainAxisAlignment.START，外部Column仅负责滚动和占满空间：

import flet as ft

def main(page: ft.Page):
    left_side = ft.Column(
        expand=2,
        scroll=ft.ScrollMode.ALWAYS,
        controls=[
            ft.Column(
                alignment=ft.MainAxisAlignment.START,
                controls=[
                    ft.OutlinedButton(text="scroll=ScrollMode.ALWAYS")
                ]
            )
        ]
    )
    right_side= ft.Column(
        expand=2,
        controls=[
            ft.OutlinedButton(text="Non scrollable")
        ]
    )

    main_container = ft.Container(
        height=900,
        content=ft.Row(
            spacing=0,
            controls=[
                left_side,
                ft.VerticalDivider(thickness=3, width=3),
                right_side
            ],
            expand=True
        )
    )

    page.add(main_container)

ft.app(target=main)

方法二：使用ListView替代Column #

ListView默认支持顶部对齐，且原生支持滚动，直接替换即可：

import flet as ft

def main(page: ft.Page):
    left_side = ft.ListView(
        expand=2,
        scroll=ft.ScrollMode.ALWAYS,
        controls=[
            ft.OutlinedButton(text="scroll=ScrollMode.ALWAYS")
        ]
    )
    right_side= ft.Column(
        expand=2,
        controls=[
            ft.OutlinedButton(text="Non scrollable")
        ]
    )

    main_container = ft.Container(
        height=900,
        content=ft.Row(
            spacing=0,
            controls=[
                left_side,
                ft.VerticalDivider(thickness=3, width=3),
                right_side
            ],
            expand=True
        )
    )

    page.add(main_container)

ft.app(target=main)

两种方法都能实现左侧可滚动区域与右侧非滚动区域顶部对齐的效果，同时保留滚动功能。

内容的提问来源于stack exchange，提问作者Dominic Rios