1

假设我有以下文本

RichText(
    maxLines: 10,
    softWrap: true,
    text: TextSpan(
        children: [
            TextSpan(
                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar nisi ullamcorper bibendum tempor. Nam a leo commodo lorem pellentesque condimentum. In odio diam, porttitor ac porttitor at, iaculis elementum ipsum. Integer quis nibh et nulla gravida iaculis in eget elit. Integer mattis pretium bibendum. Pellentesque bibendum scelerisque erat. Phasellus vitae sapien diam. Quisque aliquet iaculis elit sit amet luctus. Donec tortor nisl, pulvinar ultrices mi in, ullamcorper luctus odio. Integer viverra magna quis tortor malesuada, vitae porta purus efficitur. Curabitur mollis cursus eros eget posuere.',
                style: TextStyle(
                    color: Colors.white,
                    backgroundColor: Colors.teal,
                    fontSize: 20,
                ),
            ),
        ]),
    )

这呈现以下

在此处输入图像描述

这个长文本溢出屏幕。我想要的是，如果空间用完，文本会在新行上继续。我怎样才能做到这一点？在“文本”属性中设置新行不是一种选择（考虑不同的屏幕尺寸或不同的语言等）

4

3 回答 3

1

将 RichText 包装在 Expanded/Flexible 中。

注意：请记住，Flexible 和 Expanded 只能在 Column、Row 或 Flex 中使用。

Container(
  child: Row(
    children: [
      Flexible(
        child: RichText(
          maxLines: 10,
          softWrap: true,
          text: TextSpan(
            children: [
              TextSpan(
                text:
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar nisi ullamcorper bibendum tempor. Nam a leo commodo lorem pellentesque condimentum. In odio diam, porttitor ac porttitor at, iaculis elementum ipsum. Integer quis nibh et nulla gravida iaculis in eget elit. Integer mattis pretium bibendum. Pellentesque bibendum scelerisque erat. Phasellus vitae sapien diam. Quisque aliquet iaculis elit sit amet luctus. Donec tortor nisl, pulvinar ultrices mi in, ullamcorper luctus odio. Integer viverra magna quis tortor malesuada, vitae porta purus efficitur. Curabitur mollis cursus eros eget posuere.',
                style: TextStyle(
                  color: Colors.white,
                  backgroundColor: Colors.teal,
                  fontSize: 20,
                ),
              ),
            ],
          ),
        ),
      )
    ],
  ),
);
于 2021-05-08T17:14:02.153 回答
0

给你：\n在你的文本之间使用，把它分开。

\n换行并使下一个文本跳到下一行。

例子：

Lorem ipsum dolor sit amet, \n consectetur adipiscing elit. \n Nulla pulvinar nisi ullamcorper bibendum tempor.

将被编译为：

Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.
Nulla pulvinar nisi ullamcorper bibendum tempor.
于 2021-05-08T14:04:39.893 回答
0

使用扩展小部件

Expanded(
    child: RichText(
  maxLines: 10,
  softWrap: true,
  text: TextSpan(children: [
    TextSpan(
      text:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar nisi ullamcorper bibendum tempor. Nam a leo commodo lorem pellentesque condimentum. In odio diam, porttitor ac porttitor at, iaculis elementum ipsum. Integer quis nibh et nulla gravida iaculis in eget elit. Integer mattis pretium bibendum. Pellentesque bibendum scelerisque erat. Phasellus vitae sapien diam. Quisque aliquet iaculis elit sit amet luctus. Donec tortor nisl, pulvinar ultrices mi in, ullamcorper luctus odio. Integer viverra magna quis tortor malesuada, vitae porta purus efficitur. Curabitur mollis cursus eros eget posuere.',
      style: TextStyle(
        color: Colors.white,
        backgroundColor: Colors.teal,
        fontSize: 20,
      ),
    ),
  ]),
));

它对我有用

于 2021-11-24T11:49:14.123 回答