如何垂直对齐行项目？

Question

这是我的代码：

        child: new Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          new Icon(
                              Icons.call
                          ),
                          new Container(
                            height: 30.0,
                            width: 100.0,
                            child: new TextFormField(
                              decoration: new InputDecoration(
                                  labelText: 'User Name'),
                              validator: (val) =>
                              !val.contains('@')
                                  ? 'Not a valid email.'
                                  : null,
                              onSaved: (val) => _email = val,
                            ),

                          )

                        ],

                      ),
                    )

此处 Icon 和 TextFormField 未垂直对齐。 TextFormField 为自身提供了一个顶部边距，并向下延伸到 phone 图标。

Answer 1

首先删除 Container 的 height 属性然后将 crossAxisAlignment 设置为 CrossAxisAlignment.center 使行的元素相对于中心对齐垂直轴。

示例：

new Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        new Icon(Icons.call),
        new Container(
          width: 100.0,
          child: new TextFormField(
            decoration: const InputDecoration(labelText: 'User Name'),
            validator: (val) =>
                !val.contains('@') ? 'Not a valid email.' : null,
            onSaved: (val) => _email = val,
          ),
        )
      ],
)

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,
),

如果您希望它按照 Flutter 认为应该的方式对齐，您可以跳过 Padding，但我怀疑您可能仍然不满意它默认设置的高度。

如何垂直对齐行项目？

How to vertically align row items?

dart

flutter