flutter 单击编辑文本字段时,它隐藏在BottomNavigationBar中的键盘后面

vbkedwbf  于 2023-01-31  发布在  Flutter
关注(0)|答案(6)|浏览(186)

我是个新手。我被困在一个地方,找不到确切的答案。
我有一个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选择德克萨斯州

f8rj6qna

f8rj6qna1#

你可以这样简单地实现它:

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

ux6nzvsh2#

经过一番努力,我终于做到了。谢谢大家的贡献。

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

忽略GestureDetector()小部件。是的,你必须将主体 Package 到SingleChildScrollView()中,我正在使用bottomNavigationBar,必须完成它。每个人都对我的问题做出了贡献。我只需要相应地连接拼图块。
我不得不删除BottomNavigation文件,并将代码包含在容器的主体中。

cs7cruho

cs7cruho3#

将其包裹在SingleChildScrollView内将允许小工具在键盘出现时向上滑动。

Scaffold(
  body: SingleChildScrollView(
   child: Column(
      children: <Widget>[
        CloseButtonScreen(),
        Container(
          color: Colors.transparent,
          child: HeaderContent(),
        ),
        ContainerListItems(),
     ],
   ),
 ),
...
);
qmelpv7a

qmelpv7a4#

将所有小部件放置在SingleChildScrollView小部件内。
更新:使用堆栈而不是底部导航栏显示文本字段

kyxcudwk

kyxcudwk5#

只是把你的每一个小部件在ListView和使用shrinkWrap属性。示例代码如下:

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

pkmbmrz76#

如果这可以帮助其他人,在容器底部添加填充可以很好地保持bottonnavbar在键盘的顶部。
添加此填充:填充:仅限边缘插入(底部:媒体查询.(上下文).视图插入.底部)

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

相关问题