Flutter Bloc架构下选中用户UI不更新及通用Dropdown实现求助

一、Dropdown选中后UI不更新的问题修复 #

你的代码存在两个核心问题导致UI不更新：

1. 局部变量被重复重置：每次BlocBuilder因Bloc状态变化重建时，selectedValue都会被重新赋值为"Tara Wood"，覆盖之前通过setState修改的值。
2. 错误的状态管理方式：在BlocBuilder的builder方法中使用setState违背了Bloc架构的设计——UI应该由Bloc的状态驱动，而非StatefulWidget的本地状态。

修复步骤： #

1. 完善SessionSelectionBloc的状态定义
   确保Bloc的状态能记录当前选中的用户：

   abstract class SessionSelectionState extends Equatable {
     const SessionSelectionState();
     @override
     List<Object> get props => [];
   }
   
   class SessionInitial extends SessionSelectionState {}
   
   class SessionSelected extends SessionSelectionState {
     final String selectedUsername;
     const SessionSelected(this.selectedUsername);
     @override
     List<Object> get props => [selectedUsername];
   }
   

2. 修改Dropdown的Bloc监听逻辑
   使用MultiBlocBuilder同时监听DropdownBloc（加载用户列表）和SessionSelectionBloc（当前选中状态），从Bloc状态中获取选中值：

   MultiBlocBuilder(
     builders: [
       BlocBuilder<DropdownBloc, DropdownState>(
         builder: (context, state) => state,
       ),
       BlocBuilder<SessionSelectionBloc, SessionSelectionState>(
         builder: (context, state) => state,
       ),
     ],
     builder: (context, states) {
       final dropdownState = states[0] as DropdownState;
       final sessionState = states[1] as SessionSelectionState;
   
       if (dropdownState is DropdownInitial) {
         context.read<DropdownBloc>().add(SelectionEvent());
       }
   
       if (dropdownState is Loaded && sessionState is SessionSelected) {
         List<String> userList = dropdownState.data as List<String>;
         String selectedUser = sessionState.selectedUsername;
   
         // 避免选中值不在列表中导致Dropdown报错
         if (!userList.contains(selectedUser)) {
           selectedUser = userList.first;
         }
   
         return DropdownButton<String>(
           value: selectedUser,
           items: userList.map((user) => DropdownMenuItem(
             value: user,
             child: Text(user),
           )).toList(),
           onChanged: (String? newUser) {
             if (newUser != null) {
               context.read<SessionSelectionBloc>().add(
                 SessionSelectedEvent(username: newUser)
               );
             }
           },
         );
       }
   
       return const CircularProgressIndicator(); // 加载状态占位UI
     },
   )
   

3. SessionSelectionBloc的事件处理
   确保收到选中事件时更新状态：

   class SessionSelectionBloc extends Bloc<SessionSelectionEvent, SessionSelectionState> {
     SessionSelectionBloc() : super(SessionInitial()) {
       on<SessionSelectedEvent>((event, emit) {
         emit(SessionSelected(event.username));
       });
     }
   }
   

二、通用Dropdown组件的实现思路 #

要实现可复用的Dropdown，核心是解耦组件与具体Bloc，推荐两种方案：

方案1：通过回调函数传递选中事件 #

组件只负责展示和通知选中变化，不直接依赖Bloc，由父组件处理Bloc事件触发：

// 通用Dropdown组件
class GenericDropdown<T> extends StatelessWidget {
  final List<T> items;
  final T selectedValue;
  final String Function(T) itemLabelBuilder;
  final ValueChanged<T?> onChanged;

  const GenericDropdown({
    super.key,
    required this.items,
    required this.selectedValue,
    required this.itemLabelBuilder,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return DropdownButton<T>(
      value: selectedValue,
      items: items.map((item) => DropdownMenuItem(
        value: item,
        child: Text(itemLabelBuilder(item)),
      )).toList(),
      onChanged: onChanged,
    );
  }
}

使用示例：

MultiBlocBuilder(
  builders: [
    BlocBuilder<DropdownBloc, DropdownState>(builder: (c, s) => s),
    BlocBuilder<SessionSelectionBloc, SessionSelectionState>(builder: (c, s) => s),
  ],
  builder: (context, states) {
    final dropdownState = states[0] as Loaded;
    final sessionState = states[1] as SessionSelected;
    List<String> userList = dropdownState.data as List<String>;

    return GenericDropdown<String>(
      items: userList,
      selectedValue: sessionState.selectedUsername,
      itemLabelBuilder: (user) => user,
      onChanged: (newUser) {
        if (newUser != null) {
          context.read<SessionSelectionBloc>().add(
            SessionSelectedEvent(username: newUser)
          );
        }
      },
    );
  },
)

方案2：依赖抽象Bloc（可选） #

如果需要组件直接与Bloc交互，可以定义抽象Bloc类，组件依赖抽象类而非具体实现：

// 抽象SelectionBloc
abstract class SelectionBloc<T> extends Bloc<SelectionEvent<T>, SelectionState<T>> {
  SelectionBloc(SelectionState<T> initialState) : super(initialState);
}

abstract class SelectionEvent<T> extends Equatable {
  const SelectionEvent();
}

class ItemSelectedEvent<T> extends SelectionEvent<T> {
  final T item;
  const ItemSelectedEvent(this.item);
  @override
  List<Object> get props => [item];
}

abstract class SelectionState<T> extends Equatable {
  const SelectionState();
}

class ItemSelectedState<T> extends SelectionState<T> {
  final T selectedItem;
  const ItemSelectedState(this.selectedItem);
  @override
  List<Object> get props => [selectedItem];
}

通用Dropdown组件：

class GenericDropdown<T> extends StatelessWidget {
  final List<T> items;
  final String Function(T) itemLabelBuilder;

  const GenericDropdown({
    super.key,
    required this.items,
    required this.itemLabelBuilder,
  });

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<SelectionBloc<T>, SelectionState<T>>(
      builder: (context, state) {
        T selectedValue = items.first;
        if (state is ItemSelectedState<T>) {
          selectedValue = state.selectedItem;
        }

        return DropdownButton<T>(
          value: selectedValue,
          items: items.map((item) => DropdownMenuItem(
            value: item,
            child: Text(itemLabelBuilder(item)),
          )).toList(),
          onChanged: (newItem) {
            if (newItem != null) {
              context.read<SelectionBloc<T>>().add(ItemSelectedEvent(newItem));
            }
          },
        );
      },
    );
  }
}

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