如何在写作时隐藏/移动图像

Question

我正在 Flutter 上写一个表单，但是在我写的时候，textFields 看不到，因为键盘覆盖了它。因此，我想减小图像的大小并在必要时移动以显示文本字段。

它是这样开始的：

当我在密码字段上写字时，它是这样的：

所以，我希望在编写页面移动时看到活动焦点文本字段。每个 TextField 都有一个 TextController 和一个 FocusNode 但我不知道如何解决。

文本字段的一个示例：

final emailField = TextFormField(
      controller: emailController,
      focusNode: emailFocusNode,
      keyboardType: TextInputType.emailAddress,
      onFieldSubmitted: (String value) {
        FocusScope.of(context).requestFocus(passwordFocusNode);
      },
      validator: (val) =>
          (!EmailValidator.validate(val)) ? 'Incorrect Email' : null,
      onSaved: (val) => _username = val,
      textInputAction: TextInputAction.next,
      style: style,
      decoration: InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
          hintText: "Email",
          fillColor: Colors.white,
          filled: true,
          border:
              OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
    );

总之，我需要根据选择的 TextField 来显示它并且它没有被键盘覆盖来移动屏幕。

Answer 1

例如，尝试将您的代码包含在 SingleChildScrollView 中

import 'package:flutter/material.dart';

class S56887705 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final emailField = TextFormField(
      keyboardType: TextInputType.emailAddress,
      textInputAction: TextInputAction.next,
      decoration: InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(20.0, 25.0, 20.0, 25.0),
          hintText: "Email",
          fillColor: Colors.white,
          filled: true,
          border:
              OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
    );

    return MaterialApp(
      home: SafeArea(
          child: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              emailField,
              SizedBox(
                height: 35,
              ),
              emailField,
              SizedBox(
                height: 35,
              ),
              emailField,
              SizedBox(
                height: 35,
              ),
              emailField,
              SizedBox(
                height: 35,
              ),
              emailField,
              SizedBox(
                height: 35,
              ),
              emailField,
              SizedBox(
                height: 35,
              ),
              emailField,
              SizedBox(
                height: 35,
              ),
              emailField,
              SizedBox(
                height: 35,
              ),
            ],
          ),
        ),
      )),
    );
  }
}