flutter中的省略号未按预期工作

Question

**以下是示例代码，当文本达到最大可用空间时，我看不到末尾的省略号。它将文本长度限制为一行。我需要的文本采取的全部可用空间，并在结束时，它应该显示省略号没有裁剪。请让我知道你的建议。

提前感谢。**

    import 'package:flutter/material.dart';

    class Single extends StatefulWidget {
    @override
    _SingleState createState() => _SingleState();
    }

   class _SingleState extends State<Single> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Material(
          child: new Column(
        children: <Widget>[
          Text(
            "test",
          ),
          Container(
              height: 80,
              child: new Text('Title',
                  style: new TextStyle(fontWeight: FontWeight.bold))),
          Expanded(
            child: Text(
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* 'Sometimes an article modifies a noun that is also modified by an adjective. The usual wordSometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference: order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference: Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:',
*/
              overflow: TextOverflow.ellipsis,
              softWrap: true,
            ),
          ),
          Container(
            height: 52,
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "12 comments",
                    style: TextStyle(
                      color: Color.fromRGBO(65, 64, 64, 1),
                      fontWeight: FontWeight.normal,
                      fontSize: 16,
                    ),
                  ),
                  Text(
                    "22 likes",
                    style: TextStyle(
                      color: Color.fromRGBO(65, 64, 64, 1),
                      fontWeight: FontWeight.normal,
                      fontSize: 16,
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: const <Widget>[
                      Icon(
                        Icons.favorite,
                        color: Colors.pink,
                        size: 24.0,
                        semanticLabel:
                            'Text to announce in accessibility modes',
                      ),
                      Icon(
                        Icons.audiotrack,
                        color: Colors.green,
                        size: 24.0,
                      ),
                      Icon(
                        Icons.beach_access,
                        color: Colors.blue,
                        size: 24.0,
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        ],
      )),
    );
  }
}

Answer 1

已更新

这不是一件容易的事。我们必须为包装Text小部件的Expanded小部件分配一个GlobalKey，这样我们就可以在绘制之后确定它的高度。然后，我们必须更新maxLines属性并重新构建。通过将小部件高度除以字体大小来计算行数。

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class Single extends StatefulWidget {
  @override
  _SingleState createState() => _SingleState();
}

class _SingleState extends State<Single> {
  final _key = GlobalKey();
  int numLines = 1;

  @override
  void initState() {
    SchedulerBinding.instance.addPostFrameCallback((_) {
      setState(() {
        numLines = _key.currentContext.size.height ~/
            (Theme.of(context).textTheme.bodyText1.fontSize + 3);
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Material(
          child: new Column(
        children: <Widget>[
          Text(
            "test",
          ),
          Container(
              height: 80,
              child: new Text('Title',
                  style: new TextStyle(fontWeight: FontWeight.bold))),
          Expanded(
            key: _key,
            child: Text(
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* 'Sometimes an article modifies a noun that is also modified by an adjective. The usual wordSometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference: order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference: Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:',
*/
              overflow: TextOverflow.ellipsis,
              softWrap: true,
              maxLines: numLines,
            ),
          ),
          Container(
            height: 52,
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "12 comments",
                    style: TextStyle(
                      color: Color.fromRGBO(65, 64, 64, 1),
                      fontWeight: FontWeight.normal,
                      fontSize: 16,
                    ),
                  ),
                  Text(
                    "22 likes",
                    style: TextStyle(
                      color: Color.fromRGBO(65, 64, 64, 1),
                      fontWeight: FontWeight.normal,
                      fontSize: 16,
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: const <Widget>[
                      Icon(
                        Icons.favorite,
                        color: Colors.pink,
                        size: 24.0,
                        semanticLabel:
                            'Text to announce in accessibility modes',
                      ),
                      Icon(
                        Icons.audiotrack,
                        color: Colors.green,
                        size: 24.0,
                      ),
                      Icon(
                        Icons.beach_access,
                        color: Colors.blue,
                        size: 24.0,
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        ],
      )),
    );
  }
}

Answer 2

我认为，Text小部件既不可能占据列中的整个空间，也不可能支持省略号。因为，ellipsis属性将根据需要显示的行在逻辑上工作。这将告诉小部件ellipsis属性的确切应用位置。

当maxLines为1时，将在第一行的末尾应用

，或者当maxLines为5时，将在第5行的末尾应用ellipsis，依此类推。

如果希望Text小部件占据Column中的整个空间(有问题的是剩余空间)，则应该删除overflow属性。在这种情况下，您将不具有 ellipsis 属性，并且某些文本对用户是不可见的。

因此，在上面的方法中，您可以将Text包装在SingleChildScrollView中，以使您的文本可滚动并可以占据整个空间。但如果文本很短，中间可能会有一些空格。

如果你真的想要ellipsis属性，那么就去@Lee3提到的maxLines字段。

这就是代码片段的外观，

Expanded(
        child: SingleChildScrollView(
      child: Text(
        ' <-- Your Long Text here -->',
        softWrap: true,
      ),
    )),

如果有任何疑问，请让我知道。。