无法在颤动中保存TabBar标签位置的状态

Question

我正在尝试同时使用 TabBar 和底部导航栏。使用底部导航栏切换到其他页面时，可以保存 tabview 的状态。当我切换回去时，所选标签和网页浏览的位置不匹配。

可能有什么问题吗？请为我提供一起使用标签栏和底部导航栏的示例代码。

Answer 1

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));
}

class TabbedPage extends StatefulWidget {
  TabbedPage({Key key, this.pageIndex, this.tabCount}) : super(key: key);
  final int pageIndex;
  final int tabCount;

  _TabbedPageState createState() => new _TabbedPageState();
}

class _TabbedPageState extends State<TabbedPage> with TickerProviderStateMixin {
  TabController _tabController;

  int _getInitialIndex() {
    int initialIndex = PageStorage.of(context).readState(
          context,
          identifier: widget.pageIndex,
        ) ??
        0;
    print("Initial Index ${initialIndex}");
    return initialIndex;
  }

  @override
  void initState() {
    _tabController = new TabController(
      length: widget.tabCount,
      vsync: this,
      initialIndex: _getInitialIndex(),
    );
    _tabController.addListener(() {
      print("New Index ${_tabController.index}");
      PageStorage.of(context).writeState(
        context,
        _tabController.index,
        identifier: widget.pageIndex,
      );
    });
    super.initState();
  }

  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new Container(
          color: Theme.of(context).primaryColor,
          child: new TabBar(
            controller: _tabController,
            isScrollable: true,
            tabs: new List<Tab>.generate(widget.tabCount, (int tabIndex) {
              var name = 'Tab ${widget.pageIndex}-${tabIndex}';
              return new Tab(text: name);
            }),
          ),
        ),
        new Expanded(
          child: new TabBarView(
            controller: _tabController,
            children:
                new List<Widget>.generate(widget.tabCount, (int tabIndex) {
              return new ListView.builder(
                  key: new PageStorageKey<String>(
                      'TabBarView:${widget.pageIndex}:$tabIndex'),
                  itemCount: 20,
                  itemExtent: 60.0,
                  itemBuilder: (BuildContext context, int index) => new Text(
                      'View ${widget.pageIndex}-${tabIndex}-${index}'));
            }),
          ),
        ),
      ],
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => new _MyHomePageState();
}

const List<int> tabCounts = const <int>[5, 8];

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  PageController _controller = new PageController();
  int currentIndex = 0;

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body: new PageView(
        controller: _controller,
        children: new List<Widget>.generate(tabCounts.length, (int index) {
          return new TabbedPage(
            pageIndex: index,
            tabCount: tabCounts[index],
          );
        }),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            currentIndex = index;
            _controller.jumpToPage(index);
          });
        },
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text("Settings"),
          ),
        ],
      ),
    );
  }
}

引用：https://github.com/flutter/flutter/issues/20341

Answer 2

设置initialIndex，使用一个变量来更新您的初始和最后选择的标签位置，当您更改任何标签时，该变量必须使用新值进行更新。

int lastTabPosition=0;

DefaultTabController(
      length: 3,
      initialIndex: lastTabPosition,
      child:  Scaffold(
        appBar:  AppBar(
          title:  Text("Tabs"),
          bottom:  TabBar(
            tabs: <Widget>[
               Tab(text: 'One'),
               Tab(text: 'Two'),
               Tab(text: 'Three'),
            ],
          ),
        ),
        body:  TabBarView(
          children: <Widget>[

          ],
        ),
      ),
    );