validation - flutter TextFormField 验证显示对齐错误

Question

我有一个 TextFormField对 Empty 进行验证。
为了控制高度，TextFormField嵌套在里面 Container小部件。
这会导致显示错误消息与附加图片重叠的意外副作用。
要测试示例代码，请按“提交”以查看错误。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SimpleForm(),
    );
  }
}

class SimpleForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final formKey = GlobalKey<FormState>();
    return SafeArea(
      child: Scaffold(
//          primary: true,
          body: Form(
            key: formKey,
            child: Column(
              children: [
                SizedBox(
                  height: 0,
                ),
//            Container(height: 0,),
                Container(
                  height: 38,
                  margin: EdgeInsets.all(6),
                  child: TextFormField(
                    maxLines: 1,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      hintText: 'Name',
//                  errorStyle: TextStyle(fontSize: 0, height: 0),
                    ),
                    validator: (value) => (value.isEmpty) ? '**' : null,
                  ),
                ),
                FlatButton(
                  child: Text('Submit'),
                  onPressed: () {
                    formKey.currentState.validate();
                  },
                )
              ],
            ),
          )),
    );
  }
}

Answer 1

解决方案 1。您可以设置 helperText为 TextField的 decoration并增加 Container高度:

Container(
  height: 60,
  child: TextFormField(
    maxLines: 1,
    decoration: InputDecoration(
      border: OutlineInputBorder(),
      hintText: 'Name',
      helperText: ' ', // this is new
    ),
    validator: (value) => (value.isEmpty) ? '**' : null,
  ),
),

解决方案 2。您可以将错误消息的行高设置为 0(它将显示在文本字段上方):

Container(
  height: 38,
  child: TextFormField(
    maxLines: 1,
    decoration: InputDecoration(
      border: OutlineInputBorder(),
      hintText: 'Name',
      errorStyle: TextStyle(height: 0), // this is new
    ),
    validator: (value) => (value.isEmpty) ? '**' : null,
  ),
),