Flutter中Stack组件内TextFormField不显示问题求助

问题根源 #

你遇到的问题核心是Stack中的Positioned组件缺少水平方向约束：只设置了top和bottom属性，没有指定left/right或width，导致内部Column的宽度完全由子组件的固有尺寸决定。而TextFormField需要明确的水平空间才能正常渲染，最终因没有足够宽度而无法显示。

修复方案 #

给Positioned组件添加left和right属性（或直接设置width），为Column提供明确的水平宽度约束，让TextFormField能获取到足够的渲染空间。

修复后的完整代码 #

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: Scaffold(
        body: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.white),
            ),
            Positioned(
              top: 86,
              bottom: 294,
              // 添加左右约束，让Positioned占据屏幕左右内边距的空间
              left: 24,
              right: 24,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Image(
                    width: 104,
                    height: 112,
                    image: AssetImage('assets/images/rootinelogo.png'),
                  ),
                  SizedBox(
                    height: 24,
                  ),
                  Text(
                    'Rootine',
                    style: TextStyle(
                      fontFamily: 'Grandstander',
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                  SizedBox(
                    height: 48,
                  ),
                  LoginForm(),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class LoginForm extends StatefulWidget {
  const LoginForm({
    super.key,
  });

  @override
  State<LoginForm> createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormState>();
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TextFormField(
            controller: emailController,
            decoration: InputDecoration(border: OutlineInputBorder(), labelText: 'Email'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your email';
              }
              return null;
            },
          ),
          SizedBox(height: 16), // 添加输入框间距，提升视觉效果
          TextFormField(
            obscureText: true,
            controller: passwordController,
            decoration: InputDecoration(border: OutlineInputBorder(), labelText: 'Password'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your password';
              }
              return null;
            },
          ),
        ],
      ),
    );
  }
}

额外优化建议 #

• 移除LoginForm中不必要的Flexible组件：现在Column有明确的宽度约束，Flexible已经失去作用，移除后代码更简洁。
• 在两个TextFormField之间添加SizedBox(height: 16)，提升页面的视觉层次感。

内容的提问来源于stack exchange，提问作者Kaung Myat Tun