Flutter新手求助：如何将文本置于TextFormField上方？

我是Flutter新手，想要实现文本位于TextFormField上方的布局效果，但当前代码里文本显示在输入框左侧，尝试网上的方法没解决，附上代码求帮忙。

当前代码：

Container(
                        width: double.infinity,
                        margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
                        padding: EdgeInsets.all(15),
                        decoration: BoxDecoration(
                          border: Border.all(
                            color: Colors.transparent,
                            width: 1.0,
                          ),
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                SizedBox(
                                  height: 100,
                                  width: 100,
                                  child: Text('First Name'),
                                ),
                                SizedBox(
                                  width: 200,
                                  child: TextFormField(
                                    style: TextStyle(color: Colors.black),
                                    controller: firstName,
                                    onSaved: (String? value) {
                                      firstName.text = value!;
                                    },
                                    decoration: InputDecoration(
                                      border: OutlineInputBorder(),
                                      hintText: 'First Name',
                                      hintStyle: TextStyle(
                                          color: Colors.black, fontSize: 16),
                                    ),
                                  ),
                                ),
                              ],
                            )
                          ],
                        ),
                      )

解决方法 #

问题核心是你用Row组件横向排列了文本和输入框，改成Column就能实现上下布局，同时可以优化尺寸和间距让界面更合理：

修改后的代码：

Container(
  width: double.infinity,
  margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.transparent,
      width: 1.0,
    ),
  ),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('First Name', style: TextStyle(fontSize: 16)),
          SizedBox(height: 8), // 控制文本与输入框的垂直间距
          SizedBox(
            width: double.infinity, // 输入框占满容器宽度，也可自定义宽度
            child: TextFormField(
              style: TextStyle(color: Colors.black),
              controller: firstName,
              onSaved: (String? value) {
                firstName.text = value!;
              },
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'First Name',
                hintStyle: TextStyle(color: Colors.black, fontSize: 16),
              ),
            ),
          ),
        ],
      )
    ],
  ),
)

关键改动说明： #

• 把包裹文本和输入框的Row替换为Column，实现垂直排列
• 移除文本的固定宽高，用SizedBox(height:8)调整文本与输入框的间距
• 将输入框宽度设为double.infinity，使其占满容器可用宽度（按需调整）
• 设置Column的crossAxisAlignment: CrossAxisAlignment.start，保持文本左对齐

这样就能实现文本位于TextFormField上方的布局效果了。

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