キーボードが表示されているときにcupertinoTabBarを非表示にするにはどうすればよいですか？またはキーボードでバーを覆う方法は？または、タブバーを常に下部に保持しますか？

debugcn 投稿 Dev

ポーラアンドレア

FlutterアプリでCupertinoTabBarを使用しています。問題は、キーボードが表示されたときにbottomBarが表示されることですが、表示されるべきではありません。そのボトムバー、それは常にボトムにあるべきです。

私はこれを行うための何らかの方法やトリックを見つけていません。たぶん誰かが私を正しい行動に導くように導くことができます。

これは私のフラッタードクターの出力です

ドクターサマリー（すべての詳細を表示するには、フラッタードクター-vを実行します）：

[✓]フラッター（チャネルマスター、v1.6.1-pre.50、Linux、ロケールen_US.UTF-8）

[✓] Androidツールチェーン-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(),
    ),
  );

そして、それはキーボードが現れるときのケースをどのように示しているかです：

ヒューゴパッソス

CupertinoTabBarの属性bottomNavigationBarの中にあなたを置くとScaffold、キーボードが開いているときに自動的に消えることができるはずなので、あなたの状況ではそれを行うことは不可能だと思います。

まず、キーボードが開いているかどうかを知る必要があります。プラグイン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(
  ...
),

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-10

コメントを追加

サインイン

Related 関連記事

記事