Flutter-在溢出时自动换行，例如插入省略号或淡入淡出

我正在尝试创建一行，其中中心文本具有最大大小，并且如果文本内容太大，则该文本适合大小。

我插入TextOverflow.ellipsis属性以缩短文本并插入三点，...但是它不起作用。

主镖

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

结果：

预期：

您应该将其包裹在Container中，Flexible以Row告知您可以使其Container宽度小于其固有宽度。Expanded也可以。

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

使用省略号

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

您可以使用此代码段以省略号显示文本

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

你可以那样做

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

首先，将您的Row或包装Column在Flexible或Expanded小部件中，然后

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

包装其子元素在行或列中的包装，请包装您的列或行是新的Flexible（）;

https://github.com/flutter/flutter/issues/4128

一种解决文本小部件在一行内溢出的方法，例如，聊天消息可能是很长的一行。您可以创建一个容器和其中包含maxWidth的BoxConstraint。

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

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

只需将其包裹在一个小部件中即可，该小部件可以采用特定的宽度才能工作，否则它将采用父容器的宽度。

我认为父容器需要被赋予适当大小的maxWidth。看起来“文本”框将填充上面给出的任何空间。

根据您的情况，我认为这是下面的最佳方法。

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

如果仅将文本作为一列的子项放置，这是使文本自动换行的最简单方法。假设您没有进行任何更复杂的操作。在这种情况下，我认为您将创建自己认为合适的容器大小，并在其中放置另一列，然后输入文本。这似乎很好。容器要缩小到其内容的大小，这似乎与包装自然冲突，这需要更多的努力。

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

有很多答案，但是会更多地观察它。

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

输出：

尝试：

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

这将显示OVER FLOW。如果有溢出，将对其进行处理。