dart 行中的文本字段在验证时未对齐

v2g6jxz6  于 2023-05-26  发布在  其他
关注(0)|答案(4)|浏览(335)

我有一个底部工作表,显示一组文本字段,并在有一行两个文本字段。这两个文本字段具有验证,当一个字段满足验证而另一个不满足时,该行中的文本字段将不对齐。

正如您所看到的,当显示验证消息时,“Expires End”与“CVV”不一致。如何确保在存在验证消息时对齐。

vhmi4jdf

vhmi4jdf1#

只需使用IntrinsicHeight换行并设置Row的对齐方式。

IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      TextField(),
      TextField()
    ],
  ),
)
bkhjykvo

bkhjykvo2#

您可以使用TextFielddecoration参数中的设置:你可以设置错误文本高度如下,以避免在验证失败时小部件重新排列:

decoration: const InputDecoration(
    errorStyle: TextStyle(height: 0),
  )

这将使小部件保持对齐,但随后您必须在某处放置Text小部件,因为如果您从验证器返回String以显示错误,则这将扰乱布局。
下面是一个更完整的例子:由于这是一个登录字段的密码字段,我不需要显示错误来让用户了解出错了,出现的红色下划线足以让用户了解出错的地方

//...at some point in your form
TextFormField(
  obscureText: true,
  decoration: const InputDecoration(
    labelText: 'Password',
    errorStyle: TextStyle(height: 0),
  ),
  controller: pwdTec,
  validator: (value) {
    if (value == null || value.isEmpty || value.length < 8) {
      return ""; //this will just underline the field in red
    }
    return null;
  },
  onFieldSubmitted: (_) => _formSubmit(),
),
Text(_errorMessage), //_errorMessage is a field of a StatefulWidget, that gets update by _formSubmit() with a setState() in case of errors that require an explanation

//...rest of the form
8yparm6h

8yparm6h3#

请添加一个空的帮助器文本Ex:- helperText:“”

vql8enpb

vql8enpb4#

在TextFormField小部件中使用validator属性和decoration属性显示错误消息

Form(
    key: formkey,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          title,
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
        ),
        SizedBox(
          height: 10,
        ),
        TextFormField(
            inputFormatters: [
              FilteringTextInputFormatter.allow(RegExp('[a-zA-Z0-9]')),
              LengthLimitingTextInputFormatter(25),
            ],
            controller: controller,
            obscureText: isPassword,
            autovalidateMode: AutovalidateMode.onUserInteraction,
            validator: validateEmail,
            decoration: const InputDecoration(
                border: InputBorder.none,
                fillColor: Color(0xfff3f3f4),
                filled: true))
      ],
    ),
  ),

相关问题