如何基于API的ACTIVE/INACTIVE状态筛选展示ListView数据

方案一：通过Bloc管理筛选状态（推荐用于跨组件共享筛选条件） #

1. 更新FoodState，添加筛选状态字段
   在你的FoodState中加入筛选状态，方便Bloc统一管理：

class FoodState extends Equatable {
  final List<Food> food;
  final String filterStatus; // 可选值：'ACTIVE' / 'INACTIVE'

  const FoodState({required this.food, this.filterStatus = 'ACTIVE'});

  @override
  List<Object> get props => [food, filterStatus];

  FoodState copyWith({
    List<Food>? food,
    String? filterStatus,
  }) {
    return FoodState(
      food: food ?? this.food,
      filterStatus: filterStatus ?? this.filterStatus,
    );
  }
}

2. 添加筛选事件与Bloc处理逻辑
   定义更新筛选状态的事件，并在Bloc中处理：

// 定义事件
class UpdateFilterStatus extends FoodEvent {
  final String status;
  const UpdateFilterStatus(this.status);

  @override
  List<Object> get props => [status];
}

// Bloc中处理事件
@override
Stream<FoodState> mapEventToState(FoodEvent event) async* {
  if (event is UpdateFilterStatus) {
    yield state.copyWith(filterStatus: event.status);
  }
  // 保留原有其他事件处理逻辑
}

3. 添加筛选控件
   在UI中加入筛选选择器（比如SegmentedButton），触发Bloc事件更新筛选状态：

BlocBuilder<FoodBloc, FoodState>(
  builder: (context, state) {
    return SegmentedButton<String>(
      segments: const [
        ButtonSegment(value: 'ACTIVE', label: Text('活跃数据')),
        ButtonSegment(value: 'INACTIVE', label: Text('非活跃数据')),
      ],
      selected: {state.filterStatus},
      onSelectionChanged: (newSelection) {
        context.read<FoodBloc>().add(UpdateFilterStatus(newSelection.first));
      },
    );
  },
)

4. 修改ListView.builder实现数据过滤
   在原有列表代码中，根据当前筛选状态过滤数据：

BlocBuilder<FoodBloc, FoodState>(
  builder: (context, state) {
    // 按状态过滤数据
    final filteredFood = state.food.where((item) => item.status == state.filterStatus).toList();
    
    return ListView.builder(
      itemCount: filteredFood.length,
      itemBuilder: (context, index) {
        final foodItem = filteredFood[index];
        return Row(
          children: [
            const SizedBox(
              height: 10,
              width: 10,
              child: CircleAvatar(
                foregroundColor: ColorName.brandSecondaryGreen,
                backgroundColor: ColorName.brandSecondaryGreen,
              ),
            ),
            const SizedBox(width: 5),
            Text(
              foodItem.identity,
              style: subtitle1(),
            ),
          ],
        );
      },
    );
  },
)

方案二：用StatefulWidget本地管理筛选状态（适合单一组件内筛选） #

如果不需要跨组件共享筛选条件，可以直接在父组件中用State维护筛选状态：

class _FoodListPageState extends State<FoodListPage> {
  String _currentFilter = 'ACTIVE';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 筛选选择器
        SegmentedButton<String>(
          segments: const [
            ButtonSegment(value: 'ACTIVE', label: Text('活跃数据')),
            ButtonSegment(value: 'INACTIVE', label: Text('非活跃数据')),
          ],
          selected: {_currentFilter},
          onSelectionChanged: (newSelection) {
            setState(() {
              _currentFilter = newSelection.first;
            });
          },
        ),
        // 筛选后的列表
        Expanded(
          child: BlocBuilder<FoodBloc, FoodState>(
            builder: (context, state) {
              final filteredFood = state.food.where((item) => item.status == _currentFilter).toList();
              return ListView.builder(
                itemCount: filteredFood.length,
                itemBuilder: (context, index) {
                  final foodItem = filteredFood[index];
                  return Row(
                    children: [
                      const SizedBox(
                        height: 10,
                        width: 10,
                        child: CircleAvatar(
                          foregroundColor: ColorName.brandSecondaryGreen,
                          backgroundColor: ColorName.brandSecondaryGreen,
                        ),
                      ),
                      const SizedBox(width: 5),
                      Text(
                        foodItem.identity,
                        style: subtitle1(),
                      ),
                    ],
                  );
                },
              );
            },
          ),
        ),
      ],
    );
  }
}

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