Flutter新手求助：使用Row布局后页面空白无报错

Hey there! I see you're hitting a common layout snag with Flutter's Row and TextField components. Let me break down what's happening and how to fix it:

为什么页面显示空白？ #

The issue is that TextField widgets don't have a default fixed width, and when you put them inside a Row, the Row will try to give each child as much horizontal space as it wants. Since both TextFields are trying to take all available space, they end up overflowing off the screen entirely—making it look like the page is blank.

修复方案：用Expanded或Flexible限制宽度 #

You need to tell Flutter how to distribute the available horizontal space between the two TextFields. The easiest way is to wrap each TextField in an Expanded widget, which will make them share the available space evenly (or you can adjust the flex property if you want one to take more space than the other).

修改后的完整代码 #

import 'package:flutter/material.dart';

class TestEdit extends StatefulWidget {
  @override
  _TestEditState createState() => _TestEditState();
}

class _TestEditState extends State<TestEdit> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: true,
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.black),
          onPressed: () => Navigator.pop(context, false),
        ),
      ),
      body: Column(
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              // 用Expanded包裹第一个TextField，分配水平空间
              Expanded(
                child: Padding(
                  padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
                  child: TextField(
                    obscureText: false,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'InputFirst',
                    ),
                  ),
                ),
              ),
              // 用Expanded包裹第二个TextField，分配水平空间
              Expanded(
                child: Padding(
                  padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
                  child: TextField(
                    obscureText: false,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'InputSecond',
                    ),
                  ),
                ),
              ),
            ],
          ),
          Padding(
            padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
            child: TextField(
              obscureText: false,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Input',
              ),
            ),
          ),
          Padding(
            padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
            child: TextField(
              obscureText: false,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Input',
              ),
            ),
          ),
          Padding(
            padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
            child: TextField(
              obscureText: false,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Input',
              ),
            ),
          ),
          Padding(
            padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
            child: TextField(
              obscureText: false,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Input',
              ),
            ),
          ),
          Padding(
            padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
            child: TextField(
              obscureText: false,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Input',
              ),
            ),
          ),
          Padding(
            padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
            child: TextField(
              obscureText: false,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Input',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

额外说明 #

• 如果希望两个TextField宽度不一样，可以给Expanded设置flex属性，比如第一个设flex:2，第二个设flex:1，这样第一个会占2/3的水平空间，第二个占1/3。
• 另一个选项是用Flexible代替Expanded，Flexible允许子组件小于可用空间，而Expanded会强制子组件填满分配的空间，你可以根据需求选择。

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