Flutter 实践 (一) 记录键盘弹出 overflowed 问题的解决方案

1,035 阅读1分钟

问题记录:在普通页面下(非滑动页面)弹出输入框时,会出现 bottom overflowed 问题。如下:

WeChat9edb228e2c9b0fdbb1b9efe59b10bfd7.png

在网上找到三种方法,经实践,可完美解决:

第一种:

在Scaffold里面添加属性resizeToAvoidBottomInset,设置为false.就是内容不会随键盘弹出而滚动。

@override
Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: false,
    body: Column(
      children:  [],
    ),
  );
}

image.png

第二种:

包裹一层SingleChildScrollView,这样内容就会随键盘弹出而滚动。

Widget build(BuildContext context) {
  return Scaffold(
      body: SingleChildScrollView(
        child:Column(
          children:  [],
        ),
      )
  );
}

第三种:

包裹一层KeyboardAvoider,并且设置属性autoScroll: true。

Widget build(BuildContext context) {
  return Scaffold(
      body: KeyboardAvoider(
        autoScroll: true,
        child:Column(
          children:  [],
        ),
      )
  );
}

可根据实际开发情况选用。