• 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,细思极恐,如果这样操作的话,就简单问题复杂化了。

  • 相关阅读:
    xss过waf的小姿势
    【开发心得】ftp下载文件,文件不存在的原因解析
    LeetCode 1413.逐步求和得到正数的最小值
    一款释放数据价值的项目,开源了!
    Spark SQL 概述
    树莓派计划上市,估值或超5亿美元;Linus谈桌面Linux糟糕的原因;Julia 1.7发布 | 开源日报
    2021CCPC 哈尔滨(B D E I J)
    如何利用大数据构建用户画像?
    QT 事件与信号区别
    JavaScript对表单的一些常用操作(表单验证)
  • 原文地址:https://blog.csdn.net/csj731742019/article/details/126294594