Привет всем, добро пожаловать обратно в мой (потрясающий) учебник, LOL! Сегодня мы узнаем, как выбрать несколько изображений, используя GetX в качестве управления состоянием. Кто не знаком с GetX? Думаю, каждый разработчик Flutter знает, кто такой GetX. Хорошо, давайте кодировать!
Во-первых, давайте создадим простой HomeScreen.
class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('No Image Choosen'), const SizedBox( height: 30, ), ElevatedButton(onPressed: () {}, child: Text('Choose Image')) ], ), ), ); } }
Вы можете запустить код выше. И это даст вам такой результат
Хорошо, наш простой домашний экран работает. Давайте создадим функцию, которую мы можем использовать для выбора нескольких изображений. Как я уже говорил выше, в этом случае я буду использовать GetX для управления состоянием.
import 'dart:developer'; import 'dart:io'; import 'package:get/get.dart'; import 'package:image_picker/image_picker.dart'; class HomeController extends GetxController { // FOR PICK IMAGE final ImagePicker _picker = ImagePicker(); // VARIABLE FOR DEFINE IS IMAGE 1, IMAGE 2, OR IMAGE 3 final Rx<File> _image = File('').obs; Rx<File> get image => _image; final Rx<File> _image2 = File('').obs; Rx<File> get image2 => _image2; final Rx<File> _image3 = File('').obs; Rx<File> get image3 => _image3; final RxList<File> _listImage = <File>[].obs; void pickImage({required String imageType}) async { try { List<File> tempImg = []; if (imageType == 'firstImage') { XFile? img = await _picker.pickImage(source: ImageSource.camera); _image.value = File(img!.path); tempImg.add(_image.value); } if (imageType == 'secondImage') { XFile? img = await _picker.pickImage(source: ImageSource.camera); _image2.value = File(img!.path); tempImg.add(_image.value); } if (imageType == 'thirdImage') { XFile? img = await _picker.pickImage(source: ImageSource.camera); _image3.value = File(img!.path); tempImg.add(_image.value); } for (var element in tempImg) { _listImage.add(element); } log('LIST IMAGE $_listImage'); } catch (e) { log('ERROR $e'); } } }
Большой! Выше мы определили переменные, которые мы можем использовать для нашей функции. Как видите, я создаю три одинаковые переменные (изображение, изображение2 и изображение3). В моем сценарии я буду использовать эти переменные для сохранения значения нескольких изображений. Достаточно просто, не так ли?
Почему я использую параметры в нашей функции выбора изображения? Ответ прост, потому что я просто использую функцию on для выбора изображения. Я думаю, мне нужно сделать некоторую условную функцию, основанную на этих параметрах. Я надеюсь, вы поняли мою точку зрения.
Давайте перейдем к нашему домашнему экрану. Я обновлю свой домашний экран, и давайте посмотрим на нашу идею с множественным выбором изображения, работает ли она именно так, как мы хотим?
Потрясающий! Мы просто реализуем, как выбрать несколько изображений во Flutter, используя список. Хорошо, я думаю, что сегодняшний урок завершен. Вы можете задать мне вопрос, отправив комментарий ниже, если у вас есть вопрос. До скорой встречи в другом замечательном уроке! Увидимся!