• Getx在Controller里添加TabController的处理


    因为SingleTickerProviderStateMixin都是限制在State上使用的。这个可以看下源码:

     而TabController实例化里面有个参数vsync 是需要在StatefulWidget的state上with SingleTickerProviderStateMixin才能获取符合vsync实例。因此提出两个问题:

    一、请问下用了getx的话要怎么使用tabController之类的需要withSingleTickerProviderStateMixin的View呢? 

       答:如果不考虑tabView监听的话,可以用DefaultTabController。

    二、假如我又需要自己控制TabController呢,DefaultTabController不能监听到tab的点击处理事件,咋办?

      答:用getx的controller里添加GetSingleTickerProviderStateMixin 

    正好因为项目中遇到这个问题,网上搜了下,不少同学也遇到了。比如

    小呆呆666的文章《Flutter GetX使用---简洁的魅力》有同学就提出此疑问,

     另外我在stackoverflow上也看到老外也有位同学碰到这个问题,

    How to build a TabView using Flutter GetX

       其实处理方式也很简单,getx提供了GetSingleTickerProviderStateMixin去处理tabBarView的tab点击监听事件的。在自定义Controller的时候继承GetxController,同时with GetSingleTickerProviderStateMixin就能达到需求。例如:

    1. import 'package:flutter/material.dart';
    2. import 'package:get/get.dart';
    3. class MyTabController extends GetxController
    4. with GetSingleTickerProviderStateMixin {
    5. final List myTabs = [
    6. Tab(text: '第一个tab'),
    7. Tab(text: '第二个tab'),
    8. ];
    9. TabController? tabController;
    10. @override
    11. void onInit() {
    12. super.onInit();
    13. tabController = TabController(vsync: this, length: myTabs.length);
    14. tabController?.addListener(() {
    15. ///避免addListener调用2次
    16. if (tabController?.index == tabController?.animation?.value) {
    17. print("点击了下标为${tabController?.index}的tab");
    18. }
    19. });
    20. }
    21. @override
    22. void onClose() {
    23. tabController?.dispose();
    24. super.onClose();
    25. }
    26. }

    其实处理方法和在StatefulWidget里的state里一样,无非一个是在widget里,一个在Controller里。可以对比下:

    class _MyHomePageState extends State with TickerProviderStateMixin{}

    最后就是在widget,也就是view层调用就行了:

    1. import 'package:flutter/cupertino.dart';
    2. import 'package:flutter/material.dart';
    3. import 'package:flutter_test_demo/MyTabController.dart';
    4. import 'package:get/get.dart';
    5. ///author:331209
    6. ///Time:2022/8/8
    7. ///description:
    8. class MyTabView extends StatelessWidget {
    9. MyTabController controller = Get.put(MyTabController());
    10. @override
    11. Widget build(BuildContext context) {
    12. return Scaffold(
    13. appBar: AppBar(
    14. title: Text("tabview"),
    15. bottom: TabBar(
    16. controller: controller.tabController,
    17. tabs: controller.myTabs,
    18. ),
    19. ),
    20. body: TabBarView(
    21. controller: controller.tabController,
    22. children: controller.myTabs.map((Tab tab) {
    23. final String label = tab.text!.toLowerCase();
    24. return Center(
    25. child: Text(
    26. ' $label ',
    27. style: const TextStyle(fontSize: 36),
    28. ),
    29. );
    30. }).toList(),
    31. ));
    32. }
    33. }

    其实就是getx官网没给出具体的方案说明而已或者一般比较难找到此实现方案,导致很多同学想着在外层包层StatefulWidget来处理TabController,细思极恐,如果这样操作的话,就简单问题复杂化了。

  • 相关阅读:
    【计算思维题】少儿编程 蓝桥杯青少组计算思维 数学逻辑思维真题详细解析第8套
    centos7下部署oracle 11g
    从这几个关键功能,带您认真了解低代码的世界~
    vxe-table表格事件汇总
    正则表达式简介
    C语言习题~day32
    南大通用GBase8s 常用SQL语句(280)
    一本通1053;最大数输出
    【Nginx】基本使用及配置-项目部署
    如何使用PHP进行数据库连接和操作?
  • 原文地址:https://blog.csdn.net/csj731742019/article/details/126294594