Flet移动端键盘弹出遮挡容器及输入框问题求助

核心问题分析 #

原布局直接使用ft.Column承载内容，未嵌套滚动组件，导致键盘弹出后无法滚动查看被遮挡区域；同时未配置移动端键盘弹出时的窗口调整策略，造成底部输入框与键盘重叠。

解决方案 #

通过两个关键修改解决问题：

• 用SingleChildScrollView包裹Column，让内容支持滚动
• 设置页面的window_soft_input_mode为SoftInputMode.ADJUST_RESIZE，让页面随键盘弹出自动调整高度

修改后的完整代码 #

import flet as ft

def main(page: ft.Page):
    # 配置键盘弹出时页面自动调整高度
    page.window_soft_input_mode = ft.SoftInputMode.ADJUST_RESIZE
    
    page.add(
        ft.Container(
            ft.SingleChildScrollView(
                ft.Column(
                    [
                        ft.Text('Welcome', size=30, text_align=ft.TextAlign.CENTER),
                        ft.Text('Enter your username or email and password'),
                        ft.TextField(label='Login or email'),
                        ft.TextField(label='Password', password=True, can_reveal_password=True),
                        ft.ElevatedButton('Log in'),
                        ft.Divider(),
                        ft.TextButton('Forgot password?', height=35),
                        ft.TextButton('Register', height=35)
                    ],
                    horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                    # 让Column高度自适应内容，确保滚动逻辑正常
                    expand=False
                ),
                # 启用垂直滚动
                scroll=ft.ScrollMode.AUTO,
                # 让滚动容器占满父容器空间
                expand=True
            ),
            expand=True,
            padding=ft.padding.Padding(10, 40, 10, 20)
        )
    )

if __name__ == "__main__":
    ft.app(target=main)

关键修改说明 #

• SingleChildScrollView：替代直接使用Column，当内容高度超过可用空间时自动激活滚动，键盘弹出后可滚动查看底部输入框。
• page.window_soft_input_mode = SoftInputMode.ADJUST_RESIZE：通知系统在键盘弹出时调整页面窗口尺寸，从根源避免输入框被遮挡。
• Column的expand=False：让Column高度由内容决定，而非强制占满父容器，保证滚动组件的逻辑正常运行。

内容的提问来源于stack exchange，提问作者Дмитрий Караваев