Flutter Widget不显示求助：布局编译正常但控件无法展示

嘿，我一眼就瞅出问题所在啦！你的布局里Text和TextField都不显示，核心原因是Row中的TextField没有宽度约束。

在Flutter的Row布局逻辑里，TextField本身没有固有宽度，它会试图占据无限的水平空间。再加上你设置了mainAxisAlignment: MainAxisAlignment.spaceEvenly，这种情况下布局系统会陷入冲突——Text被无限挤压到完全消失，TextField也因为无法获取合理的空间而无法正常渲染。

另外还有个小细节：你第二个Row里的Text写的是User Name，和你预期的password不符，这个也顺手帮你修正啦。

修改后的完整代码 #

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Container(
          padding: new EdgeInsets.all(20.0),
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              new Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween, // 换成spaceBetween更贴合登录表单布局习惯
                children: [
                  new Text('User Name'),
                  Expanded( // 给TextField套上Expanded解决宽度约束问题
                    child: new TextField(
                      autofocus: true,
                      decoration: new InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Please enter your user name'),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 16), // 增加垂直间距提升美观度
              new Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  new Text('Password'), // 修正为预期的文本内容
                  Expanded(
                    child: new TextField(
                      obscureText: true, // 密码框添加隐藏文本属性更合理
                      decoration: new InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Please enter your password'), // 修正拼写错误pasword→password
                    ),
                  ),
                ],
              ),
            ],
          ),
        )),
    );
  }
}

关键修改点说明 #

• 给TextField添加Expanded：Expanded会让TextField占据Row中除Text之外的剩余水平空间，彻底解决无限宽度的布局冲突，让两个组件都能正常显示。
• 调整mainAxisAlignment为spaceBetween：相比spaceEvenly，这个属性更符合登录表单的布局逻辑——Text靠左对齐，输入框靠右填充剩余空间。
• 修正细节问题：把第二个Row的Text改成Password，修正hintText里的拼写错误，还给密码框加上了obscureText: true属性，让密码输入更符合用户习惯。
• 添加垂直间距：用SizedBox给两行之间加上间距，避免界面过于拥挤。

内容的提问来源于stack exchange，提问作者Chris Tennant