Began to try to use the flutter development, flutter version 1.0, write similar WeChat TAB at the bottom of the switch interface found old reset interface, online to find a circle said keep state need child pages mixin AutomaticKeepAliveClientMixin, then rewrite

 @override
  bool get wantKeepAlive => true; 
Copy the code

Need to cooperate with other components, but is not literally a mixin is useful, try several written summary BottomNavigationBar + List + AutomaticKeepAliveClientMixin is useless

  1. BottomNavigationBar+List = BottomNavigationBar+List
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: "demo",
        home: MainPage(),
      );
}

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MainPageState();
}

class MainPageState extends State<MainPage> {
  int _currentIndex;
  List<Widget> _pages;

  @override
  void initState() {
    super.initState();
    _currentIndex = 0;
    _pages = List().. add(FirstPage("Page one")).. add(SecondPage("Page two")).. add(ThirdPage("Page three"));
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: _pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          items: getItems(),
          currentIndex: _currentIndex,
          onTap: onTap,
        ),
      );

  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"))]; }void onTap(intindex) { setState(() { _currentIndex = index; }); }}Copy the code

Sub-page code, the same as the three interfaces:

class FirstPage extends StatefulWidget {
  String _title;

  FirstPage(this._title);

  @override
  State<StatefulWidget> createState() => FirstPageState();
}

class FirstPageState extends State<FirstPage> with AutomaticKeepAliveClientMixin{
  int _count = 0;

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget._title),
      ),
      body: Center(
        child: Text(widget._title + ": click add 1: $_count"),
      ),
      floatingActionButton: FloatingActionButton(
          heroTag: widget._title, child: Icon(Icons.add), onPressed: add),
    );
  }

  voidadd() { setState(() { _count++; }); }}Copy the code

#### results The hold page cannot be implemented

2. The second BottomNavigationBar+PageView is similar to the ViewPager of Android. Add a button and click to jump to a new interface

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: "demo",
        home: MainPage(),
      );
}

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MainPageState();
}

class MainPageState extends State<MainPage> {
  int _currentIndex;
  List<Widget> _pages;
  PageController _controller;

  @override
  void initState() {
    super.initState();
    _currentIndex = 0;
    _pages = List() ..add(FirstPage("Page one"))  ..add(SecondPage("Page two")) ..add(ThirdPage("Page three"));
    _controller = PageController(initialPage: 0);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: PageView.builder(
            physics: NeverScrollableScrollPhysics(),//viewPage disables swiping left and right
            onPageChanged: _pageChange,
            controller: _controller,
            itemCount: _pages.length,
            itemBuilder: (context, index) => _pages[index]),
        bottomNavigationBar: BottomNavigationBar(
          items: getItems(),
          currentIndex: _currentIndex,
          onTap: onTap,
        ),
      );

  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"))]; }void onTap(int index) {
    _controller.jumpToPage(index);
  }

  void _pageChange(int index) {
     if(index ! = _currentIndex) { setState(() { _currentIndex = index; }); }}}Copy the code

The child interface:

class FirstPage extends StatefulWidget {
  String _title;

  FirstPage(this._title);

  @override
  State<StatefulWidget> createState() => FirstPageState();
}

class FirstPageState extends State<FirstPage>
    with AutomaticKeepAliveClientMixin {
  int _count = 0;

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget._title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(widget._title + ": click add 1: $_count"),
            MaterialButton(
                child: Text("Jump"),
                color: Colors.pink,
                onPressed: () => Navigator.push(context,
                    MaterialPageRoute(builder: (context) => NewPage())))
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
          heroTag: widget._title, child: Icon(Icons.add), onPressed: add),
    );
  }

  voidadd() { setState(() { _count++; }); }}Copy the code

One interface to jump to:

class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text("New interface"),
        ),
        body: Center(
          child: Text("I am a new interface"),),); }Copy the code

This happens when the Widget build(BuildContext Context) method is called when overwriting the Widget build(BuildContext Context).

@override
  Widget build(BuildContext context) {
    //在这边加上super.build(context);
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget._title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(widget._title + ": click add 1: $_count"),
            MaterialButton(
                child: Text("Jump"),
                color: Colors.pink,
                onPressed: () => Navigator.push(context,
                    MaterialPageRoute(builder: (context) => NewPage())))
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
          heroTag: widget._title, child: Icon(Icons.add), onPressed: add),
    );
  }
Copy the code

BottomNavigationBar+IndexedStack() is the BottomNavigationBar+IndexedStack()

  • After long-term testing, the BottomNavigationBar+TabBarView solution will not work, and other problems will be encountered later. At present, viewPage and IndexedStack are best used.

Finally, if you use FloatingActionButton for multiple pages, you must set heroTag to jump to a new interface, otherwise the jump will display a black screen