오른쪽으로 이동 두 줄의 텍스트가 넘칩니다

오른쪽으로 이동 두 줄의 텍스트가 넘칩니다

나는 한 줄에 두 개의 텍스트를 넣고 싶다. 다음을 수행합니다:

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의 길이가 다를 수 있음에도 불구하고 내가 기대하는 결과를 어떻게 구현할 수 있을까?

---

나의 요구사항은 조금 달랐다. 내 경우 첫 번째 텍스트는 일반적으로 최소 길이 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 속성에 대한 자세한 내용 ->

---

mainAxisAlignment: MainAxisAlignment.spaceBetween,

mainAxisAlignment.space 행 사이에 텍스트를 왼쪽과 오른쪽으로 정렬하는 간격을 둡니다.

---

문자열의 길이를 사용하여 의 계산된 값을 사용하여 각 문자열에서 사용 가능한 영역을 분할할 수 있습니다. 결과는 단일 공백이 아닌 글꼴에서 항상 최적인 것은 아니지만, 텍스트가 차지해야 하는 공간을 할당해야 합니다. 를 사용하여 남은 사용 가능한 공간을 채울 수 있지만, 너비 항목이 고정되어 있고 다른 항목에서 사용하는 경우에만 사용할 수 있습니다.

이 방법을 사용해 보십시오(빨간색과 에 너비를 설정하는 것은 데모용입니다):

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