如何设计一个在颤动中自动换行的文本小部件？

Question

我想设计一个自动换行的文本小部件，当文本长度超过最大值时它使用省略号。

下面的代码可以达到类似的效果。

Container(
  color: Colors.red,
  child: Text(
    'DENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATIONDENTIFICATION',
    overflow: TextOverflow.ellipsis,
    maxLines: 6,
  ),
),

但它必须指定maxLines，我不想要这个，我需要小部件根据父级的大小自动设置maxLines。

如何改进代码？

Answer 1

只需从您的代码中删除maxLines，您的父窗口小部件就会相应地处理它，假设传递给Text 的约束是有界的，例如在本例中，我使用SizedBox 和height: 100，并且输出正是你想要的：

编辑：

SizedBox(
  height: 100,
  child: Text(
    'DENTIFICATIOND...DENTIFICATIOND...DENTIFICATIOND...DENTIFICATIOND...DENTIFICATIOND...DENTIFICATIOND...DENTIFICATIOND...DENTIFICATIOND...DENTIFICATIOND...DENTIFICATIOND...',
    overflow: TextOverflow.ellipsis,
    maxLines: 1000, // you can freely use any value here
  ),
)

输出：

Answer 2

文本换行存在一些已知问题，特别是省略号（如果您未指定 maxLines）：Flexible text overflow ellipsis (softWrap false)

但是，您可以执行以下操作来根据父小部件确定 maxLines：

SizedBox(
  height: 40.0,
  child: LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      double fontSize = 16.0;
      return Text(
        "DENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIOND",
        style: TextStyle(fontSize: fontSize, height: 1.0),
        maxLines: constraints.maxHeight ~/ fontSize,
        overflow: TextOverflow.ellipsis,
      );
    },
  )

如果你知道父母的身高，你可以这样做：

double fontSize = 16.0;
double height = 40.0;

SizedBox(
  height: height,
  child: Text(
    "DENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIONDDENTIFICATIOND",
    style: TextStyle(fontSize: fontSize, height: 1.0),
    maxLines: parentHeight ~/ fontSize,
    overflow: TextOverflow.ellipsis,
  )

Answer 3

你可以试试这个方法：

@override
Widget build(BuildContext context) {
  String longText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum";
  double size = 100, fontSize = 16; 

  return Scaffold(
    appBar: AppBar(),
    body: Padding(
      padding: const EdgeInsets.all(20.0),
      child: SizedBox(
        height: size,
        child: Text(
          longText,
          style: TextStyle(fontSize: fontSize, height: 1),
          overflow: TextOverflow.ellipsis,
          maxLines: size ~/ fontSize,
        ),
      ),
    ),
  );
}

输出：