小编alt*_*Dev的帖子

我使用Angular Universal Starter工具包实现了我的Web应用程序.我想将预渲染文件上传到S3存储桶,以便我的初始页面加载得更快.但是我找不到有关将预渲染文件上传到S3以及如何在初始加载时访问该文件的正确配置？

我正在尝试动态加载可能存在也可能不存在的图像。

在这种情况下，加密货币图标使用其 3 个字母符号。我的静态库中有几百个 .svg 格式，当我从价格服务器中提取数据时，我尝试将我拥有的图标与来自服务器的符号进行匹配，并在没有时提供后备图像资产。

在我的 index.vue 中，我可以摆脱这段代码，一切正常：

<img :src="'statics/icons/svg/' + coin.symbol + '.svg'" v-img-fallback="'statics/icons/svg/fallback.svg'"/>

但是，在用户单击硬币时打开的子组件中，相同的代码将无法加载主图像和后备图像。我已经尝试了很多方法，但从我的子组件加载图像的唯一方法是像这样硬编码：

<img src="statics/icons/svg/btc.svg"/>

这对我来说是不可能的，因为我需要为任何可能的硬币动态生成模态......

或者像这样使用 require()：

<img :src="imageSrc" v-img-fallback="require('../statics/icons/svg/fallback.svg')"/>

// Computed:
imageSrc () {
  if (this.coinData.symbol) {
     return require('../statics/icons/svg/' + this.coinData.symbol + '.svg')
  }
}

但是，如果require()查找不存在的资产，这会使我的应用程序崩溃。我需要一种优雅地失败的方法，以便v-img-fallback可以检测到它并提供回退。

我试过做类似的事情，return require(image1) || require(fallback)但它不起作用。

我的目标是重现 Telegram（以及其他一些聊天应用程序）用于聊天消息气泡的复杂布局。气泡并不复杂，但事实证明，让气泡中的文本与日期很好地对齐却异常复杂：

类似的帖子已经在这里发布和回答，但关键的是它不能正确处理文本换行（下面详细介绍的情况#1和#2），因为填充右侧保持不变，浪费了大量的屏幕空间，而且看起来很糟糕。（如果还不清楚，请参见此处：2）。

我已经编译了我认为的 3 个“用例”来重现上图中的布局：

情况 #1：是迄今为止最复杂的，它似乎是日期小部件的一个小容器，占用了最少的空间，可能是 mainAxisSize 设置为 min 的一行。复杂的部分在于如何允许文本在上方和旁边流动，同时自然换行以避免任何重叠。

情况#2：如果上面的#1 重叠，由于文本行的字符数量几乎完美（以便不会自然换行），它将转换到下面的情况#2 中看到的布局，这似乎是一个具有两个嵌套行的列。

情况#3：这是迄今为止最容易单独实现的，并且可以通过多种方式完成，最简单的是带有两个文本小部件的单行。我相当确定，如果解决方案能够实现上述#1 和#2，那么这个解决方案应该是免费的。

我尝试过的： 将两者堆叠起来，将日期包裹在 aPositioned之类的东西中bottom: 0, right: 15。如果您添加至少 25 的 padding-right，这基本上只能实现情况 #1。

我还尝试过 RichText，它是迄今为止最有前途的，它可以处理所有情况，但远没有 telegram 所做的那么优雅。这样做的主要缺点是我仍然需要使用某种堆栈来放置“已发送和已查看”图标复选标记，因为图标不能包含在 RickText 跨度中......所以我仍然需要一些向右填充 + 底部填充，这样它们就不会重叠。这是该代码和下面的图片：

RichText(
  text: TextSpan(
    text: _message.textContent,
    style: DefaultTextStyle.of(context).style.merge(TextStyle(fontSize: 16)),
    children: <TextSpan>[
      TextSpan(text: ' ' + DateFormat('H:mm a').format(_message.createdDate.toLocal()).toString(),
        style: Theme.of(context).textTheme.caption.merge(
          TextStyle(
            fontSize: 10,
          )
        ),
      ),
    ],
  ),
),

理想情况下，日期将是一个单独的小部件，并且两者将与 spaceBetween 灵活对齐，因此日期始终保持在右下角，如上面的电报图像所示。哦，我正在使用该bubble: ^1.1.9+1小部件来显示实际的聊天气泡。