Question

我创建了一个带有Flutter的Form，但是当我专注于一个字段并弹出键盘时，内容就会消失。

import 'dart:async';

import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
import 'package:greencat/greencat.dart';
import 'package:woody_app/Application.dart';
import 'package:woody_app/actions/AuthAction.dart';
import 'package:woody_app/states/AuthState.dart';

class ProfileScreen extends StatefulWidget {
  @override
  State createState() => new ProfileScreenState();
}


class PersonData {
  String name = '';
  String phoneNumber = '';
  String password = '';
}

class ProfileScreenState extends State<ProfileScreen> {
  final Store<AuthState, AuthAction<dynamic>> _store = Application.get().store;
  StreamSubscription<AuthState> _subscriber;

  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  PersonData person = new PersonData();

  void showInSnackBar(String value) {
    _scaffoldKey.currentState.showSnackBar(new SnackBar(
        content: new Text(value)
    ));
  }

  bool _autovalidate = false;
  final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  void _handleSubmitted() {
    final FormState form = _formKey.currentState;
    if (!form.validate()) {
      _autovalidate = true;  // Start validating on every change.
      showInSnackBar('Please fix the errors in red before submitting.');
    } else {
      form.save();
      showInSnackBar('${person.name}\'s phone number is ${person.phoneNumber}');
    }
  }

  String _validateName(String value) {
    if (value.isEmpty)
      return 'Name is required.';
    final RegExp nameExp = new RegExp(r'^[A-za-z ]+$');
    if (!nameExp.hasMatch(value))
      return 'Please enter only alphabetical characters.';
    return null;
  }

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

    _subscriber = _store.stream.listen((AuthState state) {
      setState(() {});
    });
  }


  @override
  void dispose() {
    _subscriber.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(child: new Form(
        key: _formKey,
        autovalidate: _autovalidate,
        child: new ListView(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          children: <Widget>[
            new TextFormField(
              decoration: const InputDecoration(
                icon: const Icon(Icons.person),
                hintText: 'What do people call you?',
                labelText: 'Name *',
              ),
              onSaved: (String value) {
                person.name = value;
              },
              validator: _validateName,
            ),
            new Container(
              padding: const EdgeInsets.all(20.0),
              alignment: const FractionalOffset(0.5, 0.5),
              child: new FlatButton(
                child: const Text('SUBMIT'),
                onPressed: _handleSubmitted,
              ),
            ),
            new Container(
              padding: const EdgeInsets.only(top: 20.0),
              child: new Text('* indicates required field', style: Theme
                  .of(context)
                  .textTheme
                  .caption),
            ),
          ],
        )
    ));
  }
}

Answer 1

在您的Scafold（）中尝试以下操作

resizeToAvoidBottomPadding: false,

Answer 2

将小部件树包装在SingleChildScrollView（）内，无论何时选择TextField，都可以向上滚动以查看它。

Answer 3

签出是否要嵌套支架。每个支架都在键盘和UI元素之间添加了额外的空间。为了检查是否存在这种情况，请将脚手架的属性“ resizeToAvoidBottomPadding”设置为false并查看效果

当键盘显示时，颤音形式消失

3 个答案: