Dart 如何垂直对齐行元素

发布于03月05日

以下是我的代码:

        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为其自身提供页边距顶部，并稍微向下移动到电话图标.

推荐答案

问题是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,
),

如果你想让它像Ffltter认为的那样对齐，你可以跳过Padding，但我怀疑你可能仍然不满意它默认的位置这么高.