如何换行一行文本？

Question

我在一个 Row 中有两个 Text 小部件。我想一个接一个地显示文本小部件，如果它不适合第一行，则将第二个小部件换行到下一行。

我尝试过 Flexible、Wrap 等等。我似乎无法让它工作。

Row(
    children: <Widget>[
        Text('This is some text.'),
        Text('Another piece of text.')
    ]
);

我希望输出看起来像这样（屏幕边缘由 | 表示）：

|This is some text. Another |
|piece of text.             |

我能得到的最好的结果如下：

|This is some  Another piece|
|text.         of text.     |

编辑：谢谢大家的回复。我也尝试过 RichText，它可以工作，但我想将多个手势绑定到每个 TextSpan 元素，而使用 RichText 无法轻松做到这一点。我即将为此创建一个问题，但 stackoverflow 不允许我在 90 分钟内创建一个以上的问题。

Answer 1

更新答案

您做错的第一件事是使用 Row 将一个文本小部件放在另一个文本下。

|This is some text. Another | |piece of text. |

这是您想要实现的用户界面，对吗？所以从你的问题来看，很明显你想要两个文本小部件一个在另一个之下。

所以这段代码对你有用。像这样用Column 小部件替换Row。如果您想继续使用 Row，您的每个文本都会换行，但不会一个接一个地换行。这是工作代码。我已经放了两个文本来向您展示它们是如何一个接一个地包装的。查看下图查看结果

body: Center(
    child: Container(
      color: Colors.amberAccent,
      width: 200,
      height: 200,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Flexible(
              fit: FlexFit.tight,
              child: Text(
                'This is some text.long text more long Text, even more long text',
                style: TextStyle(color: Colors.white, fontSize: 20.0),
              ),
            ),
            Flexible(
              fit: FlexFit.tight,
              child: Text(
                'Another piece of text.not so long text yet needs to be a liitle long text',
                style: TextStyle(color: Colors.white, fontSize: 20.0),
              ),
            )
          ],
        ),
      ),
    ),
  ),

这里是截图

Answer 2

请尝试以下代码：-

Expanded(
          child: Wrap(
            direction: Axis.horizontal,
            runAlignment: WrapAlignment.start,
            children: <Widget>[
              Text('This is some text.'),
              Text('Another piece of text.')
            ],
          ),
          flex: 1,
        ),

Answer 3

您可以使用 RichText 小部件来实现：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.grey,
    appBar: AppBar(),
    body: RichText(
      text: TextSpan(
        children: [
          TextSpan(text: "This is some text."),
          TextSpan(text: "Another piece of text. Another piece of text. Another piece of text. Another piece of text."),
        ],
      ),
    ),
  );
}

RichText 小部件显示使用多种不同样式的文本。 使用 TextSpan 对象树描述要显示的文本， 每个都有一个用于该子树的关联样式。 文本可能跨越多行或可能全部显示 根据布局约束在同一行。

RichText