Flutter中Row组件文本溢出问题

Question

我无法把这个正确地布局。

我想要实现的目标：

这是我迄今为止尝试过最接近它但不完全正确的方法。

  Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
    Flexible(
      child: Row(children: [
        PrefixIcon(),
        Flexible(
          child: DefaultTextStyle(
            overflow: TextOverflow.ellipsis,
            child: TextGoesHere(),
          ),
        ),
        SuffixIcon(),
      ]),
    ),
    TrailingIcon(),
  ]),

但是使用 FlexFit.loose 的 Flexible 表现类似于 Expanded，因此即使 TextGoesHere 是一个短文本，SuffixIcon 也将被推到结尾。

我已经做到了这一步

请帮忙。

- pxsanghyo

Answer 1

如果您考虑使用TextOverflow.ellipsis，那么我已经通过行得到了如下结果。

颜色容器仅用于视觉效果。

小部件

 Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("Prefix"),
            Expanded(
              child: Container(
                color: Colors.deepOrange,
                child: Row(
                  children: [
                    Flexible(
                      child: Text(
                        "Very LongggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggText",
                        maxLines: 1,
                      ),
                    ),
                    Icon(
                      Icons.tag_sharp,
                    )
                  ],
                ),
              ),
            ),
            Text("TrailingIcon"),
          ],
        ),

否则，如果我们知道前缀和图标大小，我们可以使用LayoutBuilder。

- Yeasin Sheikh

---

嘿，谢谢你。我尝试了你的答案，但它看起来和我已经得到的一模一样。所以我在Dartpad上尝试了一下，似乎在那里运行得很好。我会接受这个答案，但我仍然不知道为什么它在我的代码库中无法工作。 - pxsanghyo

明白了，是因为我的“对齐方式”有问题。感谢您的帮助！ - pxsanghyo