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

【问题标题】：Flutter How do I iterate over each item in a ListView?Flutter 如何遍历 ListView 中的每个项目？
【发布时间】：2021-02-19 17:33:12
【问题描述】：

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

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

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

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

感谢阅读。

【问题讨论】：

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

标签： list flutter dictionary listview dart

【解决方案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 的回答来完成它。谢谢你的回答。