当我选择文本字段时,键盘会在其上移动

Question

当我选择文本字段时,将显示键盘,但键盘隐藏我选择的TextField.有人有解决方案吗？

谢谢.

Answer 1

只需在此剪切并粘贴您的身体代码 -

SingleChildScrollView(
            child: Stack(
              children: <Widget>[
                  // your body code 
               ],
             ),
           ),

Answer 2

 Scaffold(
    resizeToAvoidBottomInset: true,
    body: SingleChildScrollView(
      child: Container(
        child: Column(
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            )
          ],
        ),
      ),
    )
);

// resizeToAvoidBottomPadding: false isDeprecated

使用 resizeToAvoidBottomInset: true。

Answer 3

实现这一点的一个非常简短的方法是简单地使用 MediaQuery 来获取底部视图插图。这将如下所示：

...
return Row(
  children: <Widget>[
    TextField(
      decoration: InputDecoration.collapsed(hintText: "Start typing ..."),
      controller: _chatController,
    ),
    SizedBox(
      height: MediaQuery.of(Context).viewInsets.bottom,
    ),
  ],
);
...

希望能帮助到你！

Answer 4

撰写动画并在TextField获得焦点时向上移动TextField容器.

有关编写动画的知识,请参阅: 在Dart的Flutter框架中编写动画和链接动画

使用Flutter的FocusNode检测TextField上的焦点

编辑:

在这里,我写了一个完全符合你想要的例子:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Animation Demo',
      theme: new ThemeData(
        primaryColor: new Color(0xFFFF0000),
      ),
      home: new FormDemo(),
    );
  }
}

class FormDemo extends StatefulWidget {
  @override
  _FormDemoState createState() => _FormDemoState();
}

class _FormDemoState extends State<FormDemo> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    _animation = Tween(begin: 300.0, end: 50.0).animate(_controller)
    ..addListener(() {
      setState(() {});
    });

    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        _controller.forward();
      } else {
        _controller.reverse();
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false, // this avoids the overflow error
      appBar: AppBar(
        title: Text('TextField Animation Demo'),
      ),
      body: new InkWell( // to dismiss the keyboard when the user tabs out of the TextField
        splashColor: Colors.transparent,
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Container(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              SizedBox(height: _animation.value),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'I move!',
                ),
                focusNode: _focusNode,
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 5

就我而言，我必须将@Javid Noutashwhich use给出的答案AnimationController与scrollPadding的属性结合起来TextFormField。代码：

在构建方法中添加这一行

double bottomInsets = MediaQuery.of(context).viewInsets.bottom;

添加scrollPadding属性

return ListView(
children:[

...widgets,
Container(
margin:EdgeInsets.only(
   top:1.0,
   left:1.0,
   right:1.0,
   bottom:_focusNode.hasFocus && bottomInsets != 0?
          _animation.value : 1.0),
child:TextFormField(
   decoration: InputDecoration(
                  labelText: 'I move!',
               ),
   focusNode: _focusNode,
   scrollPadding: EdgeInsets.only(bottom:bottomInsets + 40.0),
  ),
 ),
]
);

注意：将此代码与@Javid Noutash的代码结合起来

Answer 6

我遇到了同样的问题，其中父小部件是 Material，其他小部件位于 ListView 内。当我将父小部件更改为 Scaffold 且无需任何额外代码并且 TextField（在我的情况下为 TextFormField）自动显示在键盘上方时，问题得到了解决。因此，如果您遇到此问题，请确保将 Scaffold 作为主要小部件。