input - Flutter TextField Widget 下奇怪的红色 block

Question

我正在我的 flutter 应用程序的一个选项卡中处理购物 list ，但在输入字段下，当键盘出现时，我总是会看到奇怪的红色 block (红色 block 一直留在那里，直到键盘消失) RedBlock which appears with keyboard

单击该字段后显示的调试报告

Performing full restart...
Restarted app in 1.172ms.
D/ViewRootImpl@da3a8cd[MainActivity](28869): ViewPostImeInputStageprocessPointer 0
D/ViewRootImpl@da3a8cd[MainActivity](28869): ViewPostImeInputStageprocessPointer 1
I/flutter (28869): [{name: Lukas, id: 1, value: 32}, {name: Sophie, id: 2, value: 20}, {name: Peter, id: 3, value: 45}]
D/ViewRootImpl@da3a8cd[MainActivity](28869): ViewPostImeInputStage processPointer 0
D/ViewRootImpl@da3a8cd[MainActivity](28869): ViewPostImeInputStage processPointer 1
V/InputMethodManager(28869): Starting input: tba=android.view.inputmethod.EditorInfo@b63ece2 nm : com.yourcompany.flutterapp ic=io.flutter.plugin.editing.InputConnectionAdaptor@484e873
I/InputMethodManager(28869): [IMM] startInputInner - mService.startInputOrWindowGainedFocus
D/InputTransport(28869): Input channel constructed: fd=101
D/InputTransport(28869): Input channel destroyed: fd=100
D/InputMethodManager(28869): ISS - flag : 0Pid : 28869 view : com.yourcompany.flutterapp
D/ViewRootImpl@da3a8cd[MainActivity](28869): MSG_RESIZED: frame=Rect(0, 0 - 1080, 2220) ci=Rect(0, 63 - 0, 918) vi=Rect(0, 63 - 0, 918) or=1
D/ViewRootImpl@da3a8cd[MainActivity](28869): Relayout returned: oldFrame=[0,0][1080,2220] newFrame=[0,0][1080,2220] result=0x1 surface={isValid=true -887126016} surfaceGenerationChanged=false

在这里你可以看到我写的代码:

import 'dart:async';
import 'dart:core';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';


class ShoppingBasket extends StatefulWidget {
  @override
  ShoppingBasketState createState() => new ShoppingBasketState();
}

class ShoppingBasketState extends State<ShoppingBasket> {

  Directory documentsDirectory;
  String dirPath;
  Database database;
  List<Map> listRecords;
  Widget listView;

  final TextEditingController _controller1 = new TextEditingController(); // name field
  final TextEditingController _controller2 = new TextEditingController(); // value field

  @override
  void initState() {
    listView = beforeDataFetchIsFinished();
    getPathAndCheckForDbAndPrepareListView();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[
          inputFieldCard(),
          listView,   //--> List view gets after all data was fetched here
        ],
      ),
    );
  }
//-----------------------------------------------------------------------------------
//-----------------------------------------------------------------------------------
//View Build ------------------------------------------------------------------------

  /// Set the listview variable with an CircularPorgressIndicator.
  /// gets overriden if the real listview has finished.
  Widget beforeDataFetchIsFinished() {
    return new Container(
      margin: new EdgeInsets.fromLTRB(0.0, 30.0, 0.0, 0.0),
      child: new Center(
        child: new CircularProgressIndicator(
          strokeWidth: 2.0,
        ),
      ),
    );
  }

  /// The Inputfield card in one methode.
  /// Returns the InputCard as one widget.
  Widget inputFieldCard() {
    return new Container(
      child: new Card(
        child: new Container(
            child: new Column(
              children: <Widget>[

                new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new Container(
                      width: 150.0,
                      padding: new EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 10.0),
                      child: new TextField(
                        controller: _controller1,
                        decoration: new InputDecoration(
                          hintText: 'Name...',
                        ),
                      ),
                    ),
                    new Container(
                      width: 150.0,
                      padding: new EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 10.0),
                      child: new TextField(
                        keyboardType: TextInputType.number,
                        controller: _controller2,
                        decoration: new InputDecoration(
                          hintText: 'Value...',
                        ),
                      ),
                    ),
                  ],
                ),

                new Container(
                  padding: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 20.0),
                  child: new RaisedButton(

                    color: Colors.green,
                    child: new Text('Insert Data', style: new TextStyle(color: Colors.white),),
                    onPressed: () {
                      insertToDb(_controller1.text, _controller2.text);
                      _controller1.clear();
                      _controller2.clear();
                    },
                  ),
                ),

              ],
            )
        ),
      ), //top card end
    );
  }

  /// the CircularProgressIndicator gets overiden if this
  /// methode gets all its data --> then rerender.
  Widget injectListViewAfterAllDataIsFetched() {
    return new Card(
      child: new Container(
        child: new ListView.builder(
          shrinkWrap: true,       //<-- Necessary because Listveiw inside Column
          itemCount: listRecords == null ? 0 : listRecords.length,
          itemBuilder: (BuildContext context, int index) {
            return new ListTile(
              title: new Text(listRecords[index]['name']),
            );
          },
        ),
      ),
    );
  }

//-----------------------------------------------------------------------------------
//-----------------------------------------------------------------------------------
//Data-Base Operations --------------------------------------------------------------

  /// Start up --> Open db and fetching data when complete
  /// start render engine again.
  Future<bool> getPathAndCheckForDbAndPrepareListView() async {
    documentsDirectory = await getApplicationDocumentsDirectory();
    String dirPath = documentsDirectory.path;

    List content = documentsDirectory.listSync();
    final File file = new File(dirPath + '/myDataBase.db');
    if(!content.contains(file)) {                                                    //Check if db exists
      await createDbIfNotExists(file);                                               //if not create it
    }

    print(await getRecords());
    listRecords = await getRecords();
    print(listRecords);

    setState(() {
      listView = injectListViewAfterAllDataIsFetched();
    });

    return true;
  }

  /// Inserting data into the data base.
  /// @return true.
  Future<bool> insertToDb(String name, String value) async {
    if(name != '' && value != '') {
      var valueSql = int.parse(value);
      String sql = 'INSERT INTO Test(name, value) VALUES("$name", $valueSql)';
      await database.inTransaction(() async {
        await database.rawInsert(sql);
      });
      listRecords = await getRecords();

      setState(() {
        listView = injectListViewAfterAllDataIsFetched();
      });
      return true;
    } else {
      return false;
    }
  }

  /// Gives the whole Db back.
  /// @return Map with all records.
  Future<List<Map>> getRecords() async {
    return await database.rawQuery('SELECT * FROM Test');
  }

  /// Creating the given File (should be an .db file).
  /// @param file Gives the file (.db) which gets created.
  /// @return true.
  Future<bool> createDbIfNotExists(File file) async {
    database = await openDatabase(file.path, version: 1,
      onCreate: (Database db, int version) async {
        await db.execute(
            "CREATE TABLE Test (id INTEGER PRIMARY KEY, name TEXT, value INTEGER)");
      });
    return true;
  }




}

你们中有人明白为什么会出现这种情况吗？并有解决它的智能解决方案？

编辑:一些照片显示我的键盘有快捷键和没有快捷键

Answer 1

我遇到了同样的问题。只需在脚手架中将 resizeToAvoidBottomPadding 设置为 false 即可解决问题。