flutter - 如何通过 IME 在屏幕底部显示 Flutter TextField

Question

我的页面是一个 SingleChildScrollView，它有一个子列。我在屏幕底部有一个 TextField。当 IME 耗尽时，如何使 TextField 显示在 IME 之上。现在 TextField 由 IME 覆盖。而且它是不可见的，util 手动滚动。

演示代码

import 'package:flutter/material.dart';

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          elevation: 0.0,
          title: new Text(
            'title',
          ),
        ),
        body: new Home(),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new SingleChildScrollView(
      child: new Column(
        children: <Widget>[
          new ImageZone(),
          new Div(),
          new TextEditZone(),
          new Div(),
        ],
      ),
    );
  }
}

class ImageZone extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new ImageZoneState();
}

class ImageZoneState extends State<ImageZone> {
  @override
  Widget build(BuildContext context) {
    return new Material(
      elevation: 1.0,
      color: Colors.white,
      child: new Container(
        height: 380.0,
        width: double.infinity,
        child: new Icon(
          Icons.access_time,
          size: 360.0,
        ),
      ),
    );
  }
}

class Div extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new SizedBox(
      height: 12.0,
    );
  }
}

class TextEditZone extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new TextEditZoneState();
  }
}

class TextEditZoneState extends State<TextEditZone> {
  @override
  Widget build(BuildContext context) {
    return new Material(
      elevation: 1.0,
      child: new Container(
        width: double.infinity,
        color: Colors.white,
        padding: new EdgeInsets.all(16.0),
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new TextField(
              style: new TextStyle(fontSize: 14.0),
              textAlign: TextAlign.end,
            ),
            new Div(),
            new TextField(
              style: new TextStyle(fontSize: 14.0),
              textAlign: TextAlign.end,
            ),
            new Div(),
            new TextField(
              style: new TextStyle(fontSize: 14.0),
              textAlign: TextAlign.end,
            ),
          ],
        ),
      ),
    );
  }
}

屏幕截图:

我想要的:
当我单击其中一个 TextField 时，TextField 会自动滚动 IME。

Answer 1

您的问题已在此示例中解决 here，请仔细检查并将所有 TextField 包装在 EnsureVisibleWhenFocused 中，这将使 TextField 位于键盘上方。

问候，鲯鳅鱼