如何垂直对齐行项目？

Question

这是我的代码：

ServiceRequest.buildAPIPath(…)

此处Icon和TextFormField不是垂直对齐的。 TextFormField为自己提供了一个上边距，并且稍微降低了电话图标。

Answer 1

首先删除height的{​​{1}}属性，然后将Container设置为crossAxisAlignment，这会将行的元素与垂直轴对齐。

示例：

CrossAxisAlignment.center

Answer 2

问题是TextFormField会在自身周围添加一些填充。由于您只想对齐图标，因此您应该将其添加到InputDecoration，然后您可以完全放弃使用Row;您还可以将其向下移动一点，以强制它与文本条目底部加下划线Padding：

new TextFormField(
  decoration: const InputDecoration(
      labelText: 'User Name',
      icon: const Padding(
          padding: const EdgeInsets.only(top: 15.0),
          child: const Icon(Icons.call))),
  validator: (val) =>
      !val.contains('@') ? 'Not a valid email.' : null,
  onSaved: (val) => _email = val,
),

你可以跳过那个Padding，如果你想让它按照Flutter认为应该的那样对齐，但是我怀疑你可能仍然不满意它的默认值就像它一样高。