La raison pour laquelle j'ai utilisé Flutter pour ce projet était d'obtenir à la fois Android et iPhone dans une base de code. L'application Android a l'air bien avec la barre de navigation inférieure qui atteint la page d'accueil à l'écran.
La version iPhone se heurte cependant à la barre coulissante sur les modèles d'iphone X.
Y a-t-il un moyen de résoudre ce problème? Je prendrais le temps de pouvoir l'ajuster, mais je ne veux pas d'ombre portée, je veux juste une couleur unie.
J'ai utilisé un SafeArea, et pendant qu'il l'a corrigé. cela a également fait monter la barre et paraître bizarre.
bottomNavigationBar: SafeArea(
child: bmnav.BottomNav(
elevation: 9.0,
index: _currentTab,
iconStyle: bmnav.IconStyle(
color: Colors.grey, onSelectColor: Colors.lightGreen),
labelStyle: bmnav.LabelStyle(
onSelectTextStyle: TextStyle(color: Colors.lightGreen)),
onTap: (int index) {
setState(() {
_currentTab = index;
});
},
items: [
bmnav.BottomNavItem(Customicons.main, label: "Home"),
bmnav.BottomNavItem(Customicons.bible, label: "Bible"),
bmnav.BottomNavItem(Customicons.sermons, label: "Sermons"),
bmnav.BottomNavItem(FontAwesomeIcons.pray, label: "Prayer"),
bmnav.BottomNavItem(Icons.more_horiz, label: "More"),
]),
),
Voici à quoi cela ressemble avec et sans la zone de sécurité. Mais ce que je recherche, c'est un look vendu, essentiellement comme une grande barre de navigation inférieure.
4 Réponses :
return SafeArea( bottom: true, child: bmnav.BottomNav(), )
Faire cela mène à ma première image. Je recherche ce résultat, mais ne ressemble pas à une carte
Il est vraiment difficile de vous aider sans exemples détaillés de ce dont vous avez besoin, car vous avez dit que vous utilisiez une barre de navigation inférieure personnalisée.
Je voudrais qu'il s'étende comme la barre de navigation inférieure normale. où il ressemble à une barre solide. Le problème que je rencontrais avec la barre de navigation inférieure normale est que je voulais personnaliser les couleurs et que je ne voulais pas que les éléments grandissent lorsqu'ils sont sélectionnés. C'est pourquoi je suis allé avec celui-ci.
return Container( color:Colors.white, child:SafeArea( bottom: true, child: bmnav.BottomNav(), ), )
J'espère que cela vous donnera le résultat attendu. Vous pouvez utiliser ce code pour éviter la sensation de carte.
MODIFIÉ:
SafeArea(
bottom: true,
child: bmnav.BottomNavItem(Customicons.main, label: "Home"), // Ur view at bottom
),
Ou
Align(child: SafeArea(
bottom: true,
child: bmnav.BottomNavItem(Customicons.main, label: "Home"), // Ur view at bottom
),
),
J'ai testé dans mon application et cela fonctionne comme prévu. Puis-je connaître la raison du vote défavorable, plz.
D'après mon expérience, SafeArea réduit la flexibilité de mise en page. Je préfère utiliser le menu inférieur de différentes hauteurs:
Vous pouvez facilement le faire avec le package https://pub.dev/packages/iphone_has_notch Il est léger et ne nécessite aucune ressource supplémentaire.
Le code pourrait donc être aussi simple que:
height: IphoneHasNotch.hasNotch ? 88 : 68,
Veuillez corriger vos images ci-jointes.
peut-être voulez-vous montrer ce qu'est bmnav.BottomNav?
bmnav.bottomNav est le plugin que j'utilise qui rend la barre de navigation inférieure bien meilleure que celle prête à l'emploi et un peu plus de personnalisation.
alors pourquoi ne demandez-vous pas à l'auteur de ce plugin? évidemment, ce plugin n'améliore pas beaucoup la barre de navigation comme vous pouvez le voir