Flutter 行文本溢出

Question

我无法正确布局它。

我正在努力实现

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

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

但是 Flexible 与 FlexFit.loose 的行为类似于 Expanded 所以 SuffixIcon 被推到最后，即使TextGoesHere 是一个短文本。

我到目前为止

请帮忙。

Answer 1

如果您考虑 .. 来自 TextOverflow.ellipsis，到目前为止我已经了解了行。

color container just for visual

小工具

 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。