我在颤振设计中面临问题 当我在一个文本表单字段上设置错误时,我连续有两个文本表单字段,它会稍微向上移动或收缩以为错误文本腾出空间
在 android 原生中不存在这个问题
如果有人可以帮助我的话
我尝试了很多解决方案,例如设置容器高度 100 并在其中放置行并设置对齐中心,但没有找到解决方案
final firstName = new TextFormField(
decoration: InputDecoration(
// border: OutlineInputBorder(),
labelText: _APP_FIRSTNAME_LBL,
contentPadding:
EdgeInsets.only(left: 0.0, top: 8.0, right: 0.0, bottom: 8.0)),
validator: validateName,
onSaved: (String val) {
_mFirstName = val;
},
);
final lastName = new TextFormField(
decoration: InputDecoration(
// border: OutlineInputBorder(),
labelText: _APP_LASTNAME_LBL,
contentPadding:
EdgeInsets.only(left: 0.0, top: 8.0, right: 0.0, bottom:
8.0)),
//obscureText: true,
validator: validateName,
onSaved: (String val) {
_mLastName = val;
});
final rowFirstLastName = new Container(
alignment: Alignment.center,
height: 80,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Flexible(
child: Padding(
padding: const EdgeInsets.all(0.0),
child: firstName,
),
),
SizedBox(width: 48.0),
new Flexible(
child: Padding(
padding: const EdgeInsets.all(0.0),
child: lastName,
),
),
],
));
如果字段出现错误或未设置,两个文本表单字段应保持相同的对齐方式
尝试将空的 helperText 添加到您的
TextFormField
。它将在输入下方保留一个空间,并且当显示错误时,您的输入不会改变大小。
我迟到了,但我正在写这个解决方案,希望其他人能受益。
情况1:当有错误的文本字段向上排时。 在这种情况下我们可以设置crossAxisAlignment。
crossAxisAlignment: CrossAxisAlignment.start
情况 2:如果您想向用户显示整个验证消息,那么您可以在 TextFormField 中的装饰下提供 errorMaxLines。
TextFormField(
decoration: InputDecoration(
errorMaxLines: 4),)
案例3:您应该像这样对齐两个文本字段(使用Expanded而不是Flexible,并删除mainAxisAlignment:MainAxisAlignment.spaceBetween,因为spaceBetween会将宽度分成3等份,并且SizedBox将与该行中的文本字段具有相同的宽度) .
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Padding(
padding: const EdgeInsets.all(0.0),
child: firstName,
),
),
SizedBox(width: 48.0),
new Expanded(
child: Padding(
padding: const EdgeInsets.all(0.0),
child: lastName,
),
),
],
)
使用 IntrinsicHeight 和 CrossAxisAlignment.stretch。
看这里:
return IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
flex: 2,
child: TextFormField(...),
),
const SizedBox(width: 12),
Expanded(
child: TextFormField(...),
),
],
),
);