颤动向右溢出一行中的两个文本

Question

我想在一行中放置 2 个文本。我执行以下操作：

Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
  Flexible(
      child: Text(text1,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          textAlign: TextAlign.left)),
  Flexible(
      child: Text(text2,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          textAlign: TextAlign.left)),
]),

这里我展示了预期的溢出结果和实际结果：

None 的Text 可以扩展超过Row 总长度的一半，即使有空闲space。尽管Text1和Text2的长度可能不同，如何实现我期望的结果？

Answer 1

mainAxisAlignment: MainAxisAlignment.spaceBetween,

为行添加 MainAxisAlignment.spaceBetween，它将在文本之间放置 space，使它们左右对齐。

Answer 2

您可以使用字符串的长度，使用 Flexible 中计算出的 flex 值来分割每个字符串的可用区域。对于非 monospaced 字体，结果并不总是最佳的，但是您必须以某种方式分配文本应该占用多少 space。你云使用 Expanded 来填充剩余的可用 space，但它只有在你有一个固定宽度的项目并在另一个项目上使用 Expanded 时才有效。

试试这个（在 Container 上设置宽度，红色仅用于演示）：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final text1 = 'Text111111111111111111';
    final text2 = 'Text222';

    return Container(
        width: 200,
        color: Colors.red,
        child: Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
          Flexible(
              flex: text1.length,
              child: Text(text1,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.left)),
          Flexible(
              flex: text2.length,
              child: Text(text2,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.left)),
        ]));
  }
}

颤动向右溢出一行中的两个文本

Flutter right overflow two texts in row

flutter

dart

text

row

overflow