时间戳

首页 > 解决方案 > 使用 BloC 在 Flutter 中的屏幕内编写简单的函数

flutter - 使用 BloC 在 Flutter 中的屏幕内编写简单的函数

问题描述

我一直在使用 BloC 模式开发 Flutter 应用程序。我有两个函数，我不知道是否应该将它们写在我的 BloC 文件中。这里是代码。

这是我的 BloC 文件代码：

import 'dart:io';

import 'package:FlutterTWOHANDSAPPv2/Pets/model/createPetScreenProperties.dart';
import 'package:FlutterTWOHANDSAPPv2/bloc/jsonReader.dart';
import 'package:flutter/material.dart';
import 'package:generic_bloc_provider/generic_bloc_provider.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';

class PetsBloc implements Bloc {
  CreatePetScreenProperties properties;

  PetsBloc() {
    properties = CreatePetScreenProperties();
  }

  @override
  void dispose() {
    // TODO: implement dispose
  }

  getImage(ImageSource source) async {
    ImagePicker picker = ImagePicker();

    PickedFile image = await picker.getImage(source: source);
    if (image != null) {
      File cropped = await ImageCropper.cropImage(
          sourcePath: image.path,
          aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1),
          compressQuality: 100,
          maxWidth: 1000,
          maxHeight: 1000,
          compressFormat: ImageCompressFormat.jpg,
          androidUiSettings: AndroidUiSettings(
            toolbarColor: Colors.blueAccent,
            toolbarTitle: JsonReader.getTranslationString("CREATEPET_CROP"),
            statusBarColor: Colors.deepOrange.shade900,
            backgroundColor: Colors.white,
          ));
    } else {
      // Do something
    }
  }
}

这是我的屏幕文件

import 'dart:io';

import 'package:FlutterTWOHANDSAPPv2/Pets/bloc/petsBloc.dart';
import 'package:flutter/material.dart';
import 'package:generic_bloc_provider/generic_bloc_provider.dart';
import 'package:image_picker/image_picker.dart';

class CreateNewPetScreen extends StatelessWidget {
  PetsBloc bloc;
  bool inProcessOfSelectingImage() => bloc.properties.inProcessOfSelectingImage;
  File imageOfPet() => bloc.properties.image;

  @override
  Widget build(BuildContext context) {
    bloc = BlocProvider.of(context);

    return Container(
      padding: EdgeInsets.all(20),
      child: Stack(
        children: [
          Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Center(
                  child: GestureDetector(
                    onTap: selectPetPicture,
                    child: Container(
                      height: 150,
                      width: 150,
                      decoration: BoxDecoration(
                          image: DecorationImage(image: getImageOfPet()),
                          shape: BoxShape.circle,
                          color: Colors.black),
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  void selectPetPicture() {
    bloc.getImage(ImageSource.gallery);
  }

  ImageProvider<Object> getImageOfPet() {
    return imageOfPet() != null
        ? FileImage(imageOfPet())
        : AssetImage("heregoesadefaultimageasset");
  }
}

如您所见，在我的屏幕底部，我有两个函数，它们做一些非常基本的事情，所以我觉得它们不适合我的 BloC 文件。我应该把它们写在那里吗？如果我这样做，我会破坏架构吗？

标签： flutterdartbloc

解决方案

目前还不清楚您在 PetsBloc 类中实际使用了特定于 bloc 模式的任何内容。据我所知，您可以删除该实现并创建PetsBloc一个普通对象，并且功能不会改变。话虽如此，假设你有一个完整的 Bloc 类设置和一个mapEventToState方法......正确的 Bloc 架构只会从你的 UI 触发事件，然后触发一个状态。

bloc.add(EventThatTriggersState);

然而， Cubits非常适合更简单的任务，并且在 Cubit 类中具有类似的简单功能并不违反预期的架构。

推荐阅读