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放在键盘上方。

此致鳅

如何在屏幕底部显示颤动的TextField显示在IME上

1 个答案: