Flutter BottomNavigationBarが3つ以上の項目で機能しない件
質問
私は ボトムナビゲーションバー を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 は改善される必要があります。 を改善する必要があります。
関連
-
[解決済み] フラッターサークルデザイン
-
[解決済み] Flutterで丸みを帯びたボタン/border-radius付きボタンを作成する
-
[解決済み] InitStateメソッドで非同期データをロードする方法はありますか?
-
[解決済み] ローカルフラッターパッケージを別のフラッターアプリケーションで使用するには?
-
[解決済み] スクロールグローを消すには?
-
[解決済み] Dartでintをdoubleに変換する簡単な方法はありますか?
-
[解決済み] Dartの "var "型と "dynamic "型の違い?
-
[解決済み] Dartで数値に先頭の0を追加する
-
[解決済み] Dart FoldとReduceの比較
-
[解決済み] FlutterのBottomNavigationBarのスタイル
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] FlutterのBuildキャッシュをクリアする方法は?
-
[解決済み] Flutter SVG レンダリング
-
[解決済み] TextFieldのBorder Colorを変更できない。
-
[解決済み] ローカルフラッターパッケージを別のフラッターアプリケーションで使用するには?
-
[解決済み] スクロールグローを消すには?
-
[解決済み] Flutter (Dart) アプリにタップでクリップボードにコピーする機能を追加するには?
-
[解決済み] Dartの "var "型と "dynamic "型の違い?
-
[解決済み] Flutterで何かを15度回転させるには?
-
[解決済み] flutter用dart sdkのアップデート
-
配列に値が存在するか確認する Flutter dart