Flutter中如何设置文本与屏幕边距并居中对齐姓名和邮箱？

1. 设置文本与屏幕边缘的间距 #

直接用Padding组件包裹整个表单区域，通过padding参数控制与屏幕边缘的距离，示例如下：

Padding(
  // 左右各留16dp间距，可根据需求调整数值；若需上下间距，改用EdgeInsets.all(16)
  padding: const EdgeInsets.symmetric(horizontal: 16.0),
  child: Column(
    // 后续对齐设置写在这里
    children: [
      // 姓名行、邮箱行等内容
    ],
  ),
)

2. 让“姓名”“邮箱”所在行居中并保持对齐 #

方案一：固定标签宽度，保证输入框对齐

如果希望“姓名”“邮箱”标签宽度一致，输入框起始位置对齐，同时整个行居中，可按以下方式修改：

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 16.0),
  child: Column(
    // 让每个子Row在水平方向居中
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Row(
        children: [
          // 给标签设置固定宽度，确保两个输入框对齐
          SizedBox(
            width: 60,
            child: Text('姓名：'),
          ),
          // 让输入框占满剩余宽度，适配屏幕
          Expanded(
            child: TextField(hintText: '请输入姓名'),
          ),
        ],
      ),
      const SizedBox(height: 16), // 行与行之间的间距
      Row(
        children: [
          SizedBox(
            width: 60,
            child: Text('邮箱：'),
          ),
          Expanded(
            child: TextField(hintText: '请输入邮箱'),
          ),
        ],
      ),
    ],
  ),
)

方案二：仅让内容行居中，无需固定标签宽度

如果不需要标签宽度一致，只需要“姓名”“邮箱”所在行整体居中，可简化为：

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 16.0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Row(
        // 让Row宽度仅包裹内容，避免占满屏幕
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('姓名：'),
          SizedBox(width: 8), // 标签与输入框的间距
          TextField(),
        ],
      ),
      const SizedBox(height: 16),
      Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('邮箱：'),
          SizedBox(width: 8),
          TextField(),
        ],
      ),
    ],
  ),
)

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