TextFormField 在点击时消失答案

【问题标题】：TextFormField disappears on clickTextFormField 在点击时消失
【发布时间】：2019-02-11 05:17:22
【问题描述】：

我有表格可以从用户那里获取信息。但是当我点击 TextFormField 和键盘显示它消失了。

这是我的代码：

class _AddInfoState extends State<AddInfo>{

  static final GlobalKey<FormState> _key = new GlobalKey();
  bool _validate = false;
  String strTitle;
  File fileImage;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body:new Container(
        child: new Form(
          key: _key,
          autovalidate: _validate,
          child: formUI(),
        ),
      ),
    );
  }

  Widget formUI(){
    return new ListView(
      children: <Widget>[
        //Title Field
        new Container(
          padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
          child:new TextFormField(
            style: styleTextField,
            keyboardType: TextInputType.text,
            autofocus: true,
            maxLength: 45,
            decoration: InputDecoration(
                hintText: 'Enter Title',
                prefixIcon: Icon(
                  Icons.title,
                  size: 30.0,
                  color: blueColor,
                )
            ),
            validator: validateTitle,
            onSaved: (String val) {
              strTitle = val;
            },
          ),
        ),                
      ],
      physics: new ClampingScrollPhysics(),
    );
  }

【问题讨论】：

能否请您添加一张它在消失之前和之后的外观的屏幕截图，如果我们也能直观地知道发生了什么，它将更容易为您提供帮助。

标签： dart flutter flutter-layout

【解决方案1】：

根据我对视频的理解，由于您在表单中使用了可滚动的ListView，因此一旦键盘出现，列表就会向上滚动，因此它会消失。

尝试在您的脚手架中设置resizeToAvoidBottomPadding: false。这将使键盘显示为覆盖，不会向上推动内容。

例子：

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body:new Container(
        child: new Form(
          key: _key,
          autovalidate: _validate,
          child: formUI(),
        ),
      ),
    );
  }

如果这有帮助，请告诉我！

【讨论】：

颤振：══╡渲染库╞═══════════════════════════════════════════ ══════════════════════════颤动：在布局过程中抛出以下消息：颤动：一个RenderFlex在底部溢出了295个像素。 flutter: flutter: 溢出的 RenderFlex 的方向为 Axis.vertical。 flutter：RenderFlex溢出的边缘已经在渲染中用黄色和标记了
如果我运行您在上面发布的代码，我没有收到异常，但异常可能是因为主 Container 被赋予了无限高。尝试为Container 设置一些有限的高度，例如height: 200.0，如果您仍然遇到异常，请告诉我。

【解决方案2】：

将具有TextFormField 的Container 包装在SizedBox 中：

                new Form(
                autovalidate: false,
                key: _formKey,
                child: new Container(
                  height: orientation == Orientation.portrait ?  MediaQuery.of(context).size.height :  MediaQuery.of(context).size.width/1.2 ,
                  padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child:  new Column(
                    //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                       Container(
                        padding: EdgeInsets.only(top: 20.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            new SizedBox(
                            width: MediaQuery.of(context).size.width,
                            height: 100.0,
                            child: new Container(
                            padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
                             child:new TextFormField(
                             style: styleTextField,
                             keyboardType: TextInputType.text,
                             autofocus: true,
                             maxLength: 45,
                             decoration: InputDecoration(
                             hintText: 'Enter Title',
                             prefixIcon: Icon(
                             Icons.title,
                             size: 30.0,
                             color: blueColor,
                           )
                         ),
                         validator: validateTitle,
                         onSaved: (String val) {
                           strTitle = val;
                         },
                       ),
                     ),          
                   )

                           ]
                         )
                       )
                     ]
                   )
                 )
               )

【讨论】：

我使用了 SizedBox 和 Column 孩子，然后我将 TextFormField 放入其中，它对我有用。尝试添加它，并告诉我它是否适合您。
好的，让我告诉你更多细节，因为我知道你的解决方案最适合另一种情况。我有一个标签栏控制器，为此我创建了一个单独的类。在这堂课中，我添加了一个表格。这不像我需要的那样工作。有关更多信息，我也添加了一个视频。
@CodeHunter 我将向您展示我的表单的完整层次结构，我不认为将它放在标签栏中会导致问题。

【解决方案3】：

设置resizeToAvoidBottomPadding: false，然后将Column更改为ListView

【讨论】：