Flutter-줄임표 삽입 또는 페이드와 같이 오버플로시 텍스트 줄 바꿈


121

가운데 텍스트가 최대 크기 인 줄을 만들려고합니다. 텍스트 내용이 너무 크면 크기에 맞습니다.

TextOverflow.ellipsis속성을 삽입하여 텍스트를 줄이고 트리플 포인트를 삽입 ...했지만 작동하지 않습니다.

main.dart

import 'package:flutter/material.dart';

void main() {
runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new Card(
          child: new Container(
            padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
            child: new Row(
              children: <Widget>[
                new Container(
                  padding: new EdgeInsets.only(right: 24.0),
                  child: new CircleAvatar(
                    backgroundColor: new Color(0xFFF5F5F5),
                    radius: 16.0,
                  )
                ),
                new Container(
                  padding: new EdgeInsets.only(right: 13.0),
                  child: new Text(
                    'Text lar...',
                    overflow: TextOverflow.ellipsis,
                    style: new TextStyle(
                      fontSize: 13.0,
                      fontFamily: 'Roboto',
                      color: new Color(0xFF212121),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Container(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Bill  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            '\$ -999.999.999,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF212121)
                            ),
                          ),
                        ],
                      ),
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Limit  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            'R\$ 900.000.000,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                        ],
                      ),
                    ]
                  )
                )
              ],
            ),
          )
        ),
      ]
    )
  );
}

결과:

여기에 이미지 설명 입력

예상 :

여기에 이미지 설명 입력

답변:


250

기본 너비보다 좁아도 괜찮다 ContainerFlexible것을 알리기 위해 a 로 감싸 야합니다 .RowContainerExpanded또한 작동합니다.

스크린 샷

