[英]My textfield hides behind keyboard in BottomNavigationBar when I click to edit it
Im new to flutter. I am stuck at one place and I can't find the exact solution.我是 flutter 的新手。我被困在一个地方,找不到确切的解决方案。
I have a BottomNavigationBar in which I have a textfield that needs input from the user.我有一个 BottomNavigationBar,其中有一个需要用户输入的文本字段。 When I click on the textfield the keyboard covers up the whole half screen and textfield hides behind the keyboard and can't be seen.
当我单击文本字段时,键盘覆盖了整个半个屏幕,文本字段隐藏在键盘后面,看不到。 I want to move the textfield above the keyboard for better UI for the user.
我想将文本字段移到键盘上方,以便为用户提供更好的 UI。
this is the BottomNavigationBar code:这是 BottomNavigationBar 代码:
Widget build(BuildContext context) {
return Container(
color: Colors.grey[200],
height: 70,
child: Row(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).viewInsets.bottom,
),
Container(
width: MediaQuery.of(context).size.width * 0.6,
color: Colors.transparent,
margin: EdgeInsets.fromLTRB(40, 0, 0, 0),
child: TextField( //this is the TextField
style: TextStyle(
fontSize: 30,
fontFamily: 'Karla',
),
decoration: InputDecoration.collapsed(
hintText: 'Experimez-vous...',
hintStyle: TextStyle(color: Colors.black),
),
),
),
],
),
);
This is the main body (Scaffold) Im calling it from:这是主体(脚手架)我从以下位置调用它:
return Scaffold(
body: Column(
children: <Widget>[
CloseButtonScreen(),
Container(
color: Colors.transparent,
child: HeaderContent(),
),
ContainerListItems(),
],
),
bottomNavigationBar: BottomNavBar(), //this is where Im calling my BottomNavigationBar from
floatingActionButton: FloatingActionBtn(),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
resizeToAvoidBottomPadding: false,
);
screenshots:截图:
the textfield is behind the keyboard in bottomnavigationbar文本字段在 bottomnavigationbar 的键盘后面
EXPERIMEZ VOUS the texfield体验 texfield
After a lot of struggling this is how I achieved it.经过很多努力,这就是我实现它的方式。 Thanks everyone for contributing.
感谢大家的贡献。
return Scaffold(
body: GestureDetector(
onTap: () => {
FocusScope.of(context).unfocus(),
},
child: SingleChildScrollView(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
CloseButtonScreen(),
Container(
color: Colors.transparent,
child: HeaderContent(),
),
ContainerListItems(),
Container(
margin: EdgeInsets.only(top: 90),
padding: EdgeInsets.only(left: 20),
color: Colors.transparent,
width: MediaQuery.of(context).size.width,
child: TextFormField(
style: TextStyle(
fontSize: 30,
fontFamily: 'Karla',
),
decoration: InputDecoration.collapsed(
hintText: 'Experimez-vous...',
hintStyle: TextStyle(
color: Color(0xff2e3039),
),
),
),
),
],
),
),
),
),
);
ignore the GestureDetector() widget.忽略 GestureDetector() 小部件。 Yes you have to wrap the body into SingleChildScrollView(), I was using bottomNavigationBar, had to finish that.
是的,您必须将主体包装到 SingleChildScrollView() 中,我使用的是 bottomNavigationBar,必须完成该操作。 Everyone contributed to my question were right.
每个人都对我的问题做出了贡献。 I just had to join the puzzle pieces accordingly.
我只需要相应地加入拼图。
I had to delete BottomNavigation File and include the code in the main body within a container.我不得不删除 BottomNavigation 文件并将代码包含在容器的主体中。
You can achieve it simply like this:您可以像这样简单地实现它:
return Scaffold(
appBar: AppBar(title: Text('Your title')),
body: Column(
children: [
Expanded(
child: Text('Add things that will be shown in the body'),
),
//here comes your text field and will be shown at the bottom of the page
TextField(),
],
),
);
Place all your widgets inside SingleChildScrollView widget.将所有小部件放在 SingleChildScrollView 小部件中。
UPDATED: Using Stack instead of BottomNavigationBar to show textfield更新:使用 Stack 而不是 BottomNavigationBar 来显示文本字段
Wrapping it inside the SingleChildScrollView will allow your widget to slide up when keyboards appears.将它包装在SingleChildScrollView中将允许您的小部件在键盘出现时向上滑动。
Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
CloseButtonScreen(),
Container(
color: Colors.transparent,
child: HeaderContent(),
),
ContainerListItems(),
],
),
),
...
);
Just placed you every widget in ListView
and use shrinkWrap
property.只需将每个小部件放在
ListView
并使用shrinkWrap
属性。 Sample Code below:示例代码如下:
return Scaffold(
backgroundColor: Colors.white,
body: new Container(
child: new ListView(
shrinkWrap: true,
padding: EdgeInsets.only(left: 12.0, right: 12.0),
children: <Widget>[
widget1,
SizedBox(height: 20.0),
widget2,
SizedBox(height: 20.0),
widget3,
],
),
),
);
In case this can help somebody else, adding a padding to the bottom of the container nicely keeps the bottonnavbar on top of the keyboard.如果这可以帮助其他人,在容器底部添加填充可以很好地将 bottonnavbar 保持在键盘顶部。
add this padding: padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)添加此填充: padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
color: Colors.grey[200],
height: 70,
child: Row(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).viewInsets.bottom,
),
Container(
width: MediaQuery.of(context).size.width * 0.6,
color: Colors.transparent,
margin: EdgeInsets.fromLTRB(40, 0, 0, 0),
child: TextField( //this is the TextField
style: TextStyle(
fontSize: 30,
fontFamily: 'Karla',
),
decoration: InputDecoration.collapsed(
hintText: 'Experimez-vous...',
hintStyle: TextStyle(color: Colors.black),
),
),
),
],
),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.