1. ホーム
  2. dart

Flutter BottomNavigationBarが3つ以上の項目で機能しない件

2023-09-13 20:45:22

質問

私は ボトムナビゲーションバー をFlutter (0.6)で使っています。を追加するとすぐに を3つ以上追加するとすぐに を子として追加すると、バーのボタンに 白いアイコンがあり、それらは台無しにされています . 3つ以下の項目を使用する場合は、すべてがうまくいっています。

私が使用しているウィジェットコードは以下のとおりです。

bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0,
          iconSize: 20.0,
          items: [
          BottomNavigationBarItem(
              title: Text('Home'), icon: Icon(Icons.accessibility)),
          BottomNavigationBarItem(
              title: Text('Preise'), icon: Icon(Icons.account_box)),
          BottomNavigationBarItem(
              title: Text('Test'), icon: Icon(Icons.adb)),
          BottomNavigationBarItem(
              title: Text('Mehr'), icon: Icon(Icons.menu))
        ])

何が問題なのか、誰かわかる人はいますか?

何かヒントがありましたら、よろしくお願いします。 マイケル

どのように解決するのですか?

4項目以上の場合は type を固定にします。

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed, // This is all you need!
  items: // ...,
)


から https://github.com/flutter/flutter/issues/13642#issuecomment-371875044

<ブロッククオート

3つ以上のBottomNavigationBarアイテムが提供された場合、タイプが に変更されます。 BottomNavigationBarType.shifting について https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html . このちょっとした情報は、クラスのドキュメントで強調されるはずです。それは どこにあるのか見落としがちです(私は見落としていました)。

BottomNavigationBarの型が BottomNavigationBarType.shifting の場合、項目のテキストとアイコンは DefaultTextStyleとIconThemeによって白色でレンダリングされます。これは その BottomNavigationBarItem.backgroundColor が指定されることを想定しています。 は対照的な色として指定されると仮定されます。これは明らかに紛らわしいです。

との全体的な考え方は shifting タイプのボトムナビゲーションバーは 各項目は異なる背景色 (白と対照的な色) を持つことです。 その色がナビゲーション・バー全体の色になるためです。 というのも、その色が、項目が選択されたときに、ナビゲーション・バー全体の色になるからです。

BottomNavigationBar および NavigationBarItem の doc は改善される必要があります。 を改善する必要があります。