这是我的代码:
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,
),
)
],
),
)
此处的图标和文本表单字段不是垂直对齐的。TextFormField为自己提供了一个边距顶部,并有点归结为手机图标。
首先删除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,
),
)
],
)
问题是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
,但我怀疑您可能仍然不满意它默认坐得那么高。