Flutter: Les éléments BottomNavigationBar deviennent blancs lorsque plus de 3 éléments sont présents

Créé le 17 déc. 2017 · 21Commentaires · Source: flutter/flutter

Étapes à suivre pour reproduire

Lorsque vous ajoutez plus de 3 éléments dans un BottomNavigationBar , tous les éléments deviennent blancs et sont illisibles sur le fond gris clair. De plus, l'élément actif est également blanc, et non le fixedColor fourni. Un exemple de code minimal peut être trouvé ici

Voir également les images suivantes :

schermafbeelding 2017-12-17 om 20 52 39

schermafbeelding 2017-12-17 om 20 52 50

Journaux

N / A

Docteur Flutter

[✓] 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

Source

DirkWillem

👍60

Commentaire le plus utile

Si vous n'avez pas compris comment y remédier :

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,

eshinkawa le 10 août 2018

👍184 ❤44 🎉34 🚀20

Tous les 21 commentaires

/cc @xster

cbracken le 19 déc. 2017

cc @HansMuller , je me souviens vaguement d'avoir vu un bug plus ancien à ce sujet mais je ne le trouve pas

xster le 19 déc. 2017

lors de l'utilisation de BottomNavigationBarType.fixed cela ok, mais lors de l'utilisation de BottomNavigationBarType.shifting ce mauvais

flyou le 26 déc. 2017

👍94 ❤21 🎉16 🚀9

Moi aussi j'ai ce problème. Quelqu'un sait comment réparer ceci?

wiltwitt le 16 févr. 2018

même problème pour moi

chusmf le 8 mars 2018

J'ai ajouté ceci à notre liste de choses à regarder plus tard cette année. Nous serions heureux d'examiner les correctifs si quelqu'un a la possibilité de regarder le code et de comprendre ce qui se passe avant d'y arriver.

Hixie le 9 mars 2018

Lorsque plus de 3 éléments BottomNavigationBar sont fournis, le type, s'il n'est pas spécifié, passe à BottomNavigationBarType.shifting selon https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html. Cette information doit être mise en évidence dans la doc de la classe. Il est facile de négliger où il se trouve (je l'ai négligé).

Lorsque le type de BottomNavigationBar est BottomNavigationBarType.shifting , le texte et les icônes des éléments sont rendus en blanc, via DefaultTextStyle et IconTheme. On suppose que leur BottomNavigationBarItem.backgroundColor sera spécifié comme une couleur contrastante. C'est évidemment déroutant.

L'idée générale avec les barres de navigation inférieures de type shifting est que chaque élément aura une couleur d'arrière-plan différente (qui contraste avec le blanc), puisque cette couleur deviendra la couleur de toute la barre de navigation, lorsque l'élément sera sélectionné.

La documentation pour BottomNavigationBar et NavigationBarItem doit être améliorée.

HansMuller le 9 mars 2018

👍103 ❤25 🎉10

@HansMuller Merci, cela a fonctionné !

wiltwitt le 10 mars 2018

@HansMuller , félicitations !

tygryk le 19 avr. 2018

Si vous n'avez pas compris comment y remédier :

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,

eshinkawa le 10 août 2018

👍184 ❤44 🎉34 🚀20

Suis-je le seul à penser qu'il ne devrait pas changer automatiquement de comportement en fonction du nombre d'onglets ?
Il ne me semble pas intuitif de s'attendre à un comportement différent.

ThinkDigitalSoftware le 11 août 2018

👍43 ❤2

merci 👍

bachtiaryayan le 8 sept. 2018

Merci.

creative-junk le 19 sept. 2018

Que dois-je faire si je ne veux pas que les icônes soient blanches, mais qu'elles aient le comportement de se déplacer?

dmorawetz le 25 sept. 2018

Pourquoi ne pas simplement définir le type par défaut .fixed ?

mliitfall le 25 oct. 2018

👍4

Je sais que ce problème a été fermé, mais cela ressemble toujours à un bogue même si la documentation a été bien mise à jour.
Je suggérerais de corriger la valeur par défaut ou de corriger le comportement de BottomNavigationBarType.shifting avec quatre éléments.

JPM84 le 2 mars 2019

👍20

J'ai fourni l'agrment " backgroundColor" pour chaque "BottomNavigationBarItem" et le problème est résolu.

nikhilmeria le 10 janv. 2020

👍3

J'ai réussi à résoudre le problème en entrant la propriété showUnselectedLabels: true, dans la BottomNavigationBar

return new BottomNavigationBar(

  showUnselectedLabels: true,

  items: <BottomNavigationBarItem>[...

SilvaEngComp le 13 févr. 2020

qu'est-ce que nous ne voulons pas que le comportement change si nous avons plus de trois éléments. Y a-t-il un travail autour pour cela?

Mahn00rMalik le 28 avr. 2020

ajouter showUnselec tedLabels:true à BottomNavigationBar
ajouter backgroundColor: Colors.blue à BottomNavigationBarItem
Puis tout montré

SharkLib le 1 mai 2020

👍1

Suis-je le seul à penser que je ne devrais pas modifier automatiquement le comportement en fonction du nombre d'onglets ?
Il ne me semble pas intuitif de s'attendre à un comportement différent.

je pense la même chose