显示键盘时如何隐藏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<BottomNavigationBarItem> items, Key key, void Function(int) onTap)') isn't a valid override of 'CupertinoTabBar.copyWith'
我发现升级到1.17.0
后需要将Size iconSize
改成double iconSize
来修复错误以上是关于显示键盘时如何隐藏cupertinoTabBar?或者如何让键盘覆盖酒吧?还是将标签栏始终保持在底部?的主要内容,如果未能解决你的问题,请参考以下文章
创建 UITextView 时,如何在实时视图中显示的 Swift Playgrounds(在 Xcode 上)的 UI 中隐藏键盘?