我试图创建一个简单的待办事项应用程序在扑动与浮动的行动按钮在底部时,点击显示一个警报对话框添加项目的列表。每次我点击按钮时,键盘向上推动操作按钮,导致溢出错误。当键盘打开时,有什么方法可以避免将操作按钮向上推?以下是我拍摄的快照:Snapshot源代码如下:
import 'package:flutter/material.dart';
import '../model/todo_item.dart';
class ToDoScreen extends StatefulWidget {
@override
_ToDoScreenState createState() => _ToDoScreenState();
}
class _ToDoScreenState extends State<ToDoScreen> {
TextEditingController _textEditingController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueAccent,
body: Column(
children: <Widget>[ToDoItem("Going for a Walk", "12 January, 2019")],
),
floatingActionButton: FloatingActionButton(
tooltip: 'Add Item',
child: Icon(Icons.add),
backgroundColor: Colors.red,
onPressed: _showFormDialog,
),
);
}
void _showFormDialog() {
var alert = AlertDialog(
content: Row(
children: <Widget>[
Expanded(
child: TextField(
controller: _textEditingController,
autofocus: true,
decoration: InputDecoration(
labelText: "Item",
hintText: "eg. Buy Vegetables",
icon: Icon(Icons.note_add)),
),
)
],
),
actions: <Widget>[
FlatButton(
onPressed: () {
// _handleSubmit(_textEditingController.text);
_textEditingController.clear();
},
child: Text("Save ToDo"),
),
FlatButton(
onPressed: () {
Navigator.pop(context);
},
child: Text("Cancel"),
)
],
);
showDialog(context: context, builder: (BuildContext context) => alert);
}
}
6条答案
按热度按时间ma8fv8wu1#
我也遇到了同样的问题,我的浮动操作按钮会被推起来。
我使用属性解决了这个问题:
在父
Scaffold
上。我用你的代码测试了它,它也解决了这个问题。
uajslkp62#
您可以检查键盘是否显示,并基于此创建浮动按钮。
在build方法中,你可以通过使用
MediaQuery.of(context).viewInsets.bottom
来知道键盘是否出现,并将其值保存在一个bool变量keyboardIsOpened
中,如下面的代码所示。cidc1ykv3#
为了防止键盘在Flutter应用中向上推动FloatingActionButton(FAB),您可以使用
MediaQuery
和Visibility
小部件。MediaQuery
小部件提供对有关当前设备屏幕的信息的访问。通过检查viewInsets.bottom
的值,我们可以确定键盘是打开还是关闭。如果viewInsets.bottom
为零,则表示键盘已关闭。要实现此解决方案,请使用
Visibility
小部件 Package 您的FAB小部件,并将visible
属性设置为条件MediaQuery.of(context).viewInsets.bottom == 0.0
。这确保FAB在键盘关闭时保持可见,并且在键盘打开时隐藏。将
Visibility
与FAB配合使用:通过这种实现,FAB在键盘关闭时可见,在键盘打开时消失,从而提供一致的用户界面。
bwntbbo34#
将您的完整代码 Package 在此
clj7thdc5#
将浮动操作按钮与底部导航栏一起 Package 在列中,然后将其作为子项传递到底部导航栏,解决了大部分问题:还要确保添加mainAxisSize:最小值添加到您的列中。
myzjeezk6#
我试着这么好