Flutter 和 Getx 状态管理 - ListView 更改

Question

使用 Flutter 和 Getx 状态管理创建一个购物应用程序。我不知道如何为列表中的每个元素创建一个 Controller 。因此，列表中特定元素的任何更改只会重新加载该元素，而不是整个列表重新加载。

如果我单击“新订单”容器，其他容器(“订单已确认”、“已完成”)也会重建(整个 ListView 重建)。
我的型号:

import 'package:get/get.dart';

class TabModel {
  late String tabName;
  RxBool isSelected = false.obs;

  TabModel(this.tabName);
}

我的 Controller :

import 'package:get/get.dart';
import 'package:super_mart_merchant/view/orders/view_models/tab_model.dart';
import 'package:collection/collection.dart';

class TabViewController extends GetxController{
  RxList<TabModel> tabModels = <TabModel>[].obs;
  @override
  void onInit() {
    super.onInit();
    loadVal('New Order',true);
    loadVal('Order Confirmed',false);
    loadVal('Order Declined',false);
    loadVal('Completed',false);
  }

  void loadVal(String name,bool isSelected){
    TabModel tabModel = TabModel(name);
    tabModel.isSelected.value = isSelected;
    tabModels.add(tabModel);
  }

  void onClick(int pos){
    TabModel tabModel =   tabModels[pos];
    if(!tabModel.isSelected.value){
      TabModel? previousTabModel =  tabModels.firstWhereOrNull((element) => element.isSelected.value);
      if(previousTabModel != null){
        previousTabModel.isSelected.value = false;
      }
      tabModel.isSelected.value = true;

    }

  }
}

捆绑:

import 'package:get/get.dart';
import 'package:super_mart_merchant/view/orders/controllers/tab_controller.dart';

class TabControllerBinding implements Bindings{
  @override
  void dependencies() {
    Get.lazyPut<TabViewController>(() => TabViewController());

  }
}

看法 :

class TabView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return GetX<TabViewController>(
      builder: (TabViewController tabController) {
        print('Object called : ${tabController.toString()}');
        return Container(
          height: 55,
          alignment: Alignment.center,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemBuilder: (ctx, int index) {
              if (tabController.tabModels[index].isSelected.value) {
                return SelectedOrderStatusComponents(
                    tabController.tabModels[index],
                    index);
              }
              return GestureDetector(
                onTap: (){
                  tabController.onClick(index);
                },
                child: UnSelectedOrderStatusComponents(
                    tabController.tabModels[index],
                    index),
              );
            },
            itemCount: tabController.tabModels.length,
          ),
        );
      },
    );
  }
}

在 Provider 中，我们有这方面的选项。我不知道如何在 Getx 中做到这一点。万分感谢!!!。

Answer 1

这是我第一次在这里回答，所以我希望它符合标准，也不要太晚解决您的问题。
对于您的第一个问题:希望在选项卡中导航后防止每个选项卡重建。您可以将 Tab 小部件转换为有状态小部件并添加 AutomaticKeepAliveClientMixin以防止它在导航后重建。像这样的东西:

class TabView extends StatefulWidget {
  TabView ({Key? key}) : super(key: key);

  @override
  _TabViewState createState() => _TabViewState();
}

class _TabViewState extends State<TabView>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container();
  }
  
  @override
  bool get wantKeepAlive => true;
}

对于您的第二个问题，只需重新加载项目而不是整个列表，您可以将每个项目包装在 Obx 中。或 GetBuilder并根据每个项目的索引或 id 给它一个标签，但我不建议这样做，因为 GetX 在重建方面非常快，它只会在更改的地方重建，并且在一个页面中有太多的 GetBuilder 会影响性能。

return GestureDetector(
     onTap: (){
          tabController.onClick(index);
     },
     child: GetBuilder<TabViewController>(
          id: "item" + tabController.tabModels[index].id,
          builder: (controller) {
              return UnSelectedOrderStatusComponents(
                   tabController.tabModels[index],
                   index);
          }
     )
);