如何將Future方法從Stateful小部件移動到他們自己的類Flutter

我有幾個 Future 方法包含在有狀態的小部件中。相同的方法出現在應用程式的不同部分。我想將方法??添加到一個類而不是在應用程式中重寫四次，但我無法弄清楚，因為有幾個方法呼叫 setState 來更新 UI。當用戶從他們的圖庫中選擇影像，選擇拍照，將所選影像上傳到資料庫以在應用程式中顯示，影像被壓縮等時，將呼叫這些方法。

class ExampleClass extends StatefulWidget {
  const ExampleClass({Key? key}) : super(key: key);

  @override
  State<ExampleClass> createState() => _ExampleClassState();
}

class _ExampleClassState extends State<ExampleClass> {
  File? file;

  Future<void> _captureImageWithCamera() async {
    Get.back();
    XFile? pickedFile = await ImagePicker().pickImage(
      source: ImageSource.camera,
    );
    setState(() {
      file = File(pickedFile!.path);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

我只包含了其中一種方法（captureImageWithCamera），假設可以將建議的解決方案應用于所有方法。如果我需要提供更多代碼，我將很樂意這樣做。任何幫助將不勝感激。

uj5u.com熱心網友回復：

您可以pickedFile從提取的方法回傳，然后使用結果的每個類都可以使用回傳的值呼叫 setState 本身。

class ImageCapturer {
  Future<XFile?> captureImageWithCamera() async {
    Get.back();
    XFile? pickedFile = await ImagePicker().pickImage(
      source: ImageSource.camera,
    );
    
    return pickedFile;
  }
}

class ExampleClass extends StatefulWidget {
  const ExampleClass({Key? key}) : super(key: key);

  @override
  State<ExampleClass> createState() => _ExampleClassState();
}

class _ExampleClassState extends State<ExampleClass> {
  File? file;

  Future<void> _captureImageWithCamera() async {
    final file = await ImageCapturer().captureImageWithCamera();

    setState(() {
      this.file = File(file!.path);;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

uj5u.com熱心網友回復：

您可以使用回呼引數將代碼抽象為一個函式，如下所示：

class OtherExampleClass {
  Future<void> captureImageWithCamera(
        void Function(XFile? pickedFile) callback,
    ) async {
    Get.back();
    XFile? pickedFile = await ImagePicker().pickImage(
      source: ImageSource.camera,
    );
    
    callback(pickedFile);
  }
}

class ExampleClass extends StatefulWidget {
  const ExampleClass({Key? key}) : super(key: key);

  @override
  State<ExampleClass> createState() => _ExampleClassState();
}

class _ExampleClassState extends State<ExampleClass> {
  File? file;

  Future<void> _captureImageWithCamera() async {
    await OtherExampleClass().captureImageWithCamera((XFile? pickedFile) {
            setState(() {
                file = File(pickedFile!.path);
            });
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

uj5u.com熱心網友回復：

當您在應用程式之外使用第三方庫時，例如選擇照片、下載一些資料、進行 http 呼叫。考慮為這個東西創建服務類，服務類基本上是這樣的：一個職責單一的類，像這個類應該只做一件事。在您的情況下，您應該創建 ImagePickerService 類作業是選擇一個 Image 并將其回傳給您，您不應像 setState 那樣在其中呼叫任何顫振框架，因為更新 UI 不是他的作業。

class ImagePickerService {
  //make this class singleton so you do not make a new instance every time you want it.
  static final ImagePickerService _instance = ImagePickerService._(); 
  ImagePickerService._();
  factory ImagePickerService() => _instance;

  Future<XFile?> pickImage(ImageSource imageSource) async {
    return await ImagePicker().pickImage(
      source: imageSource,
    );
  }
}

所以現在當你想選擇一個影像時，你只需要像這樣呼叫這個服務。

onTap: () async {
    final file = await ImagePickerService().pickImage(ImageSource.camera);
    setState(() {
      // you got the file boss do anything you want
    });
  }

現在，當您創建一個新頁面時，您只需創建頁面并在其中定義一些服務。

標籤：扑 镖

上一篇：顫振異步功能不同步

下一篇：應該只有一項帶有[DropdownButton]的