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

  • 相关阅读:
    尚硅谷 Spring5
    win11启动docker报错
    x.509
    10分钟带你学习华为云数据库RDS
    Mybatisplus条件构造器
    自动化运维管理平台——spug的搭建和日常使用
    HTML5网页设计制作基础大二dreamweaver作业、使用HTML+CSS技术制作博客网站(5个页面)
    ego-planner论文阅读笔记
    get/post请求使用工具(apifox/postman/浏览器)能请求通但是java代码不行的问题解决
    明势资本黄明明:创新与世界,下一代基础软件的中国突围之路
  • 原文地址:https://blog.csdn.net/csj731742019/article/details/126294594