Как скрыть cupertinoTabBar при отображении клавиатуры? или как сделать так, чтобы клавиатура закрывала панель? или держать вкладку внизу всегда?
Я использую CupertinoTabBar в моем приложении флаттера. Проблема в том, что нижняя панель показывает, когда появляется клавиатура, а это не должно быть. Его нижняя панель, она должна быть всегда внизу.
Я не нашел какой-либо способ или трюк для этого. Может быть, кто-то может направить меня, чтобы получить правильное поведение.
Это мой вывод доктора флаттера
Резюме доктора (чтобы увидеть все подробности, запустите flutter doctor -v):
[✓] Флаттер (Мастер канала, v1.6.1-pre.50, в Linux, локаль en_US.UTF-8)
[✓] Android toolchain - разработка для устройств Android (Android SDK версия 28.0.3)
[✓] Android Studio (версия 3.3)
[✓] VS Code (версия 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(),
),
);
И как показано, когда появляется клавиатура:
2 ответа
Если вы разместите свой CupertinoTabBar
внутри атрибута bottomNavigationBar
из Scaffold
, он должен исчезать автоматически, когда клавиатура открыта, поэтому я предполагаю, что в вашей ситуации это невозможно.
Во-первых, вы должны узнать, открыта ли клавиатура или нет. Плагин https://pub.dev/packages/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: (bool 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(
...
),
Есть новый способ сделать это? Я имею в виду - получил тот же случай для показа showModalBottomSheet, а также клавиатуры для Купертино, используя:
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: cupertinoTabs,
),
tabBuilder:
...