Flutter - 参数无效：在轮播中显示 URI 时未在 URI 中指定主机

Question

如何将 XFile 转换为 URI 以显示图像？ 我正在通过设备（手机）的图库选择图像。 当旋转木马四处移动时，我确实收到此错误

Invalid argument(s): No host specified in URI file:///Instance%20of%20'XFile'

我将注释掉我认为我出错的地方，有什么方法可以将其转换并将其存储在数组中，就像 URL 一样？ 我似乎找不到解决方案。

这是我的 android 模拟器上显示的旋转木马图像： https://prnt.sc/DRI_H-ALYgfJ

这是我的代码 function，用于显示轮播。

显示函数()

List<XFile> images = [];

// I have tried this one but this does not work and it produces an error.
// "The getter 'path' isn't defined for the type 'List<XFile>'."
File file = File(images.path);

Widget displayingFunction() {
    final List<Widget> imageSliders = images
        .map((item) => Container(
              child: Container(
                margin: const EdgeInsets.all(5.0),
                child: ClipRRect(
                    borderRadius: const BorderRadius.all(Radius.circular(5.0)),
                    child: Stack(
                      children: <Widget>[
// in this Image.network, how do I convert the item.toString into an image?
// and produces an error
// Invalid argument(s): No host specified in URI file:///Instance%20of%20'XFile'

                        Image.network(item.toString(),
                            fit: BoxFit.cover, width: 1000.0),
                        Positioned(
                          bottom: 0.0,
                          left: 0.0,
                          right: 0.0,
                          child: Container(
                            decoration: const BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  Color.fromARGB(200, 0, 0, 0),
                                  Color.fromARGB(0, 0, 0, 0)
                                ],
                                begin: Alignment.bottomCenter,
                                end: Alignment.topCenter,
                              ),
                            ),
                            padding: const EdgeInsets.symmetric(
                                vertical: 10.0, horizontal: 20.0),
                            child: Text(
                              'No. ${images.indexOf(item)} image',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ],
                    )),
              ),
            ))
        .toList();
    if (images.isNotEmpty) {
      return Container(
        child: CarouselSlider(
          options: CarouselOptions(
            autoPlay: true,
            aspectRatio: 2.0,
            enlargeCenterPage: true,
          ),
          items: imageSliders,
        ),
      );
    }  else {
      return Container();
    }
  }

Answer 1

要将XFile转换为URI以显示图像，您可以使用 file:// 协议并将文件路径传递给Image.network小部件。

这是对您的代码的修改：

List<XFile> images = [];

Widget displayingFunction() {
    final List<Widget> imageSliders = images
        .map((item) => Container(
              child: Container(
                margin: const EdgeInsets.all(5.0),
                child: ClipRRect(
                    borderRadius: const BorderRadius.all(Radius.circular(5.0)),
                    child: Stack(
                      children: <Widget>[
                        Image.file(
                          File(item.path),
                          fit: BoxFit.contain,
                          width: 1000.0,
                        ),
                        Positioned(
                          bottom: 0.0,
                          left: 0.0,
                          right: 0.0,
                          child: Container(
                            decoration: const BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  Color.fromARGB(200, 0, 0, 0),
                                  Color.fromARGB(0, 0, 0, 0)
                                ],
                                begin: Alignment.bottomCenter,
                                end: Alignment.topCenter,
                              ),
                            ),
                            padding: const EdgeInsets.symmetric(
                                vertical: 10.0, horizontal: 20.0),
                            child: Text(
                              'No. ${images.indexOf(item)} image',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ],
                    )),
              ),
            ))
        .toList();
    if (images.isNotEmpty) {
      return Container(
        child: CarouselSlider(
          options: CarouselOptions(
            autoPlay: true,
            aspectRatio: 2.0,
            enlargeCenterPage: true,
          ),
          items: imageSliders,
        ),
      );
    }  else {
      return Container();
    }
  }

此代码将使用图像列表中每个 XFile object 的文件路径，并创建一个 file:// URI 以使用 Image.network 小部件显示图像。

Answer 2

为了显示XFile类型的图像，您必须首先将其转换为这样的File类型

File pickedImage = File(pickedImage); //where pickedImage is XFile type

并使用Image.File()小部件来显示pickedImage