Flexible(
  child: new Container(
    padding: new EdgeInsets.only(right: 13.0),
    child: new Text(
      'Text largeeeeeeeeeeeeeeeeeeeeeee',
      overflow: TextOverflow.ellipsis,
      style: new TextStyle(
        fontSize: 13.0,
        fontFamily: 'Roboto',
        color: new Color(0xFF212121),
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
),

1
Column에 비슷한 문제가 있습니다. 이 접근 방식은 저에게 효과가 없습니다. stackoverflow.com/questions/52206221/…
Michael Tedla

이것을 텍스트 필드에 구현할 수있는 방법이 있습니까?
mangkool jul.

wrap_content 텍스트도 FlexFit.loose로 맞춤 속성을 지정하도록하려면
martinseal1987

108

줄임표 사용

Text(
  "This is a long text",
  overflow: TextOverflow.ellipsis,
),

여기에 이미지 설명 입력


페이드 사용

Text(
  "This is a long text",
  overflow: TextOverflow.fade,
  maxLines: 1,
  softWrap: false,
),

여기에 이미지 설명 입력


클립 사용

Text(
  "This is a long text",
  overflow: TextOverflow.clip,
  maxLines: 1,
  softWrap: false,
),

여기에 이미지 설명 입력


노트 :

Text내부 를 사용 하는 경우 다음과 Row같이 Text내부에 넣을 수 있습니다 Expanded.

Expanded(
  child: AboveText(),
)

텍스트 오버 플로우가 다음 평평한 버튼을 추가 할 때 내가 추가 할 수 있습니다 같은 ... 더 링크
mr.hir

@ mr.hir 이해하지 못해서 죄송합니다.
CopsOnRoad

행 중앙에 텍스트와 다른 위젯 (예 : 아이콘)이있는 경우에는 작동하지 않습니다.
Lukasz Ciastko

softWrap: false바로 내가 필요로하는 것입니다. 감사합니다!
coldembrace

예를 들어, 텍스트가 넘쳐나는 새 페이지를 추가하려면 어떻게해야합니까?
Nithin Sai

22

이 코드를 사용하여 줄임표가있는 텍스트를 표시 할 수 있습니다.

Text(
    "Introduction to Very very very long text",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    softWrap: false,
    style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),

11
또한이 코드에 대한 설명을 포함하여 질문에 대한 답변을 설명하십시오.
jkdev 2018

14

그렇게 할 수 있습니다

Expanded(
   child: Text(
   'Text',
   overflow: TextOverflow.ellipsis,
   maxLines: 1
   )
)

8

첫째, 당신의 포장 Row또는 ColumnA의 Flexible또는 Expanded위젯 다음

Text(
    'your long text here',
    overflow: TextOverflow.fade,
    maxLines: 1,
    softWrap: false,
    style: Theme.of(context).textTheme.body1,
)

예, 이것이 올바른 방법입니다. 먼저 Expanded 내부의 기둥을 감싸는 것이 실제로 효과가있었습니다! 열 자식 내부의 텍스트를 사용합니다.
ArifMustafa


4

예를 들어 채팅 메시지가 하나의 정말 긴 줄일 수있는 경우 행 내에서 텍스트 위젯의 오버플로를 수정하는 한 가지 방법입니다. maxWidth가 포함 된 Container 및 BoxConstraint를 만들 수 있습니다.

            Container(
              constraints: BoxConstraints(maxWidth: 200),
                child: Text(
                  (chatName == null) ? " ": chatName,
                  style: TextStyle(
                      fontWeight: FontWeight.w400,
                      color: Colors.black87,
                      fontSize: 17.0),
                )
            ),

감사합니다
aida

3
SizedBox(
    width: 200.0,
    child: Text('PRODUCERS CAVITY FIGHTER 50X140g',
                overflow: TextOverflow.ellipsis,
                style: Theme.of(context).textTheme.body2))

작동하기 위해 특정 너비를 취할 수있는 위젯 내부로 감싸거나 부모 컨테이너의 너비를 가정합니다.


0

부모 컨테이너에 적절한 크기의 maxWidth를 부여해야한다고 생각합니다. 텍스트 상자가 위에 주어진 공간을 채우는 것처럼 보입니다.


0

귀하의 상황에 따라 이것이 가장 좋은 방법이라고 생각합니다.

final maxWidth = MediaQuery.of(context).size.width * 0.4;
Container(
        textAlign: TextAlign.center),
        child: Text('This is long text',
        constraints: BoxConstraints(maxWidth: maxWidth),
),

0

단순히 텍스트를 열의 자식으로 배치하는 경우 텍스트를 자동으로 줄 바꿈하는 가장 쉬운 방법입니다. 더 복잡한 것이 없다고 가정합니다. 이 경우에는 크기가 맞는 컨테이너를 만들고 내부에 다른 열을 넣은 다음 텍스트를 넣을 것이라고 생각합니다. 이것은 잘 작동하는 것 같습니다. 컨테이너는 내용물의 크기로 축소되기를 원하는데, 이는 더 많은 노력이 필요한 포장과 자연스럽게 충돌하는 것처럼 보입니다.

Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text('This long text will wrap very nicely if there isn't room beyond the column\'s total width and if you have enough vertical space available to wrap into.',
      style: TextStyle(fontSize: 16, color: primaryColor),
      textAlign: TextAlign.center,),
  ],
),

0

많은 답변이 있지만 좀 더 관찰하겠습니다.

1. 클립

넘쳐나는 텍스트를 잘라내어 컨테이너를 수정합니다.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.clip,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

산출:

여기에 이미지 설명 입력

2. 페이드

넘치는 텍스트를 투명하게 페이드합니다.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.fade,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ), 

산출:

여기에 이미지 설명 입력

3. 줄임표

줄임표를 사용하여 텍스트가 넘 쳤음을 나타냅니다.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

산출:

여기에 이미지 설명 입력

4. 보이는

컨테이너 외부에 넘치는 텍스트를 렌더링합니다.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.visible,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

산출:

여기에 이미지 설명 입력


-3

시험:

 Expanded(
  child: Container(
      child: Text('OVER FLOW TEST TEXTTTT',
          overflow: TextOverflow.fade)),
),

이 표시 OVER FLOW됩니다. 오버플로가 있으면 처리됩니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.