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

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)),
]),

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

即使有可用空间，任何文本都不能扩展超过行总长度的一半。尽管 Text1 和 Text2 的长度可能不同，如何实现我期望的结果？

Answer 1

您可以使用 Flexible 中计算的 flex 值，根据字符串的长度来分割每个字符串可用的区域。对于非等宽字体，结果并不总是最佳的，但不知何故，您必须指定文本应占用多少空间。您可以使用 Expanded 来填充剩余的可用空间，但只有当您有一个固定宽度的项目并在另一个项目上使用 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)),
        ]));
  }
}

Answer 2

mainAxisAlignment: MainAxisAlignment.spaceBetween,

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

Answer 3

我的要求有点不同。就我而言，第一个文本是标签，通常要求最小长度为 30，最大长度为 50（以百分比表示）。因此创建了一种根据文本长度计算弹性因子的方法。您可以根据需要更改此阈值。

Pair<int, int> getTextRowFlexFactor(String? text1, String? text2) {
  /**
   * if flex == 0 -> the child is inflexible and determines its own size
   * if flex == 1 -> the amount of space the child's can occupy in the main axis is determined by dividing
   * the free space (after placing the inflexible children) according to the flex factors of the flexible children.
   */
  if (isNullOrEmpty(text1) && isNullOrEmpty(text2)) {
    return const Pair(0, 0);
  } else if (isNullOrEmpty(text1)) {
    return const Pair(0, 1);
  } else if (isNullOrEmpty(text2)) {
    return const Pair(1, 0);
  }

  const minText1LengthPercent = 30;
  const maxText1LengthPercent = 50;

  final text1Length = text1!.length;
  final text2Length = text2!.length;

  final text1LengthPercent = ((text1Length / text2Length) * 100).toInt();

  // when text1LengthPercent < minText1LengthPercent,
  // make text1 widget inflexible and other one flexible
  if (text1LengthPercent < minText1LengthPercent) {
    return const Pair(0, 1);
  } 
  // when text1LengthPercent > maxText1LengthPercent,
  // make text1 widget flexible and other one inflexible
  else if (text1LengthPercent > maxText1LengthPercent) {
    return const Pair(1, 0);
  }
  return const Pair(1, 1);
}

final textRowFlexFactor = getTextRowFlexFactor(text1, text2);

return  Row(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Flexible(
        flex: textRowFlexFactor.left, 
        child:Text(
          text1,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        )),
    Flexible(
        flex: textRowFlexFactor.right,
        child: Text(
          text2,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        )),
  ],
);

要了解有关 flex 属性的更多信息 -> https://api.flutter.dev/flutter/widgets/Flexible/flex。 html