Flutter 如何遍历 ListView 中的每个项目？

Posted 2023-02-23

【中文标题】Flutter 如何遍历 ListView 中的每个项目？

【英文标题】：Flutter How do I iterate over each item in a ListView?

【发布时间】：2021-02-19 17:33:12

【问题描述】：

我是 Flutter 的新手，我创建了一个简单的应用程序来显示一些自定义的 List Tiles。在每个图块中，可以通过 + 和 - 按钮增加或减少计数。

但我想通过单击“订购”按钮将这些数据放入地图中。例如，我的地图会像 'shoes': 1, 'books': 2, 'water': 3 等。

我尝试过 Provider、StreamBuilder、BLoC 等。但由于我是初学者，我无法真正使用其中的任何一个。

谁能告诉我如何将这些数据放入地图中。

感谢阅读。

【问题讨论】：

你能显示用于呈现上述列表的代码

【参考方案1】：

您可以像这样定义Map：

List<String> products = ['shoes', 'books', 'water'];
Map<String,int> map = Map.fromIterables(products , 0);

当用户在每个图块中按下 - 或 + 按钮时，更新地图中等效的 。 例如在shoes的+按钮的onTap事件中你有

map.update('shoes', (v)=> v+1);

然后您可以在onTap 的Order 按钮中使用更新的map。

有关 dart 中 Map 的更多信息，请访问 this 链接。

【讨论】：

非常感谢！这正是我所需要的。再次感谢您以简洁的格式给出答案，即使是初学者也能理解。

【参考方案2】：

使用“bloc”，您需要构建您的事件，Bloc 中的状态将是这样的：

事件将是触发 Bloc 的地方。

part of 'something_bloc.dart';

@immutable
abstract class SomethingEvent

class ListOfSomething extends SomethingEvent

class SomethingElse extends SomethingEvent
  final String input;
  SomethingElse(this.input);

  List<Object> get props => [input];

状态是事件中触发的结果将在哪里表现出来，无论成功还是不成功：

part of 'Something_bloc.dart';

@immutable
abstract class SomethingState

class SomethingInitial extends SomethingState

class SomethingLoading extends SomethingState

class SomethingSuccess extends SomethingState
  final String success;
  SomethingSuccess(this.success);

“块”是管理这些事件和状态的地方：

part 'something_event.dart';
part 'something_state.dart';

class SomethingBloc extends Bloc<SomethingEvent,SomethingState>
 final ServiceFacade service;
  SomethingBloc(this.service);

  @override
  SomethingState get initialState => SomethingInitial();

  @override
  Stream<SomethingState> mapEventToState(SomethingEvent event) async* 
    if(event is SomethingEvent)
      final failureOrSuccess = await service.call(event.cardId);
      yield failureOrSuccess.fold(
              (failure) => (failure is GeneralFailure)
                  ? SomethingErrorState(error: failure.message)
                  : null,
              (list) => SomethingState(success: list)
      );
    
   
  

屏幕将如下所示，您可以在OnPressed 中触发事件，或者在initState() 中对其进行初始化：

    BlocConsumer<SomethingBloc, SomethingState>(
                    listener: (context, state) 
                      if (state is SomethingLoadingState) 
                       
                       else if (state is SomethingErrorState) 
                        
                       else if (state is SomethingSuccess) 
                        
                      
                    ,
                    builder: (context, state) 
                      if (state is SomethingSuccess) 
                        return Padding(
                          padding: paddingHorizontal,
                            child: Column(
                              children: <Widget>[
                                for (var item in state.list)
                                 Container(

                                 child: Text('$item')
                                   )
                       ]
                            ),
                        );
                       else 
                        return Container();
                      
                    ,
                  ),

我希望我在一般方面有所帮助。

【讨论】：

我会研究 BLoC，但我可以使用 @R.Shpd 的回答来完成它。谢谢你的回答。