当我单击编辑文本字段时，它隐藏在 BottomNavigationBar 的键盘后面

Question

我是新来的。我被困在一个地方，找不到确切的解决方案。

我有一个 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),
          ),
        ),
      ),
    ],
  ),
);

这是主体（脚手架），我从以下位置调用它：

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,
);

截图：

文本字段位于底部导航栏中的键盘后面

体验 texfield

Answer 1

你可以像这样简单地实现它：

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(),
    ],
  ),
);