如何使用 Flutter GetX 构建 TabView

https://stackoverflow.com/questions/63924491/how-to-build-a-tabview-using-flutter-getx

 

有一个 Get 版本的 SingleTickerProviderMixin，它实现了 TickerProvider 接口（使用来自 Flutter SDK 的相同 Ticker 类）。

它有一个好听的名字： GetSingleTickerProviderStateMixin

（20 年 21 月 12 日更新：SingleGetTickerProviderMixin已弃用 latest GetX。感谢评论者指出这一点。）

下面的示例基本上来自TabController 的 Flutter 文档。

从链接示例的 StatefulWidget 中，我将其内容移植到 GetxController ( MyTabController) 并添加了以下内容的 mixin SingleGetTickerProviderMixin：

class MyTabController extends GetxController with GetSingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'LEFT'),
    Tab(text: 'RIGHT'),
  ];

  TabController controller;

  @override
  void onInit() {
    super.onInit();
    controller = TabController(vsync: this, length: myTabs.length);
  }

  @override
  void onClose() {
    controller.dispose();
    super.onClose();
  }
}

 

要MyTabController在无状态小部件中使用：

class MyTabbedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final MyTabController _tabx = Get.put(MyTabController());
    // ↑ init tab controller
    
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabx.controller,
          tabs: _tabx.myTabs,
        ),
      ),
      body: TabBarView(
        controller: _tabx.controller,
        children: _tabx.myTabs.map((Tab tab) {
          final String label = tab.text.toLowerCase();
          return Center(
            child: Text(
              'This is the $label tab',
              style: const TextStyle(fontSize: 36),
            ),
          );
        }).toList(),
      ),
    );
  }
}

 

另一种解决方法是DefaultTabController, 前提是如果你不想控制TabBar和TabView小部件的状态.

class MyDemo extends StatelessWidget {
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'LEFT'),
    Tab(text: 'RIGHT'),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: myTabs.length,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: myTabs,
          ),
        ),
        body: TabBarView(
          children: myTabs.map((Tab tab) {
            final String label = tab.text.toLowerCase();
            return Center(
              child: Text(
                'This is the $label tab',
                style: const TextStyle(fontSize: 36),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}