Question

我正在构建一个应用程序，其中相同的图像可以以很多不同的大小显示（在台式机/平板电脑上较大，而在手机上较小）。我还想考虑设备像素密度，以便始终加载最合适的信号源。

我知道在HTML中使用srcset和sizes属性来指定来源和大小是可能的，但是在Flutter中如何做类似的事情？

Answer 1

尝试AspectRatio，这适用于所有尺寸

AspectRatio(
    aspectRatio: 4 / 3, //change value here
    child: new Container(
      color: Colors.red,
    ),
  ),

Answer 2

您可以使用LayoutBuilder获取构建时图像的显示尺寸，并使用MediaQueries获得设备像素密度。

我创建了一个可以做到这一点的软件包：https://pub.dev/packages/responsive_image

只需指定您的来源，小部件将负责选择最合适的来源并渲染图像。

ResponsiveImage(
  srcSet: {
    64: "https://via.placeholder.com/64",
    128: "https://via.placeholder.com/128",
    256: "https://via.placeholder.com/256",
    512: "https://via.placeholder.com/512",
  },
  scalePreference: ScalePreference.Upper,
);

您还可以使用构建器来进一步自定义图像的显示（例如，使用cached_network_image）

ResponsiveImage(
  srcSet: {
    256: "https://via.placeholder.com/256",
    512: "https://via.placeholder.com/512",
    1024: "https://via.placeholder.com/1024",
  },
  builder: (BuildContext context, String url) {
    return CachedNetworkImage(
      imageUrl: url,
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => Icon(Icons.error),
    );
  },
);

动态选择源图像分辨率

2 个答案: