显示键盘时如何隐藏cupertinoTabBar?或者如何让键盘覆盖酒吧?还是将标签栏始终保持在底部?

Posted

技术标签:

【中文标题】显示键盘时如何隐藏cupertinoTabBar?或者如何让键盘覆盖酒吧?还是将标签栏始终保持在底部?【英文标题】:How to hide cupertinoTabBar when keyboard is displayed? or how to make keyboard cover the bar? or keep the tabbar in bottom always? 【发布时间】:2019-10-07 07:14:51 【问题描述】:

我在我的颤振应用程序中使用 CupertinoTabBar。 问题是当键盘出现时底部栏显示,它不应该。它是一个底栏,它应该总是在底部。

我还没有找到一些方法或技巧来做到这一点。 也许有人可以指导我获得正确的行为。

这是我的颤振医生输出

医生总结(要查看所有详细信息,请运行 flutter doctor -v):

[✓] Flutter(Channel master,v1.6.1-pre.50,在 Linux 上,语言环境 en_US.UTF-8)

[✓] android 工具链 - 为 Android 设备开发(Android SDK 版本 28.0.3)

[✓] Android Studio(版本 3.3)

[✓] VS 代码(版本 1.33.1)

[✓] 已连接设备(1 个可用)

这是 cupertinoTabBar 唯一允许的选项:

const CupertinoTabBar(
    Key key,
    @required this.items,
    this.onTap,
    this.currentIndex = 0,
    this.backgroundColor,
    this.activeColor,
    this.inactiveColor = CupertinoColors.inactiveGray,
    this.iconSize = 30.0,
    this.border = const Border(
      top: BorderSide(
        color: _kDefaultTabBarBorderColor,
        width: 0.0, // One physical pixel.
        style: BorderStyle.solid,
      ),
    ),
  )

这是我的 CupertinoTabBar 在键盘出现时上升的方式:

更新:

我正在尝试验证键盘的状态是否不显示 CupertinoTabBar,但它位于 CupertinoTabScaffold 内:

return Scaffold(
    body: CupertinoTabScaffold(
      tabBuilder: (BuildContext context, int index) 
        switch (index) 
          case 0: // Home
            return CupertinoTabView(
              navigatorKey: Undoc3Keys.homeNavigator,
              routes: getRoutes(context, store),
              onGenerateRoute: handleRoutes,
              builder: (BuildContext context) => FeedScreen(),
            );
            break;
          case 1: // Preguntar
            return CupertinoTabView(
              navigatorKey: Undoc3Keys.askNavigator,
              routes: getRoutes(context, store),
              onGenerateRoute: handleRoutes,
              builder: (BuildContext context) => SearchResultScreen(
                    arguments: "askScreen": "",
                  ),
            );
            break;
          case 2: // Perfil
            return CupertinoTabView(
              navigatorKey: Undoc3Keys.perfilNavigator,
              routes: getRoutes(context, store),
              onGenerateRoute: handleRoutes,
              builder: (BuildContext context) => ProfileScreen(),
            );
            break;
          default:
        
      ,
      tabBar: Undoc3Keys.keyboardStatus // Here is validation of keyboard.
          ? CupertinoTabBar( // A try for making invisible bar.
              items: <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                    icon: Icon(
                      Icons.radio_button_unchecked,
                      color: Colors.transparent,
                    ),
                    backgroundColor: Colors.transparent),
                BottomNavigationBarItem(
                    icon: Icon(
                      Icons.radio_button_unchecked,
                      color: Colors.transparent,
                    ),
                    backgroundColor: Colors.transparent)
              ],
              backgroundColor: Colors.transparent.withOpacity(0.0),
              inactiveColor: Colors.transparent,
              activeColor: Colors.transparent,
              border: Border(
                top: BorderSide(
                  color: Colors.transparent,
                  width: 0.0, // One physical pixel.
                  style: BorderStyle.none,
                ),
              ),
            )
          : _buildTabBar(),
    ),
  );

这是键盘出现时的情况:

