☰

Flutter BottomNavigationBar が 3 つ以上のアイテムで動作しない 質問する

tag-icon • tag-icon dart flutter
Flutter BottomNavigationBar が 3 つ以上のアイテムで動作しない 質問する

私は問題を抱えているボトムナビゲーションバーFlutter (0.6) で追加するとすぐにBottomNavigationBarItems が 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))
        ])

ここで何が問題なのですか?

ベストアンサー1

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.shiftingperに変更されます。https://api.flutter.dev/flutter/material/BottomNavigationBar-class.htmlこの情報は、クラスのドキュメントで強調表示する必要があります。その場所を見落とすのは簡単です (私は見落としました)。

BottomNavigationBar のタイプが の場合、BottomNavigationBarType.shiftingDefaultTextStyle と IconTheme によって、項目のテキストとアイコンが白でレンダリングされます。これらはBottomNavigationBarItem.backgroundColor対照的な色として指定されることが想定されています。これは明らかに混乱を招きます。

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

BottomNavigationBar と NavigationBarItem のドキュメントを改善する必要があります。

おすすめ記事