无法在颤动中保存 TabBar 选项卡位置的状态答案

【问题标题】：Not able to save state of TabBar tab position in flutter无法在颤动中保存 TabBar 选项卡位置的状态
【发布时间】：2019-01-27 19:22:16
【问题描述】：

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

可能有什么问题？请帮助我提供同时使用标签栏和底部导航栏的示例代码。

【问题讨论】：

标签： android dart flutter

【解决方案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

【讨论】：

【解决方案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>[

          ],
        ),
      ),
    );

【讨论】：