运行时 Flutter 高效的图像加载答案

【问题标题】：Flutter efficient image loading at runtime运行时 Flutter 高效的图像加载
【发布时间】：2019-02-21 00:25:35
【问题描述】：

我正在尝试向我的 Flutter 应用程序添加骰子功能。在 Java 中，我会从 20 中生成一个随机数，然后根据结果拉出相应的图像。例如，一卷 14 会拉出 dice_image_14.jpg 的图像。

由于构建方法的工作方式，我不确定如何在 Flutter 中执行此操作。

我能想到的唯一方法是一大堆丑陋的嵌套条件语句：

@override
build(Buildcontext context) {
  Stack (
    diceRoll == 1 ?
      Container(
        BoxDecoration(
          image: ('lib/images/dice_image_1.jpg),
        ),
      ) : diecroll == 2?
      Container(
        BoxDecoration(
          image: ('lib/images/dice_image_2.jpg),
        ),
      ) : diecroll == 3?  // etc etc etc.   20 times!!
  );
}

在运行后按需将特定图像加载到容器中是否有更现实的解决方案？

【问题讨论】：

或者..你可以分离 UI 层和逻辑层并从逻辑层返回任何图像文件名并将其加载到屏幕上。

标签： image flutter

【解决方案1】：

只需将您的 diceRoll 插入您的资产路径：

BoxDecoration(
          image: ('lib/images/dice_image_$diceRoll.jpg)
     )

来自Dart docs

$variableName（或 ${表达式}）

字符串插值：包括变量或表达式的字符串文字内的字符串等价物。

【讨论】：