Flutter 无法使用 bloc 更新 ListView.builder 的特定时间

您需要一个包含N个bool的列表来控制这N个项目，或者只需要一个包含所选项目的列表.模范班更好.

class Item extends Equatable { ///for value equality, equtable package
  const Item({
    required this.message,
    required this.isRead,
  });
  final String message;
  final bool isRead;

  @override
  List<Object?> get props => [message, isRead];

  Item copyWith({
    String? message,
    bool? isRead,
  }) {
    return Item(
      message: message ?? this.message,
      isRead: isRead ?? this.isRead,
    );
  }
}

现在只需要一个事件来切换读取更新.暂时跳过删除和其他事件.

abstract class TileEvent {}

class ToggleRead extends TileEvent {
  final Item item;
  ToggleRead(this.item);
}

只需要状态即可保存项目

class TileState extends Equatable {
  const TileState({required this.items});
  final List<Item> items;
  @override
  List<Object?> get props =>
      [items, identityHashCode(this)]; //not using listEquality , some reason spreed operation isn't working
}

和区块逻辑将是

class TileBloc extends Bloc<TileEvent, TileState> {
  TileBloc({List<Item> initItems = const []})
      : super(TileState(items: initItems)) {
    on<ToggleRead>((event, emit) {
      final selectedItem = event.item;
      final currentItems = state.items;

      final selectedItemIndex = currentItems
          .indexOf(selectedItem); //you can pass just index instead of item
      if (selectedItemIndex > -1) {
        bool isRead = state.items[selectedItemIndex].isRead;

        currentItems[selectedItemIndex] =
            currentItems[selectedItemIndex].copyWith(isRead: !isRead);

        /// ... because state value is list
        emit(TileState(items: [...currentItems]));
      }
    });
  }
}

和测试代码段

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BlocProvider(
          create: (_) => TileBloc(
              initItems: List.generate(5,
                  (index) => Item(message: "message $index", isRead: false))),
          child: TilesPage()),
    );
  }
}

class TilesPage extends StatefulWidget {
  const TilesPage({Key? key}) : super(key: key);

  @override
  State<TilesPage> createState() => _TilesPageState();
}

class _TilesPageState extends State<TilesPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Tile Screen"),
      ),
      body: Center(
        child: Column(
          children: [
            Expanded(
              child: BlocBuilder<TileBloc, TileState>(
                builder: (context, state) {
                  return ListView.builder(
                    itemCount: state.items.length,
                    itemBuilder: (context, index) {
                      final isRead = state.items[index].isRead;
                      return CustomTile(
                        text: "Message $index",
                        isRead: isRead,
                        onTap: () {
                          final event = ToggleRead(state.items[index]);
                          BlocProvider.of<TileBloc>(context).add(event);
                        },
                      );
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class CustomTile extends StatelessWidget {
  const CustomTile({
    Key? key,
    required this.text,
    required this.isRead,
    required this.onTap,
  }) : super(key: key);

  final String text;
  final bool isRead;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 7.5),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            text,
            style: TextStyle(
              fontWeight: isRead ? FontWeight.w600 : FontWeight.w200,
            ),
          ),
          InkWell(
            onTap: onTap,
            child: Icon(
              isRead ? Icons.mail_rounded : Icons.mail_outline_rounded,
            ),
          ),
        ],
      ),
    );
  }
}