【问题标题】:How can I make BottomNavigationBar NOT stick on top of keyboard flutter?如何使 BottomNavigationBar 不粘在键盘颤动的顶部?
【发布时间】:2020-03-31 11:42:14
【问题描述】:

所以我想让 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;
      });
    },
  ),
);
}
}

当我尝试在我的文本字段上输入时,如何让它停止出现?

提前感谢您!

【问题讨论】:

    标签: flutter flutter-layout


    【解决方案1】:

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

    使用上面的代码,当我点击文本字段时,bottom nav 没有显示,我可以正确输入。

    希望这会有所帮助。

    【讨论】:

    • Flutter v1.22.4 即使 resizeToAvoidBottomInset false 底部应用栏或底部导航栏位于键盘上方。这个答案需要更新。
    • 如果您有嵌套 Scaffold,请检查您的根Scaffold 是否也设置了resizeToAvoidBottomInset: false。这可能会覆盖嵌套设置。
    • 不适用于颤振 2.5。
    猜你喜欢
    • 2019-04-21
    • 1970-01-01
    • 2018-09-17
    • 1970-01-01
    • 2019-12-23
    • 2020-11-30
    • 2015-12-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多