如何换行？

Question

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

我尝试了“柔韧性”，“包裹”，但没有尝试过。我似乎无法正常工作。

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. |

这是您想要实现的理想UI吗？因此，从您的问题来看，很明显，您想要两个文本小部件一个接一个。

因此此代码将为您工作。像这样用Row小部件替换Column。如果要继续使用“行”，则每个文本都将换行，而不是一个接一个。这是工作代码。我已经输入了两个文本，向您展示它们是如何一个接一个地包装的。检出下面的图片以查看结果

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