Flutter: BottomNavigationBar-Elemente werden weiß, wenn mehr als 3 Elemente vorhanden sind

Erstellt am 17. Dez. 2017  ·  21Kommentare  ·  Quelle: flutter/flutter

Schritte zum Reproduzieren

Wenn Sie mehr als 3 Elemente in einem BottomNavigationBar hinzufügen, werden alle Elemente weiß und sind auf dem hellgrauen Hintergrund nicht lesbar. Außerdem ist das aktive Element ebenfalls weiß und nicht das bereitgestellte fixedColor . Ein minimales Codebeispiel finden Sie hier

Siehe auch die folgenden Bilder:

schermafbeelding 2017-12-17 om 20 52 39

schermafbeelding 2017-12-17 om 20 52 50

Protokolle

N / A

Flutter Doktor

[✓] Flutter (on Mac OS X 10.13.1 17B1003, locale nl-NL, channel alpha)
    • Flutter at /Users/dirk/Developer/flutter/sdk
    • Framework revision 8f65fec5f5 (5 days ago), 2017-12-12 09:50:14 -0800
    • Engine revision edaecdc8b8
    • Tools Dart version 1.25.0-dev.11.0
    • Engine Dart version 2.0.0-edge.d8ae797298c3a6cf8dc9f4558707bd2672224d3e

[✓] Android toolchain - develop for Android devices (Android SDK 26.0.0)
    • Android SDK at /Users/dirk/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-26, build-tools 26.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[-] iOS toolchain - develop for iOS devices (Xcode 9.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.2, Build version 9C40b
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    • CocoaPods version 1.2.0

[✓] Android Studio (version 2.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] IntelliJ IDEA Ultimate Edition (version 2017.3)
    • Flutter plugin version 20.0.3
    • Dart plugin version 173.3727.108

[✓] Connected devices
    • iPhone X • 9500EA8E-1292-4223-BFFF-1B2134D5C47C • ios • iOS 11.2 (simulator)
annoyance material design framework

Hilfreichster Kommentar

Wenn Sie nicht verstanden haben, wie Sie das Problem beheben können:

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,

Alle 21 Kommentare

/cc @xster

cc @HansMuller , ich erinnere mich vage, dass ich einen älteren Fehler dazu gesehen habe, aber ich kann ihn nicht finden

Wenn Sie BottomNavigationBarType.fixed verwenden, ist dies in Ordnung, aber wenn Sie BottomNavigationBarType.shifting verwenden, ist dies falsch

Auch ich habe dieses Problem. weiß jemand wie man das beheben kann?

gleiches Problem bei mir

Ich habe dies zu unserer Liste der Dinge hinzugefügt, die wir uns später in diesem Jahr ansehen sollten. Wir würden uns jedoch freuen, Patches zu überprüfen, wenn jemand die Möglichkeit hat, sich den Code anzusehen und herauszufinden, was los ist, bevor wir dazu kommen.

Wenn mehr als 3 BottomNavigationBar-Elemente bereitgestellt werden, ändert sich der Typ, falls nicht angegeben, in BottomNavigationBarType.shifting gemäß https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html. Diese Information sollte im Dokument der Klasse hervorgehoben werden. Es ist leicht zu übersehen, wo es ist (ich habe es übersehen).

Wenn der Typ der BottomNavigationBar BottomNavigationBarType.shifting ist, werden der Elementtext und die Symbole in Weiß gerendert, über DefaultTextStyle und IconTheme. Es wird davon ausgegangen, dass ihr BottomNavigationBarItem.backgroundColor als Kontrastfarbe angegeben wird. Das ist offensichtlich verwirrend.

Die allgemeine Idee bei den unteren Navigationsleisten vom Typ shifting ist, dass jedes Element eine andere Hintergrundfarbe hat (die sich von Weiß abhebt), da diese Farbe die Farbe der gesamten Navigationsleiste wird, wenn das Element ausgewählt wird.

Das Dokument für BottomNavigationBar und NavigationBarItem muss verbessert werden.

@HansMuller Danke, das hat funktioniert!

@HansMüller , großes Lob!

Wenn Sie nicht verstanden haben, wie Sie das Problem beheben können:

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,

Bin ich der einzige, der denkt, dass es das Verhalten basierend auf der Anzahl der Tabs nicht automatisch ändern sollte?
Es erscheint mir nicht intuitiv, ein anderes Verhalten zu erwarten.

danke 👍

Danke.

Was mache ich, wenn ich nicht möchte, dass die Icons weiß sind, sie aber das Verhalten haben sollen, sich zu verschieben?

Warum machen Sie nicht einfach den Standardtyp .fixed?

Ich weiß, dass dieses Problem geschlossen wurde, aber es fühlt sich immer noch wie ein Fehler an, obwohl die Dokumentation gut aktualisiert wurde.
Ich würde vorschlagen, den Standard festzusetzen oder das Verhalten von BottomNavigationBarType.shifting mit vier Elementen zu korrigieren.

Ich habe das "backgroundColor"-Agrument für jedes "BottomNavigationBarItem" bereitgestellt und das Problem ist gelöst.

Ich habe es geschafft, das Problem zu lösen, indem ich die Eigenschaft showUns selectedLabels: true in die BottomNavigationBar eingegeben habe

return new BottomNavigationBar(

  showUnselectedLabels: true,

  items: <BottomNavigationBarItem>[...

Was ist, wir wollen nicht, dass sich das Verhalten ändert, wenn wir mehr als drei Elemente haben. Gibt es dafür irgendeine Arbeit?

fügen Sie showUnselec tedLabels:true zu BottomNavigationBar hinzu
fügen Sie backgroundColor: Colors.blue zu BottomNavigationBarItem hinzu
Dann alles angezeigt

Bin ich der einzige, der denkt, dass ich das Verhalten basierend auf der Anzahl der Tabs nicht automatisch ändern sollte?
Es erscheint mir nicht intuitiv, ein anderes Verhalten zu erwarten.

Ich denke, das gleiche

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen