flutter - 颤振 2.0:嵌套 MaterialApps -> showModalBottomSheet 中的 textInput 问题
问题描述
在我的 App 中,我使用 2 个 Material Apps 来处理带有底部导航栏的导航。由于我的应用程序非常复杂,因此这是最好的方法。
在一个屏幕上,当用户未登录时,会打开一个底部表单,用户可以在其中输入他的登录凭据。
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,
);
}
}
现在解决问题:
在颤振 1.22 中:
当用户点击 TextInput 时,键盘会打开,并且 bottomSheet 将其位置移动到键盘上方。
在 Flutter 2.0 中:
当用户点击 TextInput 时,键盘会打开,bottomSheet 会将其位置移出屏幕
有没有人有一个好的解决方法?
到目前为止,我尝试 了给 bottomSheet 一个底部填充:
底部:MediaQuery.of(context).viewInsets.bottom),
但这并没有解决问题
解决方案
我认为两个嵌套的 MaterialApp 的应用程序结构有点奇怪。您描述的行为与我在设备上使用您的代码时得到的行为不完全相同。
但是在我的情况下,我通过设置resizeToAvoidBottomInset: false
两个Scaffold
元素来解决问题。
推荐阅读
- jquery - JS平滑滚动不适用于附加锚
- azure-keyvault - Vault .NET - 版本化 K/V 机密引擎的路径无效
- wicket - 第一次呈现页面时如何为模态窗口生成空div?
- amazon-web-services - 如何检查 VPC 中两个资源之间的连接性/可达性?
- django - 如何以最低的成本在 GCP 上部署 Django 应用程序和 PostgreSQL 以实现最小的服务器负载?
- xcode - 对目标 macOS 10.15 使用 Xcode 12 构建错误
- python - TypeError:使用请求时,类型集的对象不是 JSON 可序列化的
- node.js - PM2, 502 Bad gateway, Nginx 同时服务于 React 应用程序和 NodeJS API
- c - 它不打印哈希是什么?
- c++ - 动态加载使用应用程序方法的 dll