Flutter如何在资产中的图像不可用时显示占位符

nukf8bse 于 2023-02-05 发布在 Flutter

关注(0)|答案(2)|浏览(141)

我只需要从我的资产文件夹中获取一些图像名称列表。但有一些图像不可用，所以我需要添加一些错误占位符，如果它不存在。我尝试使用Future，但当我在屏幕上显示它时，它显示的错误是Future Widget无法添加到Widget中

ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(100)),
    child: Image.asset(
      'assets/images/${image}.png',
      height: 50,
      width: 50,
      fit: BoxFit.fill,
    )),

这就是我得到的

Future<Widget> Imagee(image) async {
    try {
      await rootBundle.load(image);
      return ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(100)),
          child: Image.asset(
            'assets/team/${image}.png',
            height: 60,
            width: 60,
            fit: BoxFit.fill,
          ));
    } catch (_) {
      return SizedBox(); // Return this widget
    }
  }

显示Future无法添加到Widget中

flutter

来源：https://stackoverflow.com/questions/75316878/flutter-how-to-show-placeholder-if-image-in-assets-not-available

2条答案

按热度按时间

oxcyiej71#

也许您可以尝试使用验证：

await rootBundle.load(image);
  if (image != null) {
      return ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(100)),
          child: Image.asset(
         'assets/team/${image}.png',
         height: 60,
         width: 60,
         fit: BoxFit.fill,
      ));
  } else {
        //...
  }

赞(0）回复(0）举报 2023-02-05

p8ekf7hl2#

如果使用异步调用加载映像，则可以使用FutureBuilder。

Future<Widget> ImageOrNot() async {
    try {
      await rootBundle.load(image);
      return ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(100)),
          child: Image.asset(
            'assets/team/${image}.png',
            height: 60,
            width: 60,
            fit: BoxFit.fill,
          ));
    } catch (_) {
      return SizedBox(); // Return this widget
    }
  }

内部构建使用FutureBuilder

class ImageOrBox extends StatelessWidget {
  const ImageOrBox({super.key});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: imageOrNot(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        return snapshot.data??Text('Error');
      },
    );
  }
}

赞(0）回复(0）举报 2023-02-05

我来回答

Flutter如何在资产中的图像不可用时显示占位符

2条答案

相关问题

热门标签

最新问答