如何使BottomNavigationBar不粘在键盘Flutter的顶部?

eanckbw9  于 2023-08-07  发布在  Flutter
关注(0)|答案(2)|浏览(224)

所以我想让BottomNavigationBar在键盘上的粘连停止。我试过:

resizeToAvoidBottomPadding: false; (or true both not working),

字符串
bottomnavigationbar粘在我的键盘上的问题是,当我尝试键入东西时,建议并不清晰可见,而且它在另一个页面上有一个嵌套的应用程序栏,这反过来使键入和查看建议变得非常困难。
下面是我的代码:

@override
void initState() {
super.initState();

getUser();

//PostController().getUser(widget.auth.getCurrentUser());
pages = [Home(), Search(), NewPostPage(), Notifications(), Profile()];
}

@override
Widget build(BuildContext context) {
return new Scaffold(
   resizeToAvoidBottomPadding: true,
  body: Home(context),
);
}

Widget Home(context) {
var bottomOptions = <BottomNavigationBarItem>[];
for (var i = 0; i < widget.bottomItems.length; i++) {
  var d = widget.bottomItems[i];
  bottomOptions.add(
    new BottomNavigationBarItem(
      icon: d.icon,
      title: Padding(
        padding: const EdgeInsets.fromLTRB(3, 3, 3, 0),
        child: new Text(d.title, style: TextStyle(fontSize: 12.0)),
      ),
    ),
  );
}
return Scaffold(  
  appBar: AppBar(
      title: Text(title),
      leading: Container(
        alignment: Alignment.centerLeft,
        child: IconButton(
            icon: Icon(Icons.motorcycle),
            onPressed: () {
              Navigator.push(
                  context,
                  PageRouteBuilder(
                    pageBuilder: (context, anim1, anim2) => Finder(),
                    transitionsBuilder: (context, anim1, anim2, child) =>
                        FadeTransition(opacity: anim1, child: child),
                    transitionDuration: Duration(seconds: 0),
                  ));
            }),
      ),
  body: isLoading
      ? CollectionScaleTransition(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(2.0),
              child: Icon(Icons.add_circle, size: 10, color: Colors.blue),
            ),
            Padding(
              padding: const EdgeInsets.all(2.0),
              child: Icon(Icons.add_circle, size: 10, color: Colors.blue),
            ),
            Padding(
              padding: const EdgeInsets.all(2.0),
              child: Icon(Icons.add_circle, size: 10, color: Colors.blue),
            ),
          ],
        )
      : PageView(
          controller: pageController,
          children: pages,
          onPageChanged: onPageChanged, 
          physics: NeverScrollableScrollPhysics(), 
        ),
  bottomNavigationBar: BottomNavigationBar(
    showUnselectedLabels: true,
    items: bottomOptions,
    currentIndex: currentIndex,
    selectedFontSize: 9,
    unselectedFontSize: 9,
    type: BottomNavigationBarType.fixed,
    onTap: (index) {
      setState(() {
        onTap(index);
        currentIndex = index;
      });
    },
  ),
);
}
}


如何使它停止出现时,我试图键入我的文本字段?
提前感谢!

von4xj4u

von4xj4u1#

resizeToAvoidBottomPadding属性已被弃用。我们需要使用resizeToAvoidBottomInset。更多详情here .
此外,我试图重新创建您的案例,但无法复制您提到的问题。我取了一些你的代码,并使用了我的示例,如下所示:

return Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
        title: Text('test'),
    leading: Container(
    alignment: Alignment.centerLeft,
    child: IconButton(
    icon: Icon(Icons.motorcycle),
    onPressed: () {}),
    )),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0, // this will be set when a new tab is tapped
          items: [
            BottomNavigationBarItem(
              icon: new Icon(Icons.home),
              title: new Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: new Icon(Icons.mail),
              title: new Text('Messages'),
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.person),
                title: Text('Profile')
            )
          ],
        ),
        body: Center(
            child: TextField(
              keyboardType: TextInputType.text,
              decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Enter a search term'
              ),
            ))
    );

字符串
使用上面的代码,当我点击textfield时,bottom nav没有显示,我能够正确地键入。
希望这对你有帮助。


的数据

ar5n3qh5

ar5n3qh52#

更新的解决方案是简单地用填充 Package 底部导航栏,并将其设置为MediaQuery.of(context).viewInsets

bottomNavigationBar: Padding(
  padding: MediaQuery.of(context).viewInsets,
  child: TextField(),
),

字符串

相关问题