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

【问题标题】：Flutter right overflow two texts in row颤动向右溢出一行中的两个文本
【发布时间】：2022-12-20 02:57:14
【问题描述】：

我想在一行中放置 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 的长度可能不同？

【问题讨论】：

标签： flutter dart text row overflow

【解决方案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)),
        ]));
  }
}

【讨论】：

【解决方案2】：

mainAxisAlignment: MainAxisAlignment.spaceBetween,

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

【讨论】：

【解决方案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(1, 1);
  } 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();

  if (text1LengthPercent < minText1LengthPercent) {
    // when text1LengthPercent < minText1LengthPercent,
    // make transport name widget inflexible and other one flexible
    return const Pair(0, 1);
    // when text1LengthPercent > maxText1LengthPercent,
    // make transport name 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

【讨论】：