私が持っているすべてのビューにBottomNavigationBarを表示しようとしていますが、それは機能していますが、これはそれを行うための「ばかげた」方法です...
すべてのビューに挿入するカスタム BottomNavigationBar があります。
var selectedIndex = 0;
class CustomBottombar extends StatefulWidget {
CustomBottombar({Key key}) : super(key: key);
@override
_CustomBottombarState createState() => _CustomBottombarState();
}
class _CustomBottombarState extends State<CustomBottombar> {
List _viewList = [FirstView(), SecondView()];
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
currentIndex: selectedIndex,
onTap: _onItemTapped,
items: _items,
);
}
void _onItemTapped(int index) {
setState(() {
selectedIndex = index;
Navigator.of(context).popUntil((route) => route.isFirst
);
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => _viewList[index]),
);
});
}
final _items = [
BottomNavigationBarItem(
icon: Icon(
Icons.refresh,
color: Color(0xFFACACAC),
size: 35,
),
title: Text("first")),
BottomNavigationBarItem(
icon: Icon(
Icons.phone,
color: Color(0xFFACACAC),
size: 35,
),
title: Text("second"),
),
BottomNavigationBarItem(
icon: Icon(
Icons.add_shopping_cart,
color: Color(0xFFACACAC),
size: 35,
),
title: Text("thrid"),
),
]; }
_onItemTapped 関数では、「Navigationstack」からすべてをポップしてから、アイテムにある画面を表示しています。
私の FirstView() には、このコードがあります
class FirstView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: CustomAppBar(""),
bottomNavigationBar: CustomBottombar(),
endDrawer: CustomDrawer(),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ContactView()),
);
},
child: Text('First'),
),
),
);
}
}
BottomNavigationBar の項目ではない「ContactView」に移動したい
class ContactState extends State<ContactView> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: CustomAppBar("title"),
endDrawer: CustomDrawer(),
bottomNavigationBar: CustomBottombar(),
body: SafeArea(
bottom: true,
child: SingleChildScrollView(
child: Container(child: Text("Contact"),),
)),
);
}
}
また、アイテム配列にない他の多くのビューがありますが、BottomNavigationBar を表示したいと考えています。私の問題は本当にこの機能です。
void _onItemTapped(int index) {
setState(() {
selectedIndex = index;
Navigator.of(context).popUntil((route) => route.isFirst
);
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => _viewList[index]),
);
});
}
ここでは、アイテム配列にあるビューを表示するためにナビゲーション履歴を削除しているためです。これを行う標準的な方法はありますか、うまくいけば、誰かが助けてくれます。
編集: 明確にするために:私は10個のスクリーンを持っています。BottomNavigationBar を介してナビゲートできるのはそのうちの 3 つだけです。10 個のうち最初の 3 個としましょう。今、Screen1 から Screen4 に移動したいと考えています。screen4 でナビゲーションバーが消えます。すべての画面でナビゲーションバーを維持したい。
編集 2
@Dhaval Kansaraの回答はうまくいきましたが、新しい問題が発生しました。修正前は BottomNavigationBar の上にあり、BottomNavigationBar が上になりました。
しかし、私はこのようにしたい