单击 TextFormField 时隐藏在键盘后面答案

【问题标题】：TextFormField hide behind keyboard when clicked on it单击 TextFormField 时隐藏在键盘后面
【发布时间】：2020-10-15 16:57:52
【问题描述】：

我已在其父级为 SingleChildScrollView 的 Column 中实现 TextFormField。但不知何故，当我单击 TextFormField 时，它无法自动滚动。

有关更多详细信息，我正在添加视频 URL。 Video

代码如下：

Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      floatingActionButton: FloatingActionButton(
        backgroundColor: AppTheme.colors.themeBlue,
        child: Icon(Icons.arrow_forward),
        onPressed: () {

        },
      ),
      body: Container(
        color: AppTheme.colors.backgroundLight,
        child: Column(
          children: <Widget>[
            AppBarWidget(
              title: Constants.addClient,
            ),
            ProfileImageWidget(),
            Container(
                height: 100,
                width: screenSize.width,
                child: ListView(
                  padding: EdgeInsets.all(AppSize.small),
                  children: <Widget>[
                    SizedBox(
                      height: 10,
                    ),
                    ProfileTextFieldWidget(
                      labelTextStyle: AppTheme.textStyle.lightHeading
                          .copyWith(
                          fontSize: AppFontSize.s18,
                          color: AppTheme.colors.themeBlue),
                      labelText: Constants.clientName,
                      hintText: Constants.michaelNilson,
//                        cursorColor: AppTheme.colors.themeBlue,
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    ProfileTextFieldWidget(
                      labelTextStyle: AppTheme.textStyle.lightHeading
                          .copyWith(
                          fontSize: AppFontSize.s18,
                          color: AppTheme.colors.themeBlue),
                      labelText: Constants.email,
                      hintText: Constants.email,
                      textInputAction: TextInputAction.done,
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    ProfileTextFieldWidget(
                      labelTextStyle: AppTheme.textStyle.lightHeading
                          .copyWith(
                          fontSize: AppFontSize.s18,
                          color: AppTheme.colors.themeBlue),
                      labelText: Constants.mobile,
                      hintText: Constants.mobile,
                      textInputAction: TextInputAction.done,
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    ProfileTextFieldWidget(
                      labelTextStyle: AppTheme.textStyle.lightHeading
                          .copyWith(
                          fontSize: AppFontSize.s18,
                          color: AppTheme.colors.themeBlue),
                      labelText: Constants.followUp,
                      hintText: Constants.followUp,
                      textInputAction: TextInputAction.done,
                      suffixIcon: IconButton(
                        icon: Icon(
                          Icons.keyboard_arrow_down,
                          color: Colors.black87,
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    ProfileTextFieldWidget(
                      labelTextStyle: AppTheme.textStyle.lightHeading
                          .copyWith(
                          fontSize: AppFontSize.s18,
                          color: AppTheme.colors.themeBlue),
                      labelText: Constants.date,
                      suffixIcon: IconButton(
                        icon: Icon(
                          Icons.date_range,
                          size: 15,
                          color: Colors.black87,
                        ),
                      ),
                      hintText: Constants.date,
                      textInputAction: TextInputAction.done,
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    ProfileTextFieldWidget(
                      labelTextStyle: AppTheme.textStyle.lightHeading
                          .copyWith(
                          fontSize: AppFontSize.s18,
                          color: AppTheme.colors.themeBlue),
                      suffixIcon: IconButton(
                        icon: Icon(
                          Icons.access_time,
                          size: AppSize.medium,
                          color: Colors.black87,
                        ),
                      ),
                      hintText: Constants.time,
                      labelText: Constants.time,
                      textInputAction: TextInputAction.done,
                    ),
                    SizedBox(
                      height: AppSize.small,
                    ),
                    ProfileTextFieldWidget(
                      labelTextStyle: AppTheme.textStyle.lightHeading
                          .copyWith(
                          fontSize: AppFontSize.s18,
                          color: AppTheme.colors.themeBlue),
                      labelText: Constants.notes,
                      hintText: Constants.notes,
                      textInputAction: TextInputAction.done,
                    ),
                    SizedBox(
                      height: AppSize.small,
                    ),
                  ],
                )
            )
          ],
        ),
      ),
    );
  }

详情请看视频：

【问题讨论】：

可以给截图吗
@YasharthDubey 我添加了视频。请看一看。
请看我的回答并告诉我它是否有效将所有文本字段放入容器中，然后将动画放入我认为会有所帮助的地方。
@YasharthDubey 不工作。
你必须稍微修改一下，制作一个自定义动画并将该动画放到你所有的文本字段中

标签： android flutter user-interface dart

【解决方案1】：

删除resizeToAvoidBottomPadding: false, 现在已弃用

并使用 resizeToAvoidBottomInset: true,

【讨论】：

【解决方案2】：

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

如需了解如何制作动画，请参阅Composing Animations and Chaining Animations in Dart's Flutter Framework

使用 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,
              )
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：