时间戳

首页 > 解决方案 > modalBottomSheet 被键盘覆盖

flutter - modalBottomSheet 被键盘覆盖

问题描述

它写在这里

/// The scaffold will expand to fill the available space. That usually
/// means that it will occupy its entire window or device screen. When
/// the device's keyboard appears the Scaffold's ancestor [MediaQuery]
/// widget's [MediaQueryData.viewInsets] changes and the Scaffold will
/// be rebuilt. By default the scaffold's [body] is resized to make
/// room for the keyboard.

据此，如果底部有一个 TextField ，Scaffold它将自行调整大小并且确实会发生。但是当我把 aTextField放在里面时，modalBottomSheet它不会被键盘向上推。键盘与modalBottomSheet（与TextField）重叠。如果Scaffold自身被调整大小，如何modalBottomSheet保持原位？并且resizeToAvoidBottomInset对 没有影响modalBottomSheet。这是示例代码。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          showModalBottomSheet(
              context: context, builder: (context) => ShowSheet());
        },
      ),
    );
  }
}

class ShowSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: TextField(
        autofocus: true,
      ),
    );
  }
}

如果这个问题很愚蠢，我很抱歉，但我不明白这一点。

标签： flutter

解决方案

我仍然不知道原因可能是因为modalBottomSheet正在使用PopupRoute所以不确定是不同的路线。无论如何，在这里我找到了我只需要放置一些底部 viewInsets 填充的解决方案。

Widget build(BuildContext context) {
    return Padding(
      padding:
          EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      child: Container(
        color: Colors.blue,
        height: 200,
        child: TextField(
          autofocus: true,
        ),
      ),
    );
  }

我还需要isScrollControlled: true,设置showModalBottomSheet()

推荐阅读