flutter 键盘显示后，盖住部分内容的问题

一般界面上有文本的输入框，点击后会显示键盘，正常情况是不允许键盘挡住输入框的。

基于下面的代码开始做一个实验，并尝试解决问题

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: Container(
            child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        SizedBox(
            height: 68,
            child: Align(
                alignment: Alignment.bottomLeft,
                child: TextField(
                  decoration: InputDecoration(
                    hintText: "Phone Number",
                    prefixIcon: Icon(
                      Icons.phone_iphone,
                      size: 26,
                    ),
                  ),
                ))),


        //Next Button
        Padding(
            padding: EdgeInsets.only(left: 20, right: 20, top: 29, bottom: 20),
            child: SizedBox(
              height: 42,
              child: FlatButton(
                child: Text("Next"),
                textColor: Colors.white,
                color: Color.fromARGB(255, 93, 160, 254),
                onPressed: () {},
              ),
            ))
      ],
    )));
  }
}

上面的代码很简单就二个控件，界面如下：（点击TextField之后，出现的键盘也不会有问题）

如果再加上多个输入框，如下图，就出现问题了

错误提示如下:

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 20 pixels on the bottom.

User-created ancestor of the error-causing widget was: 
  Container file:///Users/ag/Documents/RN/flutter_app/lib/main.dart:45:15
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.
 

所以解决方法是 使用 flex, 让控件自适应可获得的空间，如果内容大于可获取的空间，把超出的大小先用 ClipRect 处理再放入flex控件， 或者  使用 可滚动的控件（如：ListView） 中。（怎么用 ClipRect本文不涉及）

接下来我把所有的TextField都放入 Expanded 中，结果还是不正确

仔细查看会发现，原来被挡住的是 Next 这个Button，这次被挡的是某一个 TextField

结论：

    Expanded 里面的内容尺寸不会因为Expanded的变小而变小。 外面没有用Flex的控件（如：这里的Button) 也不会改变尺寸。

    当内容很多时，必须是类似 ListView这样的滚动控件。

把 Expanded 中的Column 改成  ListView 

从结果可以看出，用了ListView之后，最上面的内容可以自动滚出屏幕之外。（注意：原来最上面那个TextField的位置是不会变动的）

问题解决。

还有一个情况需要考虑：当出现空间不够时，什么内容需要显示在界面给用户，什么不重要不需要再显示出来？

如上面的例子，当键盘出现后，按钮 Next 是否还有必要再出现？

假如 必须要出现，则放在 Flex 之外（现在就是这种情况）

如果不需要出现，则放进 Flex中，如：把它移到 ListView 中：

谢谢，有问题请留言

--END--