Flutter中解决键盘遮挡输入框的问题

在Flutter和android中一样,当弹出键盘的时候如果输入框不能够滚动,就会超出边界错误或者是键盘弹出框挡住了输入框,导致无法看见输入框中的内容,为了能够解决这种问题我们需要使用滚动的View,然而再Flutter中就是 SingleChildScrollView,使用方法如下

1、直接使用 SingleChildScrollView 包裹子元素

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFcccccc),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 200,
              color: Colors.black12,
              child: Center(child: Text("顶部")),
            ),
            SizedBox(height: 20),
            Container(
              height: 200,
              margin: EdgeInsets.all(10),
              width: double.infinity,
              color: Colors.white,
              child: Column(
                children: [
                  Container(
                    height: 40,
                    width: 250,
                    margin: EdgeInsets.all(10),
                    child: TextField(
                      decoration: InputDecoration(
                        fillColor: Color(0xffcfcccc),
                        filled: true,
                        hintText: '请输入账号',
                        contentPadding: EdgeInsets.only(left: 20),
                      ),
                    ),
                  ),
                  Container(
                    height: 40,
                    width: 250,
                    margin: EdgeInsets.all(10),
                    child: TextField(
                      decoration: InputDecoration(
                        fillColor: Color(0xfffdfccc),
                        filled: true,
                        hintText: '请输入密码',
                        contentPadding: EdgeInsets.only(left: 20),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

模仿使用上面代码就可以解决弹出键盘导致的异常问题了