Flutter点击分类时修改选中样式并刷新商品ListView问题求解

• 分类选中状态存储位置错误：当前isActive是makeCategory组件的入参局部变量，setState修改局部变量不会同步到全局状态，每次页面重绘时会被你写死的i.toDouble() == 0 ? true : false逻辑覆盖，选中样式自然不生效。
• 商品列表刷新逻辑错误：
  1. 点击分类时修改的productsData会被商品FutureBuilder重绘时执行的productsData = Provider.of<Products>(context)逻辑覆盖，修改无效
  2. 商品FutureBuilder绑定的是固定的_productScreenFuture，只会在页面初始化时执行一次，分类切换后不会自动触发重新加载/筛选

1. 新增全局状态变量
   在当前页面的State类顶部新增两个状态，用来存储选中分类和筛选后的商品数据：

// 存储当前选中的分类标题
String? selectedCategoryTitle;
// 存储筛选后的商品列表，把Product替换成你实际的商品数据类名
List<Product> filteredProducts = [];

2. 初始化默认状态
   在initState方法中，分类数据加载完成后，把第一个分类设为默认选中，同时加载默认分类的商品：

@override
void initState() {
  super.initState();
  // 原有的_screenFuture加载完成后的回调里补充逻辑
  _screenFuture.then((_) {
    final categories = Provider.of<Categories>(context, listen: false).items;
    if (categories.isNotEmpty) {
      setState(() {
        selectedCategoryTitle = categories.first.title;
        filteredProducts = Provider.of<Products>(context, listen: false).findBycategoryName(selectedCategoryTitle!);
      });
    }
  });
}

3. 修改分类选中判断逻辑
   把分类列表中原本写死的isActive判断，改为和全局选中状态对比：

makeCategory(
  isActive: categoriesData.items.toList()[i].title == selectedCategoryTitle,
  title: categoriesData.items.toList()[i].title
)

4. 修改分类点击事件
   点击时修改全局选中状态，同时更新筛选后的商品列表：

onTap: () {
  print(title + " clicked");
  setState(() {
    selectedCategoryTitle = title;
    filteredProducts = Provider.of<Products>(context, listen: false).findBycategoryName(title);
  });
},

5. 修改商品列表数据源
   把商品列表原本绑定的productsData.items替换成筛选后的filteredProducts，本地筛选场景下可以直接移除商品部分的FutureBuilder：

ListView.builder(
  shrinkWrap: true,
  scrollDirection: Axis.horizontal,
  itemCount: filteredProducts.length,
  itemBuilder: (ctx, i) => FadeAnimation(
    1.4,
    makeItem(
      image: 'assets/images/one.jpg',
      title: filteredProducts[i].title,
      price: filteredProducts[i].price
    )
  )
)

• 补全两个FutureBuilder的缺失返回分支，避免空指针异常，所有条件分支都要有对应返回的Widget
• 如果切换分类需要重新发起网络请求拉取对应分类商品，就不要用本地筛选的filteredProducts，新增一个Future? productFuture状态，点击分类时更新这个Future，同时把商品FutureBuilder的future参数绑定为这个动态的productFuture即可。

内容的提问来源于stack exchange，提问作者mcfred