flutter 2.0：嵌套的 MaterialApps -> showModalBottomSheet 中的 textInput 问题

问题描述

在我的应用程序中，我使用 2 个 Material 应用程序来处理底部导航栏的导航。 由于我的应用程序非常复杂，这是最好的方法。

在一个屏幕上，当用户未登录时，将打开一个底部表单，用户可以在其中输入他的登录凭据。

bottomSheet 应出现在导航栏上方。

在下面的代码片段中，我是这样解决的。

import 'package:Flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: MyHomePage(),);
  }
}

final _navigationKey = GlobalKey<NavigatorState>();

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,resizetoAvoidBottomInset: true,body: MaterialApp(
        navigatorKey: _navigationKey,routes: {
          '0': (context) => Home(),'1': (context) => Scaffold(backgroundColor: Colors.yellow),},initialRoute: '0',bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.account_Box_rounded),label: 'account',BottomNavigationBarItem(
            icon: Icon(Icons.baby_changing_station),label: 'stuff',)
        ],onTap: (int index) {
          setState(() {
            currentIndex = index;
          });
          Navigator.of(context).popUntil((route) => !(route is PopupRoute));
          _navigationKey.currentState.pushReplacementNamed(index.toString());
        },);
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      showModalBottomSheet(
        context: context,useRootNavigator: false,isScrollControlled: true,builder: (_) => Container(
          child: Padding(
            padding: const EdgeInsets.all(20.0),child: TextField(),);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizetoAvoidBottomInset: true,backgroundColor: Colors.red,);
  }
}

问题来了：

在 Flutter 1.22 中：
当用户点击 TextInput 时，键盘会打开，并且底部表格将其位置移动到键盘上方。

在 Flutter 2.0 中：
当用户点击 TextInput 时，键盘会打开并且底部表格将其位置移出屏幕

有人有好的解决方法吗？

到目前为止我尝试过的 我给了bottomSheet一个底部填充：

底部：MediaQuery.of(context).viewInsets.bottom),

但是没有解决问题

解决方法

我认为两个嵌套的 MaterialApps 的应用程序结构有点奇怪。 你描述的行为与我在设备上使用你的代码时得到的不完全相同。

但是在我的情况下，我通过将 resizeToAvoidBottomInset: false 设置为 Scaffold 元素解决了这个问题。

,

我遇到了同样的问题，我在底部工作表中使用了 SingleChildScrollView 进行了修复。

showModalBottomSheet(
  isScrollControlled: true,context: context,builder: (context) {
    return SingleChildScrollView(
    child: Container(
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),child: ...,),);
});

来源：https://github.com/flutter/flutter/issues/18564#issuecomment-586205403