flutter TextFormField验证显示对齐错误

py49o6xq 于 2023-03-31 发布在 Flutter

关注(0)|答案(4)|浏览(199)

我有一个验证为Empty的TextFormField。
为了控制高度，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();
                  },
                )
              ],
            ),
          )),
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/63605996/flutter-textformfield-validation-display-alignment-error

4条答案

按热度按时间

xu3bshqb1#

**解决方案1.**您可以为TextField的decoration设置helperText，并增加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,
  ),
),

赞(0）回复(0）举报 2023-03-31

hec6srdp2#

你可以用这个

TextFormField(
  decoration: new InputDecoration(
  enabledBorder: OutlineInputBorder(                     //change border of enable textfield
  borderRadius: BorderRadius.all(Radius.circular(40.0)),
  borderSide: BorderSide(color: colorValue),),
        focusedBorder: OutlineInputBorder(        //focus boarder
          borderRadius: BorderRadius.all(Radius.circular(40.0)),
          borderSide: BorderSide(color: colorValue),
        ),
                 focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4)),
      borderSide: BorderSide(width: 1,color: Colors.red),
    ),
    disabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4)),
      borderSide: BorderSide(width: 1,color: Colors.orange),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4)),
      borderSide: BorderSide(width: 1,color: Colors.green),
    ),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4)),
      borderSide: BorderSide(width: 1,)
    ),
    errorBorder: OutlineInputBorder(.                              //error boarder
      borderRadius: BorderRadius.all(Radius.circular(4)),
      borderSide: BorderSide(width: 1,color: Colors.black)
    ),

        isDense: true,
        counterText: "",
        contentPadding: EdgeInsets.fromLTRB(10, 20, 10, 0),  //padding according to your need
        hintText: "create new",
        hintStyle: TextStyle(color: colorValue, fontSize: 13)),
  )),

赞(0）回复(0）举报 2023-03-31

xqnpmsa83#

谢谢你的回答Mobina
似乎问题是Flutter限制。暂时..
我决定在顶部显示错误信息。（您的解决方案：1）
没有边框，我可以像往常一样显示错误消息。（您的解决方案：（2）

// with border
            Container(
              height: 38,
              margin: EdgeInsets.all(6),
              child: TextFormField(
                textAlignVertical: TextAlignVertical.bottom,
                style: TextStyle(fontSize: 14),
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Name',
                  errorStyle: TextStyle(height: 0),
                ),
                validator: (value) => (value.isEmpty) ? 'hide overlap' : null,
              ),
            ),
// without border
            Container(
              height: 38,
              margin: EdgeInsets.all(6),
              child: TextFormField(
                textAlignVertical: TextAlignVertical.bottom,
                style: TextStyle(fontSize: 14),
                decoration: InputDecoration(
                  hintText: 'Name',
                  helperText: ' ',   isDense: true,
                  counterText: "",
                  contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
                ),
                validator: (value) => (value.isEmpty) ? 'hide overlap' : null,
              ),
            ),

赞(0）回复(0）举报 2023-03-31

pbpqsu0x4#

删除容器的高度，它会工作正常。这里是我的程序的一部分，你可以参考

Container(
                  width: MediaQuery.of(context).size.width / 1.3,
                  child: TextFormField(
                    controller: _username,
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                        fillColor: Colors.white,
                        contentPadding: EdgeInsets.all(10.0),
                        isDense: true,
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(45),
                          borderSide: BorderSide(
                              color: Color.fromARGB(255, 6, 36, 8),
                              width: 1.5),
                        ),
                        filled: true,
                        hintText: 'Email ID',
                        border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(45))),
                    validator: (value) {
                      if (value!.isEmpty ||
                          !RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
                              .hasMatch(value)) {
                        return "Invalid Email Format";
                      } else {
                        return null;
                      }
                    },
                  ),
                ),

赞(0）回复(0）举报 2023-03-31

我来回答

flutter TextFormField验证显示对齐错误

4条答案

相关问题

热门标签

最新问答