颤振:浮动动作按钮固定位置
颤振:浮动动作按钮固定位置
提问于 2019-05-25 21:24:43
我有以下代码：
return Scaffold(
appBar: AppBar(
title: Text('Sample Code'),
),
body: ListView(
padding: const EdgeInsets.all(20.0),
children: <Widget>[
TextField(
decoration: InputDecoration(labelText: "Text"),
),
TextField(
decoration: InputDecoration(labelText: "Text"),
),
TextField(
decoration: InputDecoration(labelText: "Text"),
),
],
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 50.0,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);每当键盘显示要在TextField中输入文本时，FloatingActionButton就会移动到键盘的顶部，如下所示：
我想要的是，按钮停留在底部的导航栏，并没有移动时，键盘出现。我将resizeToAvoidBottomPadding: false,添加到Scaffold中，这可以防止按钮移动，但在键盘显示时也会阻止ListView移动以保持可见。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-05-25 22:12:05
也许有一种更优雅的方法来做这件事？但这会解决你眼前的问题。
有一个不错的小插件来检测键盘可见性这里。那么，您所需要做的就是监听键盘的可见性状态，并在键盘可见时隐藏FAB。
示例：
import 'package:flutter/material.dart';
import 'package:keyboard_visibility/keyboard_visibility.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SO Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool keyboardOpen = false;
@override
void initState() {
super.initState();
KeyboardVisibilityNotification().addNewListener(
onChange: (bool visible) {
setState(() => keyboardOpen = visible);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sample Code'),
),
body: ListView(
padding: const EdgeInsets.all(20.0),
children: <Widget>[
TextField(decoration: InputDecoration(labelText: "Text")),
TextField(decoration: InputDecoration(labelText: "Text")),
TextField(decoration: InputDecoration(labelText: "Text")),
],
),
bottomNavigationBar: BottomAppBar(
child: Container(height: 50.0),
),
floatingActionButton: keyboardOpen
? SizedBox()
: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}Stack Overflow用户
发布于 2020-07-09 18:56:07
将浮动动作按钮包装在positioned widget中对我不起作用。但是，结合添加Scaffold的属性
resizeToAvoidBottomPadding:假的，
您还可以使用SingleChildScrollView小部件和使用MediaQuery.of方法的填充.
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.lightBlueAccent,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.lightBlueAccent,
child: Icon(Icons.add),
onPressed: () {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: AddTaskScreen())),
backgroundColor: Colors.transparent);
},
),Stack Overflow用户
发布于 2020-07-30 03:19:20
只需使用Scaffold内部的属性resizeToAvoidBottomInset: false
它将立即解决这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56308831
复制相关文章
相似问题
腾讯云开发者
