Android 键盘在Flatter应用程序中向上推FloatingAction按钮
我正在尝试创建一个简单的应用程序在颤振与浮动的行动按钮在底部,当点击显示一个警告对话框,以添加项目列表。 每次我点击按钮时,键盘都会向上推操作按钮,导致溢出错误。 当键盘打开时,有没有办法避免向上按操作按钮? 以下是我拍摄的快照: 下面是源代码:Android 键盘在Flatter应用程序中向上推FloatingAction按钮,android,mobile,flutter,flutter-layout,Android,Mobile,Flutter,Flutter Layout,我正在尝试创建一个简单的应用程序在颤振与浮动的行动按钮在底部,当点击显示一个警告对话框,以添加项目列表。 每次我点击按钮时,键盘都会向上推操作按钮,导致溢出错误。 当键盘打开时,有没有办法避免向上按操作按钮? 以下是我拍摄的快照: 下面是源代码: import 'package:flutter/material.dart'; import '../model/todo_item.dart'; class ToDoScreen extends StatefulWidget { @overri
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);
}
}
导入“包装:颤振/材料.省道”;
导入“../model/todo_item.dart”;
类ToDoScreen扩展了StatefulWidget{
@凌驾
_ToDoScreenState createState()=>\u ToDoScreenState();
}
类_ToDoScreenState扩展了状态{
TextEditingController_TextEditingController=TextEditingController();
@凌驾
小部件构建(构建上下文){
返回脚手架(
背景颜色:Colors.blueAccent,
正文:专栏(
儿童:[ToDoItem(“散步”,“2019年1月12日”)],
),
浮动操作按钮:浮动操作按钮(
工具提示:“添加项目”,
子:图标(Icons.add),
背景颜色:Colors.red,
onPressed:\u showFormDialog,
),
);
}
void_showFormDialog(){
var警报=警报对话框(
内容:行(
儿童:[
扩大(
孩子:TextField(
控制器:_textededitingcontroller,
自动对焦:对,
装饰:输入装饰(
标签文字:“物品”,
hintText:“比如买蔬菜”,
图标:图标(Icons.note_add)),
),
)
],
),
行动:[
扁平按钮(
已按下:(){
//_handleSubmit(_textededitingcontroller.text);
_textEditingController.clear();
},
子项:文本(“保存待办事项”),
),
扁平按钮(
已按下:(){
Navigator.pop(上下文);
},
子项:文本(“取消”),
)
],
);
showDialog(上下文:context,builder:(BuildContext context)=>alert);
}
}
我也遇到了同样的问题,我的浮动操作按钮会被按下
我使用属性解决了这个问题:
resizeToAvoidBottomPadding: false,
在父级Scafold
上
我用你的代码对它进行了测试,它也解决了这个问题。将你的完整代码包装在这里
new Container(
child: Column(
children: <Widget>[
Expanded(
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
// Your body code
] // Widget
), // Stack
), // SingleChildScrollView
), // Expanded
Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.all(10.0),
child :
// button code here
// to make button full width use minWidth: double.infinity,
,
), //Container
], // Widget
), // Column
), // Container
新容器(
子:列(
儿童:[
扩大(
子:SingleChildScrollView(
子:堆栈(
儿童:[
//你的身体密码
]//小部件
),//堆栈
),//SingleChildScrollView
),//扩展
容器(
对齐:对齐.bottomCenter,
填充:所有边缘设置(10.0),
儿童:
//按钮代码在这里
//要使按钮全宽,请使用minWidth:double.infinity,
,
),//容器
],//小部件
),//列
),//容器
您可以检查键盘是否显示,并基于此创建浮动按钮
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: keyboardIsOpened ?
null ://or an empty container
FloatingActionButton(
tooltip: 'Add Item',
child: Icon(Icons.add),
backgroundColor: Colors.red,
onPressed: _showFormDialog,
),
);
}
在build方法内部,您可以通过使用MediaQuery.of(context).viewInsets.bottom
知道键盘是否显示,并将其值保存在bool变量keyboardispened
上,如下代码所示
@override
Widget build(BuildContext context) {
bool keyboardIsOpened = MediaQuery.of(context).viewInsets.bottom != 0.0;
使用了
MediaQuery
和Visibility
小部件
Visibility(
visible: MediaQuery.of(context).viewInsets.bottom != 0.0,
child: FloatingActionButton(
onPressed: () {
},
child: Icon(Icons.chat),
),
),
使用
ListView
而不是Column
谢谢您的回复。是的,我知道我可以使用ListView而不是Column,但我的问题是如何在每次打开键盘时停止浮动按钮以使其升高。有解决这个问题的办法吗?这就解决了问题。但是,如果我想让我的Scafold
中的其他小部件调整大小,而不是浮动操作按钮,该怎么办?如果我们需要此属性为true,例如,我有一个文本字段,它将在打开时被键盘隐藏。我还有浮动动作按钮。有什么想法吗?在Flatter 2.0中,属性已更改为resizeToAvoidBottomInset
我使用了此方法。这是一个解决问题的简单方法。此外,还可以将浮动操作按钮包装在Visibility()小部件中。然后只需根据keyboardIsOpened变量设置可见性参数。~~~floatingActionButton:可见性(可见性:keyboardIsOpened?false:true,子级:floatingActionButton(),);~~这样你就不会有键盘打开时浮动动作按钮收缩的恼人动画。我第一次使用这个解决方案,但我遇到了浮动按钮的问题,因为它仍然在屏幕上,但它只是不可见,所以如果你错误地触摸键盘上方的屏幕,你可能会按下它。所以我宁愿在我使用完键盘之前移除它。这个答案很危险<代码>视图插图不仅仅适用于键盘。