【问题讨论】:

【参考方案1】:

如果您将CupertinoTabBar 放在Scaffold 的属性bottomNavigationBar 中,它应该能够在键盘打开时自动消失,所以我假设在您的情况下不可能这样做。

首先,你要知道键盘是否打开。插件keyboard_visibility 可以帮助您。

有了这些信息,您必须决定是否要显示CupertinoTabBar

class Foo extends StatefulWidget 
  @override
  _FooState createState() => _FooState();


class _FooState extends State<Foo> 
  bool isKeyboardVisible;

  @override
  void initState() 
    super.initState();
    isKeyboardVisible = false;
    KeyboardVisibilityNotification().addNewListener(
      onChange: (isVisible) 
        setState(() => isKeyboardVisible = isVisible);
      ,
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          TextField(),
          SizedBox(height: 50),
          isKeyboardVisible ? SizedBox() : CupertinoTabBar(
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.airline_seat_flat_angled),
                title: Text('Item #1'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.airline_seat_flat),
                title: Text('Item #2'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.airline_seat_individual_suite),
                title: Text('Item #3'),
              ),
            ],
          ),
        ],
      ),
    );
  

更新

你的情况有点棘手。在这种情况下,我认为更好的选择是创建一个不可见的CupertinoTabBar

class InvisibleCupertinoTabBar extends CupertinoTabBar 
  static const dummyIcon = Icon(IconData(0x0020));

  InvisibleCupertinoTabBar()
      : super(
          items: [
            BottomNavigationBarItem(icon: dummyIcon),
            BottomNavigationBarItem(icon: dummyIcon),
          ],
        );

  @override
  Size get preferredSize => const Size.square(0);

  @override
  Widget build(BuildContext context) => SizedBox();

  @override
  InvisibleCupertinoTabBar copyWith(
    Key key,
    List<BottomNavigationBarItem> items,
    Color backgroundColor,
    Color activeColor,
    Color inactiveColor,
    Size iconSize,
    Border border,
    int currentIndex,
    ValueChanged<int> onTap,
  ) => InvisibleCupertinoTabBar();

当键盘可见时,只显示这个小部件。

isKeyboardVisible ? InvisibleCupertinoTabBar() : CupertinoTabBar(
  ...
),

【讨论】:

这是个好主意。但是我还有一种情况,即我的 CupetinoTabBar 呈现在 CupertinoTabScaffold 内,这迫使我设置必须是 CupertinoTabBar 类型的 tabBar 属性,它会引发错误,因为 SizedBox 不是 CupertinoTabScaffold 的 tabbar 属性所允许的类型。我正在尝试使 CupertinoTabBar “不可见”,但它在键盘顶部保留了模糊:S 你能用你刚才提到的代码编辑你的问题吗? 谢谢!我做了一个从 cupertinoTabBar 扩展的类,但你的实现要好得多。按预期工作。 升级到 Flutter 1.17.0 后出现错误。错误'InvisibleCupertinoTabBar.copyWith' ('InvisibleCupertinoTabBar Function(Color activeColor, Color backgroundColor, Border border, int currentIndex, Size iconSize, Color inactiveColor, List&lt;BottomNavigationBarItem&gt; items, Key key, void Function(int) onTap)') isn't a valid override of 'CupertinoTabBar.copyWith' 我发现升级到1.17.0后需要将Size iconSize改成double iconSize来修复错误

以上是关于显示键盘时如何隐藏cupertinoTabBar?或者如何让键盘覆盖酒吧?还是将标签栏始终保持在底部?的主要内容,如果未能解决你的问题,请参考以下文章

如何隐藏键盘助手栏

键盘显示时 uipopover 隐藏

创建 UITextView 时,如何在实时视图中显示的 Swift Playgrounds(在 Xcode 上)的 UI 中隐藏键盘?

如何显示被虚拟键盘隐藏的文本字段?

android 横屏状态,如何监听键盘的弹起与隐藏

在 Flutter 中切换时在 CupertinoTabBar 中处理相机预览