Android Studio Flutter模拟器底部UI被截断问题求助（2022）

你的主应用代码本身没有问题，问题出在Login页面的布局上——内容未适配系统安全区域，也未添加滚动容器，导致底部UI被截断且无法滑动。

修复步骤： #

1. 添加滚动容器：用SingleChildScrollView包裹Login页面的主体内容，让超出屏幕的部分可滚动查看。
2. 适配安全区域：用SafeArea包裹滚动容器，自动避开模拟器底部导航栏、状态栏等系统UI，避免内容被遮挡。

修改后的Login页面示例代码： #

import 'package:flutter/material.dart';

class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // 原有登录表单元素示例
              const CircleAvatar(
                radius: 50,
                backgroundImage: AssetImage('assets/login_avatar.png'),
              ),
              const SizedBox(height: 30),
              TextField(
                decoration: InputDecoration(
                  labelText: '邮箱',
                  filled: true,
                  fillColor: Colors.grey[800],
                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
                ),
                style: const TextStyle(color: Colors.white),
              ),
              const SizedBox(height: 15),
              TextField(
                decoration: InputDecoration(
                  labelText: '密码',
                  filled: true,
                  fillColor: Colors.grey[800],
                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
                ),
                obscureText: true,
                style: const TextStyle(color: Colors.white),
              ),
              const SizedBox(height: 25),
              ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(vertical: 15),
                  backgroundColor: Colors.cyan,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                ),
                child: const Text('登录', style: TextStyle(fontSize: 18)),
              ),
              // 底部附加内容示例
              const SizedBox(height: 40),
              const Text('还没有账号？立即注册', textAlign: TextAlign.center, style: TextStyle(color: Colors.grey)),
              const SizedBox(height: 30),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  IconButton(onPressed: () {}, icon: const Icon(Icons.facebook, color: Colors.blue, size: 35)),
                  const SizedBox(width: 20),
                  IconButton(onPressed: () {}, icon: const Icon(Icons.google, color: Colors.red, size: 35)),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

关键说明： #

• SingleChildScrollView：当内容高度超过屏幕高度时，允许用户上下滚动查看完整内容。
• SafeArea：自动计算并避开设备的状态栏、底部导航栏等系统预留区域，确保UI元素完整显示。
• 若你的Login页面已有Column布局，只需将Column放入SingleChildScrollView，再整体套上SafeArea即可，无需大幅修改原有内容。

内容的提问来源于stack exchange，提问作者Jessen Jie