点击 Tab bar 过滤列表 Flutter

Posted 2023-02-23

【中文标题】点击 Tab bar 过滤列表 Flutter

【英文标题】：Tapping Tab bar to filter list Flutter

【发布时间】：2020-03-15 16:21:49

【问题描述】：

我正在尝试从数组中过滤项目并从中创建一个新项目。当用户点击其中一个选项卡时，列表将产品分类到其类别（即：选择晚餐选项卡时，将显示所有标记为“晚餐”类别的产品）从那里组织成子类别（鸡肉、牛肉、牛尾）。我不确定我在哪里出错了。这是我目前所拥有的：

标签栏

TabBar(
                    onTap: _changedDropDownItem,
                    indicatorColor: buddiesGreen,
                    labelColor: buddiesPurple,
                    unselectedLabelColor: Colors.grey,
                    // isScrollable: true,
                    tabs: [
                      Tab(icon: Icon(FontAwesomeIcons.medkit), text: "Dinner"),
                      Tab(icon: Icon(FontAwesomeIcons.heart), text: "Desserts"),
                      Tab(icon: Icon(Icons.info), text: "Taste"),
                      Tab(
                        icon: Icon(FontAwesomeIcons.home),
                        text: "More",
                      ),
                    ],
                  ),

然后我使用这些方法从标签栏获取类别：

 void _tabBarItemsTapped(int newValue) 
    setState(() 
      _selectedCustomerType = newValue;
    );
    _tabBarFilterSwitch(newValue);
    print(_selectedCustomerType);
  


  void _tabBarFilterSwitch(filterNumb) 
    if (filterNumb == 0) 
      _dropdownList = _usage;
     else if (filterNumb == 1) 
      _dropdownList = _productType;
     else if (filterNumb == 2) 
      _dropdownList = _productType;
     else if (filterNumb == 3) 
      _dropdownList = _productType;
    
    print(_dropdownList);
  

这是我正在下拉的数据模型：

    "resId":123,
 “image”: “    'assets/ChocolateCake.jpg',
“productType”: “Dinner”
“type”: “main”
   “sizes” : 
   [
       “size”:1,
        “price”:$2.99,
       “size”:3,
        "quantity”: $4.99
  ]

我正在尝试点击会触发 switch case 的选项卡。此切换追逐将更新列表：

void _filterProductList(int value, productList, filter) 
    List tempProducts = [];

    switch (value) 
      case 0:
          for (int i = 0; i < productList.length; i++) 
        tempProducts.add(productList[i].category.contains(filter[i]));
            // tempProducts = productList
            // tempProducts.
            productList =[];
            productList = tempProducts;
            print(tempProducts[i].name);

          
        break;
      case 1:
            for (int i = 0; i < productList.length; i++) 
        tempProducts.add(productList[i].category.contains(filter[i]));
            // tempProducts = productList
            // tempProducts.
            productList =[];
            productList = tempProducts;
            print(tempProducts[i].name);
          
        break;
      case 2:
            for (int i = 0; i < productList.length; i++) 
        tempProducts.add(productList[i].category.contains(filter[i]));
            // tempProducts = productList
            // tempProducts.
            productList =[];
            productList = tempProducts;
            print(tempProducts[i].name);
          
        break;
      case 3:
            for (int i = 0; i < productList.length; i++) 
        tempProducts.add(productList[i].category.contains(filter[i]));
            // tempProducts = productList
            // tempProducts.
            productList =[];
            productList = tempProducts;
            print(tempProducts[i].name);
          
        break;
    
    return;

  

并呈现如下：

Container(
              child: ListView.builder(
            scrollDirection: Axis.vertical,
            itemCount: _prodType.length,
            shrinkWrap: true,
            itemBuilder: (context, ii) 
              _filterProductList(filterNumb, productList, _dropdownList);
              return Container(child: _buildProduct(context, ii));
            ,
          )),

不是每次点击都更新列表，而是似乎什么都没有发生。

【参考方案1】：

要刷新你需要使用setState。

productList = tempProducts 应该是：

setState(()=>productList = tempProducts);

此外，小部件应该是 stateful 小部件。

【讨论】：

它也是关于过滤列表以匹配类别