Flutter 和 Getx 状态管理 - 列表视图更改

Question

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

如果我单击“新订单”容器，其他容器（“订单已确认”、“已完成”）也会重建（整个列表视图重建）。

我的型号：

import 'package:get/get.dart';

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

  TabModel(this.tabName);
}

我的控制器：

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

这是我第一次在这里回答，所以我希望它符合标准，对于您的问题也还不算太晚。对于您的第一个问题：希望在选项卡中导航后不重建每个选项卡。您可以将选项卡小部件转换为有状态小部件并添加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;
}

对于第二个问题，要重新加载项目而不是整个列表，您可以将每个项目包装在 or 中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);
          }
     )
);