在`main`中直接使用时Flet页面行为正常，但在UserControl中却不行？

Question

这段代码生成了一个（目前还不能用的）登录页面，外观大致符合我的想法（见图片 #1）。

import flet as ft

def main(page : ft.Page):
    page.title = 'Login Page'
    page.vertical_alignment = 'center'
    page.horizontal_alignment = 'center'


    page.add(
        ft.Row(controls=[ft.Image(src=f'/images/splash_image_1.png', fit=ft.ImageFit.FIT_HEIGHT)],
               alignment=ft.MainAxisAlignment.CENTER,
               spacing=10,
               height=200),
        ft.Column(
            [ft.TextField(hint_text='First Name', expand=False),
             ft.TextField(hint_text = 'Last Name', expand=False),
             ft.TextField(hint_text = 'Email', expand=False)],
             alignment=ft.MainAxisAlignment.SPACE_AROUND,
             horizontal_alignment=ft.CrossAxisAlignment.CENTER,
             scroll = ft.ScrollMode.ADAPTIVE
        ),
        ft.Row([
            ft.ElevatedButton('Close'),
            ft.ElevatedButton('Login'),
        ],
        expand=True,
        alignment=ft.MainAxisAlignment.CENTER,
        vertical_alignment=ft.MainAxisAlignment.END,
        spacing = 100),
    )
    page.window_width = 640
    # print(f"Height: {page.window_height}\nWidth: {page.window_width}")
    
    page.update()

ft.app(target=main, assets_dir='assets')

这里显示的是正确的样子

我想把这个页面保存成现在的样子，这样我就可以继续处理应用程序的其他部分。我尝试把它保存到一个叫 startup.py 的文件里，这个文件在项目的根目录下：

import flet as ft

class LoginScreen(ft.UserControl):
    def __init__(self):
        super().__init__()
        
    def build(self):
        return ft.Column([
            ft.Row(controls=[ft.Image(src='/images/splash_image_1.png', fit=ft.ImageFit.FIT_HEIGHT)],
                   alignment=ft.MainAxisAlignment.CENTER,
                   spacing=10,
                   height=200),
            ft.Column([
                ft.TextField(hint_text='First Name', expand=False),
                ft.TextField(hint_text='Last Name', expand=False),
                ft.TextField(hint_text='Email', expand=False)],
                alignment=ft.MainAxisAlignment.SPACE_AROUND,
                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                scroll=ft.ScrollMode.ADAPTIVE
            ),
            ft.Row([
                ft.ElevatedButton('Close'),
                ft.ElevatedButton('Login')],
                expand=True,
                alignment=ft.MainAxisAlignment.CENTER,
                vertical_alignment=ft.MainAxisAlignment.END,
                spacing=100),
        ])

但是当我尝试这样做时：

import flet as ft
from startup import LoginScreen

def main(page : ft.Page):
    page.title = 'Login Page'
    page.vertical_alignment = 'center'
    page.horizontal_alignment = 'center'

    page.add(LoginScreen())
    page.update()


ft.app(target=main,assets_dir='assets')

它的样子变得不一样了

文本框变成灰色，无法编辑，而且图片也不显示。我也不太确定如何根据显示的控件来设置页面宽度。

那么，我该如何实现直接将控件添加到页面时的相同行为，同时又让这个特定的页面可以移动呢？我想保存当前页面的状态，之后会添加功能，让用户在按下 Login 按钮时可以跳转到其他地方。

我对 flet/Flutter 非常陌生，我觉得这里面还有很多我没理解的部分。

我尝试把当前页面保存为一个单独的 ft.UserControl，我本以为只需要把它添加到页面就可以了。

但显然这样不行，我也不知道还有什么其他方法可以保存页面，以便用户可以浏览。