Question

问题：

我正在尝试实现嵌套的TabBarView，并成功做到了。但是，我不太确定这是编写Flutter代码的“干净”方法。

如果我将所有小部件都放在一个状态类中，那么一切都会很好。为了更加模块化，我将内部TabBarView与外部TabBarView分开。但是，我发现innerTabController必须驻留在外部TabBarView类中，以便内部TabBarView正确恢复其先前的索引。

我认为这是不好的代码，因为我的外部TabBarView将需要关注内部的TabBarView详细信息（长度，initialIndex，...）

class _TestAppState extends State<TestApp>
    with TickerProviderStateMixin {

  TabController _tabController;
  TabController _innerTabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: 2,
      vsync: this
    );
    _tabController.addListener(handleTabChange);
    _innerTabController = TabController(
      length: 2,
      vsync: this
    );
  }

问题：

我应该如何构造代码以使其更简洁/可维护/模块化？还是应该使用其他方法来保留内部TabView的索引？

代码：

https://gist.github.com/HengJunXi/ae99777df6fc5f902805628b3e270ab4

Answer 1

我认为我已经找到了一种更好的方法，通过使用ValueKey和PageStorageBucket readState（）和writeState（）方法来完成此嵌套的标签栏视图。

  final _tabKey = ValueKey('tab');

  TabController _innerTabController;

  void handleTabChange() {
    print('Inner tab, previous: ${_innerTabController.previousIndex}, current: ${_innerTabController.index}');
    PageStorage.of(context).writeState(context, _innerTabController.index, identifier: _tabKey);
  }

  @override
  void initState() {
    super.initState();
    print('init');
    int initialIndex = PageStorage.of(context).readState(context, identifier: _tabKey);
    _innerTabController = TabController(
      length: 2,
      vsync: this,
      initialIndex: initialIndex != null ? initialIndex : 0
    );
    _innerTabController.addListener(handleTabChange);
  }

所有这些代码将保留在内部选项卡视图类中，因此外部选项卡视图类将不再需要关注内部代码。

完整代码在这里： https://gist.github.com/HengJunXi/b23994fbcb22f0a832dc5c6a50434725

如何正确/正确地实现嵌套的TabBarView？

问题：

问题：

代码：

1 个答案: