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

Question

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

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

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

你们中的任何人都可以告诉我如何将这些数据放入地图中。

谢谢阅读。

Answer 1

您可以像这样定义Map ：

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

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

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

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

有关 dart 中地图的更多信息，请访问此链接。

Answer 2

使用“集团”，你需要建立你的事件，集团中的状态将是这样的：

该事件将是触发 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();
                      }
                    },
                  ),

我希望我在一般情况下有所帮助。