我是个新手。我被困在一个地方,找不到确切的答案。
我有一个BottomNavigationBar,其中有一个需要用户输入的文本字段。当我单击文本字段时,键盘会覆盖整个半屏,文本字段隐藏在键盘后面,无法看到。我想将文本字段移动到键盘上方,以便为用户提供更好的UI。
这是底部导航条形码:
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),
),
),
),
],
),
);
这是主体(脚手架)我调用它从:
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,
);
截图:
文本域在底部导航栏的键盘后面
EXPERIMEZ选择德克萨斯州
6条答案
按热度按时间f8rj6qna1#
你可以这样简单地实现它:
ux6nzvsh2#
经过一番努力,我终于做到了。谢谢大家的贡献。
忽略GestureDetector()小部件。是的,你必须将主体 Package 到SingleChildScrollView()中,我正在使用bottomNavigationBar,必须完成它。每个人都对我的问题做出了贡献。我只需要相应地连接拼图块。
我不得不删除BottomNavigation文件,并将代码包含在容器的主体中。
cs7cruho3#
将其包裹在SingleChildScrollView内将允许小工具在键盘出现时向上滑动。
qmelpv7a4#
将所有小部件放置在SingleChildScrollView小部件内。
更新:使用堆栈而不是底部导航栏显示文本字段
kyxcudwk5#
只是把你的每一个小部件在
ListView
和使用shrinkWrap
属性。示例代码如下:pkmbmrz76#
如果这可以帮助其他人,在容器底部添加填充可以很好地保持bottonnavbar在键盘的顶部。
添加此填充:填充:仅限边缘插入(底部:媒体查询.(上下文).视图插入.底部)