0

我正在尝试将图像放入包含在 DartAlertDialog()小部件中的长文本中。让我用一些图像来说明问题。

我想要的是：

我想要的是

我有的：

我有的

（硬币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()部件放置在包装文本的最后一个单词旁边，而是在整个生成的文本区域旁边。Flexible()

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

有没有办法

  • 限制换行的大小，以免换行时被视为整行；
  • 插入图像作为文本字符，这样只有使用Flexible()do the trick 来解决这个问题；
  • 自动将行小部件分成几行。

在此先感谢您的时间

4

2 回答 2

0

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

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 小部件的方式，这似乎是一个很好的解决方案

于 2021-11-30T02:30:09.617 回答
0

试试 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: '?'),
      ],
    )
于 2021-11-30T02:32:28.630 回答