flutter - 在小部件 Flutter 中预加载以前保存的图像

Question

我有一组来自正在检索的 API 的图像var listing。本质上，我希望能够预加载从initState()方法列表中获取的图像，并在小部件中显示加载的图像，但我还允许用户访问从画廊上传图像。我不确定如何将所有内容放在一起。

所以我的问题是从 API 中提取的图像需要image.network()工作，而来自画廊的图像显示为image.file().

所以我认为一个更好的主意是能够将图像加载到小部件上initState，而不是尝试在构建中从 Api 检索图像，因为重建可能会发生很多次。

这是我当前的代码。任何帮助都会很有帮助。

class FourthPage extends StatefulWidget {
  var listing;
  var isImageComingFromApi = true;
  FourthPage({this.listing});
  @override
  _FourthPageState createState() => _FourthPageState();
}

class _FourthPageState extends State<FourthPage> {
  bool fromAPI = false;
  List<String> listOfImagesFromAPI = [];
  List<File> listOfImagesFromDevice = [];
  List<Image> myApiImages = [];

  @override
  void dispose() {
    super.dispose();
  }

  void _convertStringsToFile() {
    fromAPI = true;
    for (int i = 0; i < widget.listing.imageDetails.length; i++) {
      if (widget.listing.imageDetails[i] != null) {
        listOfImagesFromAPI.add(widget.listing.imageDetails[i].toString());
      }
    }
    images = listOfImagesFromAPI.map((e) => File(e)).toList();
  }

  @override
  void initState() {
    setState(() {
      _convertStringsToFile();
    });
    super.initState();
  }

  // save the result of gallery fileUserOptions
  File galleryFile;

  @override
  Widget build(BuildContext context) {
    //display image selected from gallery
    imageSelectorGallery() async {
      fromAPI = false;
      widget.isImageComingFromApi = false;
      galleryFile = await ImagePicker.pickImage(
          source: ImageSource.gallery, imageQuality: 20);
      if (images.length < 5) {
        // fromAPI = false;
        listOfImagesFromDevice.add(galleryFile);
        images.add(galleryFile);
      } else {
        // fromAPI = false;
        listOfImagesFromDevice.add(galleryFile);
        listOfImagesFromDevice.removeLast();
        images.removeLast();
        images.add(galleryFile);
      }
      setState(() {});
    }

    return new SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(bottom: 7),
            child: Text(
              "Upload Picture",
              style: TextStyle(fontFamily: "Montserrat Medium", fontSize: 20),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 20),
            child: Text(
              "Lorem ipsum dolor sit amet, consectetur",
              style: TextStyle(
                  fontFamily: "Montserrat Regular",
                  color: sankaraGreyColor,
                  fontSize: 12),
            ),
          ),
          new RaisedButton(
            child: new Text('+'),
            onPressed: imageSelectorGallery,
          ),
          SizedBox(height: 20),
          new Container(
            height: 2000,
            child: GridView.count(
              crossAxisSpacing: 6,
              mainAxisSpacing: 6,
              crossAxisCount: 3,
              children: List.generate(images.length, (index) {
                return Column(children: <Widget>[
                  // Container(
                  //     height: 90,
                  //     width: 80,
                  //     decoration: BoxDecoration(
                  //       borderRadius: BorderRadius.circular(10),
                  //     ),
                  //     child: ClipRRect(
                  //       borderRadius: BorderRadius.circular(400),
                  //       child: Image.network(images[index].path.toString(),
                  //           fit: BoxFit.cover),
                  //       // borderRadius: BorderRadius.circular(10),
                  //     )),
                  Container(
                      height: 90,
                      width: 80,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(400),
                        child: Image.network(listOfImagesFromAPI[index],
                            fit: BoxFit.cover),
                        // borderRadius: BorderRadius.circular(10),
                      )),
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        // images.removeAt(index);
                      });
                    },
                    child: Padding(
                      padding: const EdgeInsets.all(0.0),
                      child: Align(
                        alignment: Alignment.bottomRight,
                        child:
                            Icon(Icons.cancel, color: Colors.black, size: 20),
                        widthFactor: 3.8,
                        heightFactor: 0.25,
                      ),
                    ),
                  ),
                ]);
              }),
            ),
          )
        ],
      ),
    );
  }

  Widget displaySelectedFile(File file) {
    return new SizedBox(
      height: 200.0,
      width: 300.0,
      //child: new Card(child: new Text(''+galleryFile.toString())),
      //child: new Image.file(galleryFile),
      child: file == null
          ? new Text('Sorry nothing selected!!')
          : new Image.file(file),
    );
  }
}

标签： flutterdartuser-interfaceimagepicker