Flutter 在表单提交时获取文本字段值

Question

我想向其中添加数据并检索响应，为此我需要使用 bloc 模式从表单中获取我的标题和描述。

创建帖子区块 当我将它传递给 repo.createPost 时，标题和描述返回 '' 或空。如果成功，我想得到回应。

class CreatePostBloc extends Bloc<CreatePostEvent, CreatePostState> {
  final _postsFetcher = PublishSubject<Post>();

  final CreatePostRepository repo;

  CreatePostBloc({required this.repo}) : super(CreatePostState());

  @override
  Stream<CreatePostState> mapEventToState(CreatePostEvent event) async* {
    String title='',description='';
    if (event is TitleChange) {
      yield state.copyWith(title: event.title);
      title=event.title;
    } else if (event is DescriptionChange) {
      yield state.copyWith(description: event.description);
      description=event.description;
    } else if (event is CreatePostSubmitted) {
      yield state.copyWith(formStatus: FormSubmitting());
      print(description);

      try {
        Post itemModel = await repo.createPost(title,description);
        _postsFetcher.sink.add(itemModel);
        yield state.copyWith(formStatus: SubmissionSuccess());
      } on Exception catch (e) {
        yield state.copyWith(formStatus: SubmissionFailed(e));
      }
    }
  }

  dispose() {
    _postsFetcher.close();
  }
}

创建帖子存储库

     class CreatePostRepository {
      Future<Post> createPost(String title, String description) async {
        final response = await http.post(
          Uri.parse(getPostUrl),
          headers: <String, String>{
            'Content-Type': 'application/json; charset=UTF-8',
          },
          body: jsonEncode(
              <String, dynamic>{"title": title, "body": description, "userId": 1}),
        );
    
        if (response.statusCode == 201) {
          print(' created 201: ');
          print(response.body.toString());
          return Post.fromJson(jsonDecode(response.body));
    
        } else {
          print('not throw: ');
          throw Exception('failed to add post');
        }
      }
    }

创建帖子状态

    class CreatePostState {
      final String title;
      final String description;
      final FormSubmissionStatus formStatus;
    
      bool get isValidTitle => title.isNotEmpty;
    
      bool get isValidDescription => description.isNotEmpty;
    
      CreatePostState({
        this.title = '',
        this.description = '',
        this.formStatus = const InitialFormStatus(),
      });
    
      CreatePostState copyWith({
        String? title,
        String? description,
        FormSubmissionStatus? formStatus,
      }) {
        return CreatePostState(
            title: title ?? this.title,
            description: description ?? this.description,
            formStatus: formStatus ?? this.formStatus);
      }
    }

创建帖子事件

abstract class CreatePostEvent {}

  class TitleChange extends CreatePostEvent{
  final String title;

  TitleChange({required this.title});
  }
  class DescriptionChange extends CreatePostEvent{
  final String description;

  DescriptionChange({required this.description});
  }

class CreatePostSubmitted extends CreatePostEvent{

}

表单提交状态

abstract class FormSubmissionStatus{
  const FormSubmissionStatus();
}

class InitialFormStatus extends FormSubmissionStatus{
  const InitialFormStatus();
}

class FormSubmitting extends FormSubmissionStatus{}

class SubmissionSuccess extends FormSubmissionStatus{}

class SubmissionFailed extends FormSubmissionStatus{
  final Exception exception;

  SubmissionFailed(this.exception);
}

我的用户界面 如果响应为 201，则返回上一屏幕

 Widget buildColumn() => BlocListener<CreatePostBloc, CreatePostState>(
      listener: (context, state) {
        final formStatus = state.formStatus;
        if (formStatus is SubmissionFailed) {
          _showSnackbar(context, formStatus.exception.toString());
        } else if (formStatus is SubmissionSuccess) {
          debugPrint(state.description);
          Navigator.of(context, rootNavigator: true).pop(context);
        }
      },
      child: Form(
          key: formkey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: buildTitle(),
              ),
              SizedBox(
                height: 10,
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
                child: buildDescription(),
              ),
              Expanded(
                child: Align(
                  alignment: FractionalOffset.bottomCenter,
                  child: _submitButton(),
                ),
              ),
            ],
          )));

  Widget buildTitle() =>
      BlocBuilder<CreatePostBloc, CreatePostState>(builder: (context, state) {
        return TextFormField(
          decoration: InputDecoration(
            labelText: 'Title',
          ),
          validator: (value) => state.isValidTitle ? null : "Required",
          onChanged: (value) =>
              context.read<CreatePostBloc>().add(TitleChange(title: value)),
        );
      });

  Widget buildDescription() =>
      BlocBuilder<CreatePostBloc, CreatePostState>(builder: (context, state) {
        return TextFormField(
          decoration: InputDecoration(
            labelText: 'Description',
          ),
          validator: (value) => state.isValidDescription ? null : "Required",
          onChanged: (value) => context
              .read<CreatePostBloc>()
              .add(DescriptionChange(description: value)),
        );
      });

回复示例

 {
    "title": "hello",
    "body": "body",
    "userId": 1,
    "id": 101
}