如何在被包装的 Dart Text() 中插入图像？

Question

我正在尝试将图像放入被包裹在 Dart AlertDialog() 小部件中的长文本中。让我用一些图片来说明这个问题。

我想要的：

What I want

我有：

What I have

（硬币 Image() 被冲到我的文本后面的行，而我希望它成为其中的一部分）。

我目前正在尝试使用 Wrap() 小部件，请参阅下面的最小代码

Wrap(children: [
        Flexible(
            child: Text('Are you sure you want to buy this item for ' +
                item.price.toString())),
        Padding(
            padding: const EdgeInsets.fromLTRB(5, 0, 0, 5),
            child: Image.asset(
              "path/to/my/image",
              width: 30,
            )), 
        Text('?'),
      ]),

当达到 Wrap() 上下文的宽度时，应该将其子窗口小部件放置在彼此下方。但是，它并没有像我希望的那样工作，因为它把 Image 小部件放在了 Text() 被 Flexible() 包裹的小部件下面，而不是放在最后一个小部件旁边。

我对这个问题的看法是，文本行的换行仍然会创建一个“文本框”，它将一直持续到上下文宽度的末尾（即行尾) 即使文本的最后一行提前结束。这是因为上一行明显已经达到了 Wrap() 上下文的宽度。这可能就是为什么 Image.assets() 作为下一个小部件插入 Wrap() 子列表中无论如何都会刷新到下一行的原因。

当然我已经尝试了其他几种方法，即使用 Row() 小部件和 Text() 小部件包裹在 Flexible() 小部件中，如下所示：

Row(children: [
            const Flexible(
                child: Text(
              'Are you sure you want to buy this item for ' + item.price.toString(),
            )),
            Row(children: [
              Padding(
                  padding: const EdgeInsets.fromLTRB(5, 0, 0, 5),
                  child: Image.asset(
                    "path/to/my/image",
                    width: 30,
                  )),
              Text('?'),
            ]),

这当然不起作用，因为它将 Image() 小部件 而不是 放在包装文本的最后一个单词旁边，但放在整个生成的 [=18] 旁边=] 文字区.

当然，问题在于文本很长，因此分成几行。如果文本没有分成几行，第一种方法会很有效。

有什么办法吗

限制换行的大小，以避免在换行时将其视为整行；
插入一个图像作为文本字符，这样只有使用 Flexible() 才能解决这个问题；
自动将行小部件分成多行。

提前感谢您的宝贵时间

Answer 1

我认为文本小部件会延伸到行尾，这样可以防止图像落后。为了解决这个问题，我建议将第一句话分成两个文本块，如下所示：

Wrap(children: [
    Flexible(
        child: Text('Are you sure you want to')),

    Flexible(child: Text('buy this item for ' )),
    Padding(
        padding: const EdgeInsets.fromLTRB(5, 0, 0, 5),
        child: Image.asset(
          "path/to/my/image",
          width: 30,
    Text('?'),
  ]),

另一种方法是看 Stack 小部件的方式，这似乎是一个很好的解决方案

Answer 2

尝试 Text.rich:

Text.rich(TextSpan(
      children: <InlineSpan>[
        TextSpan(text: 'Flutter is'),
        WidgetSpan(
            child: Padding(
            padding: const EdgeInsets.fromLTRB(5, 0, 0, 5),
            child: Image.asset(
              "path/to/my/image",
              width: 30,
            ),),),
        TextSpan(text: '?'),
      ],
    )

如何在被包装的 Dart Text() 中插入图像？

How to insert image in Dart Text() being wrapped?

flutter

dart

flutter-image

flutter-text

google-flexible