点击 Tab bar 过滤列表 Flutter

Question

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

标签栏

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));
            },
          )),

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

Answer 1

要刷新你需要使用setState。

productList = tempProducts 应该是：

setState(()=>productList = tempProducts);

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