键盘上方的颤动/飞镖滚动文本字段

Question

我正在使用文本字段，如何使它在输入电子邮件和密码时向上滚动一点？

这是代码的预览

https://pastebin.com/4EngQDV5

blank

Answer 1

我找到了一个很好的解决方案。
我已将其添加到TextFormField属性 中scrollPadding，如下所示

child: TextFormField(
        scrollPadding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom + fontSize*4),
        validator: _validator,
        cursorColor: cTextRegularColor,
        controller: _controller,
        obscureText: _obscure,
        obscuringCharacter: '*',
        textAlign: _textAlign,
        keyboardType: _input,
        style: const TextStyle(
          color: cTextRegularColor,
          fontSize: fontSize,
        ),

通过设置bottomInset，在我的表单中，每当用户点击表单中的TextField时，它不仅会向下滚动，还会显示表单中的下一个TextField，因此用户完成后不需要滚动填充当前字段。

显然，当用户点击表单中的下一个字段时，屏幕将再次滚动，并再次显示下一个字段，

我发现在长表单（超过 5 个字段）中，用户根本不需要滚动。

Answer 2

首先，您粘贴的代码不完整，所以我猜您将这些文本字段放在列中。您有两个选择：

1st) 在您的 Scaffold 中，您可以将此属性设置为 false，如resizeToAvoidBottomInset: false,
2o) 您可以使用SingleChildScrollView，当键盘出现时，它将向上移动您的文本字段，例如：

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.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,
      ),
      home: Scaffold(
        body: SingleChildScrollView(
          child: MyLoginPage(title: 'Flutter Demo Home Page'),
        ),
      ),
    );
  }
}

class MyLoginPage extends StatefulWidget {
  MyLoginPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyLoginPageState createState() => _MyLoginPageState();
}

class _MyLoginPageState extends State<MyLoginPage> {
  String _email;
  String _password;
  TextStyle style = TextStyle(fontSize: 25.0);

  @override
  Widget build(BuildContext context) {
    final emailField = TextField(
      obscureText: false,
      style: style,
      decoration: InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
          prefixIcon: Icon(FontAwesomeIcons.solidEnvelope),
          hintText: "Email",
          focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red[300], width: 32.0),
              borderRadius: BorderRadius.circular(97.0))),
      onChanged: (value) {
        setState(() {
          _email = value;
        });
      },
    );
    final passwordField = TextField(
      obscureText: true,
      style: style,
      decoration: InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
          prefixIcon: Icon(FontAwesomeIcons.key),
          hintText: "Password",
          focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red[300], width: 32.0),
              borderRadius: BorderRadius.circular(25.0))),
      onChanged: (value) {
        setState(() {
          _password = value;
        });
      },
    );

    return Center(
      child: Column(
        children: <Widget>[
          Container(
            color: Colors.yellow[300],
            height: 300.0,
          ),
          emailField,
          passwordField
        ],
      ),
    );
  }
}

只需复制并粘贴代码，看看它是否是您想要的。
希望这有帮助。

Answer 3

我使用 flutter 2.2.0，当我添加SingleChildScrollView时，如果键盘显示并重叠文本字段，它会自动向上滚动。resizeToAvoidBottomInset默认true允许此功能（在 iOS 上测试）。如果您希望文本字段有更多的键盘空间，请尝试Varsik Nikoyan的回答

/sf/answers/4696229681/

希望能有所帮助。

Answer 4

有一个解决方案在我的情况下给出了预期的结果。TextField 有一个属性调用scrollPadding。 scrollPadding: EdgeInsets.only(bottom:40), 默认情况下，它设置为EdgeInsets.all(20.0)

您可以给出一个固定值或使用 viewInsets。希望这也能帮助你。请在此处找到更多信息。

Answer 5

这是新代码。我想这个对你有帮助。在passwordField 声明之后添加此代码。

 return Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        emailField,
        SizedBox(
          height: 10,
        ),
        passwordField,
      ],
    ),
  ),
);