android - Flutter - 当键盘出现在android上时文本字段不显示
问题描述
我的问题是,当我专注于文本字段时,键盘会出现,但布局不会调整大小以将其保留在视图中。这个问题只存在于 android 而不是 iOS:这里是我的意思的截图:
在android上之前和之后:
iOS 之前和之后:
这是我的课:
class PlayerSelectionPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
int itemCount = Provider.of<PlayerProvider>(context).getPlayerList.length;
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
return Scaffold(
appBar: AppBar(
title: Text(AppLocalizations.of(context).translate('player_selection_page_title')),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
HapticFeedback.mediumImpact();
Navigator.push(context, MaterialPageRoute(builder: (context) => HomePage(), settings: RouteSettings(name: 'Home page')));
},
child: Icon(
Icons.chevron_right,
size: 30,
color: Colors.white,
),
),
body: itemCount > 0 ? ListView.builder(
itemCount: itemCount,
itemBuilder: (context, index) {
return Column(
children: [
PlayerDismissible(index),
Divider(
height: 0,
)
],
);
}) : Container(
padding: EdgeInsets.all(20),
alignment: Alignment.topCenter,
child: Text(AppLocalizations.of(context).translate('player_selection_page_empty_text'), textAlign: TextAlign.center, style: Theme.of(context).textTheme.subtitle2)
),
bottomSheet: BottomPlayerBar(),
);
}
}
这是我的 BottomPlayerBar() :
class BottomPlayerBar extends StatefulWidget{
@override
_BottomPlayerBarState createState() => _BottomPlayerBarState();
}
class _BottomPlayerBarState extends State<BottomPlayerBar> {
String playerName;
FocusNode myFocusNode;
@override
void initState() {
super.initState();
myFocusNode = FocusNode();
SchedulerBinding.instance.addPostFrameCallback((_) {
if (ModalRoute.of(context).isCurrent) {
myFocusNode.requestFocus();
}
});
}
@override
Widget build(BuildContext context) {
return Container(
height: 80, color: Theme.of(context).primaryColor,
padding: EdgeInsets.only(top: 20, bottom: 25, left: 20, right: 70),
child: TextField(
focusNode: myFocusNode,
textCapitalization: TextCapitalization.words,
onChanged: (val) => playerName = val.trim(),
onSubmitted: (val) {
if (playerName != null && playerName != '') {
Provider.of<PlayerProvider>(context, listen: false).addPlayer(playerName);
HapticFeedback.lightImpact();
myFocusNode.requestFocus();
} else {
myFocusNode.unfocus();
}
},
maxLength: 19,
autocorrect: false,
decoration: new InputDecoration(
counterText: "",
border: new OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
filled: true,
contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
hintStyle: GoogleFonts.rubik(color: Colors.grey[500], fontWeight: FontWeight.bold),
hintText: AppLocalizations.of(context).translate('player_selection_page_hint'),
fillColor: Colors.white),
)
);
}
@override
void dispose() {
super.dispose();
myFocusNode.dispose();
}
}
这是我的安卓清单:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="myApp">
<application
android:name="io.flutter.app.FlutterApplication"
android:label="myApp !"
android:icon="@mipmap/ic_launcher">
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
<meta-data
android:name="io.flutter.embedding.android.LaunchTheme"
android:resource="@style/LaunchTheme"
/>
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="@drawable/launch_background"
/>
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
<intent-filter>
<action android:name="FLUTTER_NOTIFICATION_CLICK" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
<meta-data
android:name="flutterEmbedding"
android:value="2" />
</application>
</manifest>
解决方案
您可以使用 Transform Widget 包装您的 BottomPlayerBar 小部件,如下所示。
Transform.translate(
offset: Offset(0.0, -1 * MediaQuery.of(context).viewInsets.bottom),
child: BottomPlayerBar(),
);
推荐阅读
- javascript - 如何从异步调用(xlsx 文件)中获取对象到全局范围
- react-native - 如何从自定义反应导航标题组件访问父状态值
- html - 将一个额外参数传递给 Form RePost 上的 MVC 控制器 Index 方法
- python - 未找到异常图像
- dolphindb - 如何删除 dolphindb 中的分区数据
- javascript - 仅当请求来自一页时如何响应?
- java - 如何制作 if 语句以查看数组是否具有特定的数字和字符并返回布尔值
- c# - 使用 Firebase (FCM) 在 Android 设备上发送推送通知
- php - 如何在 PHP SoapClient 中传递 xsi 类型的参数
- java - 具有外部引用的代码块上的线程安全