Je change mon BottomNavigatorBar en CupertinoTabBar et il ne compresse pas le Tab actuel,
en d'autres termes je ne serais pas capable d'afficher certaines informations qui se trouvent dans la partie inférieure de cet onglet actuel car CupertinoTabBar le bloque.
Je ne sais pas que c'est un comportement par défaut pour Cupertino style mais je dois le résoudre. J'essaie d'encapsuler mes pages avec CupertinoTabView et / ou CupertinoPageScaffold , les deux ne fonctionnent pas.
Avez-vous des conseils?
voici mon code associé:
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(currentIndex: 2, items: [
BottomNavigationBarItem(
icon: Icon(Icons.explore), title: Text('Explore')),
BottomNavigationBarItem(
icon: Icon(Icons.card_travel), title: Text('Adventure')),
BottomNavigationBarItem(
icon: Icon(Icons.search), title: Text('Search')),
BottomNavigationBarItem(
icon: Icon(Icons.map), title: Text('Create Tour')),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile')),
]),
tabBuilder: (context, index) {
switch (index) {
case 0:
return CupertinoTabView(
builder: (context) => ExplorePage(),
);
break;
case 1:
return AdventurePage();
break;
case 2:
return CupertinoTabView(
builder: (context) => SearchTourPage(),
);
break;
case 3:
return BasicRouteInfoForm();
break;
case 4:
return ProfilePage();
break;
default:
return SearchTourPage();
}
},
);
4 Réponses :
Essayez d'augmenter la hauteur de votre contenu ou ajoutez SizedBox sous votre contenu.
Je pensais pouvoir le résoudre comme ça mais ce n'est pas une bonne solution pour ce problème, je dois le faire pour chaque page.
Peut-être un bogue, mais, ajoutez simplement une valeur à la couleur de fond de CupertinoTabBar:
tabBar: CupertinoTabBar ( backgroundColor: Theme.of (contexte) .backgroundColor
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
main()=>runApp(MyApp());
class MyApp extends StatefulWidget {
MyApp({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyApp> {
int currentTabIndex = 0;
onTapped(int index) {
setState(() {
currentTabIndex = index;
});
}
List<Widget> tabs = [
FirstPage(),
SecondPage(),
ThirdPage(),
FourthPage(),
FifthPage(),
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: CupertinoTabScaffold(
tabBar: CupertinoTabBar(items: [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home), title: Text("Home")),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.search), title: Text("Search")),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.person), title: Text("User Info")),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.add), title: Text("sample Info")),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.add_circled), title: Text("sample2 Info"))
]),
tabBuilder: (context, index) {
switch (index) {
case 0:
return FirstPage();
break;
case 1:
return SecondPage();
break;
case 2:
return ThirdPage();
break;
case 3:
return FourthPage();
break;
case 4:
return FifthPage();
break;
default:
return FirstPage();
break;
}
}),
),
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
);
}
}
class ThirdPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
);
}
}
class FourthPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
);
}
}
class FifthPage extends StatefulWidget {
@override
_FifthPageState createState() => _FifthPageState();
}
class _FifthPageState extends State<FifthPage> {
@override
Widget build(BuildContext context) {
return Container(
);
}
}
check out this example maybe this can help
Il suffit de fournir backgroundColor qui n'est pas translucide, c'est-à-dire a une opacité de 1.0 (l'opacité est inférieure à 1.0 par défaut):
/// Indicates whether the tab bar is fully opaque or can have contents behind
/// it show through it.
bool opaque(BuildContext context) {
final Color backgroundColor =
this.backgroundColor ?? CupertinoTheme.of(context).barBackgroundColor;
return CupertinoDynamicColor.resolve(backgroundColor, context).alpha == 0xFF;
}
Il implémente la même logique que le CupertinoNavigationBar :
S'il est translucide, le contenu principal peut glisser derrière lui. Sinon, le La marge supérieure du contenu principal sera décalée de sa hauteur.
La documentation n'est pas très claire à ce sujet , probablement parce que c'est la logique commune pour les widgets de navigation de Cupertino ( CupertinoTabBar et CupertinoNavigationBar au moins) et est considérée comme intuitive.
Ressemble à du contenu principal et de la barre d'onglets:
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
backgroundColor: CupertinoTheme.of(context).barBackgroundColor.withOpacity(1.0),
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
// ...