Flutter BottomNavigationBar切换页面被重置问题(保存状态)
方案:1.BottomNavigationBar+PageView
class MainPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return MainPageState();
}
}
class MainPageState extends State<MainPage> {
int _currentIndex;
List<Widget> _pages;
PageController _controller;
List<BottomNavigationBarItem> getItems() {
return [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
BottomNavigationBarItem(icon: Icon(Icons.adb), title: Text("Adb")),
BottomNavigationBarItem(icon: Icon(Icons.person), title: Text("Person")),
];
}
@override
void initState() {
super.initState();
_currentIndex = 0;
_pages = List()..add(Page1("第一页"))..add(Page2("第二页"))..add(Page3("第三页"));
_controller = PageController(initialPage: 0);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
physics: NeverScrollableScrollPhysics(),
controller: _controller,
itemCount: _pages.length,
itemBuilder: (context, index) {
return _pages[index];
},
onPageChanged: _pageChange,
),
bottomNavigationBar: BottomNavigationBar(
items: getItems(),
currentIndex: _currentIndex,
onTap: onTap,
),
);
}
void onTap(int index) {
_controller.jumpToPage(index);
}
void _pageChange(int index) {
if (index != _currentIndex) {
setState(() {
_currentIndex = index;
});
}
}
}
方案:2.BottomNavigationBar+IndexedStack
class MainPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return MainPageState();
}
}
class MainPageState extends State<MainPage> {
int _currentIndex;
List<Widget> _pages;
List<BottomNavigationBarItem> getItems() {
return [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
BottomNavigationBarItem(icon: Icon(Icons.adb), title: Text("Adb")),
BottomNavigationBarItem(icon: Icon(Icons.person), title: Text("Person")),
];
}
@override
void initState() {
super.initState();
_currentIndex = 0;
_pages = List()..add(Page1("第一页"))..add(Page2("第二页"))..add(Page3("第三页"));
}
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
items: getItems(),
onTap: onTabTapped,
),
body: IndexedStack(
index: _currentIndex,
children: _pages,
),
);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}
其他,用到的文件
0.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Demo",
home: MainPage(),
);
}
}
1.Page1 & Page1State
class Page1 extends StatefulWidget {
String _title;
Page1(this._title);
@override
State<StatefulWidget> createState() {
return Page1State();
}
}
class Page1State extends State<Page1> with AutomaticKeepAliveClientMixin {
int _count = 0;
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
super.build(context);
return Scaffold(
appBar: AppBar(
title: Text(widget._title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(widget._title + ":点一下加1:$_count"),
MaterialButton(
child: Text("跳转"),
color: Colors.pinkAccent,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return NewPage();
}));
},
)
],
),
),
floatingActionButton: FloatingActionButton(
heroTag: widget._title,
child: Icon(Icons.add),
onPressed: addAction,
),
);
}
void addAction() {
setState(() {
_count++;
});
}
}
其余的 Page2 & Page2State,Page3 & Page3State 也类似上述代码。
2.NewPage
class NewPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("新的界面"),
),
body: Center(
child: Text("我是一个新的界面"),
),
);
}
}