Flutter：在 Text Widget 中添加新行

Posted 2023-02-23

【中文标题】Flutter：在 Text Widget 中添加新行

【英文标题】：Flutter: Add a new line in Text Widget

【发布时间】：2022-01-01 10:12:35

【问题描述】：

我知道有很多这样的问题，但所有这些答案都没有帮助我。 我从我的 API 后端收到两个文本，当我显示它们时，一切正常，直到其中一个词太长。在那种情况下，我没有设法自动跳到新行。 这是我的代码的相关部分：

Text(
     item.brand + '\n' + item.model,
     style: const TextStyle(
     fontSize: 18,
     fontFamily: 'Avenir',
     fontWeight: FontWeight.bold),
     ),

有人可以帮帮我吗？非常感谢！

【问题讨论】：

您应该使用两个 Text 小部件或一个 RichText 小部件，而不是使用 "\n"

【参考方案1】：

如果我以正确的方式理解您的问题，您想在文本太长时跳到新行。在这种情况下，您必须将文本包装在具有定义大小的父小部件中，例如 SizedBox ：

const SizedBox(
  height: 200,
  width: 200,
  child: Text(
     item.brand + '\n' + item.model,
     style: const TextStyle(
     fontSize: 18,
     fontFamily: 'Avenir',
     fontWeight: FontWeight.bold),
     ))

文本现在会在超过 200 像素时跳转到新行

【讨论】：

感谢您的回答，但这对我不起作用，因为文本位于卡片小部件内。根据运行应用程序的手机，我需要不同的宽度。和 width: double.infinity 也不起作用，它显示一个错误。

【参考方案2】：

我不确定这是否能回答您的问题，但您可以尝试使用下面的这个小部件

Text.rich(TextSpan(
    text: "$item.brand\n",
    style: const TextStyle(
        fontSize: 18, fontFamily: 'Avenir', fontWeight: FontWeight.bold),
    children: [
      TextSpan(
        text: "$item.model",
        style: const TextStyle(
            fontSize: 18,
            fontFamily: 'Avenir',
            fontWeight: FontWeight.bold),
      ),
    ]));

在这个小部件中，您可以在文本中添加不同的样式，并且通过使用$ 运算符，您可以使用\n 打破界限。 或者您可以在您的 Text 小部件中执行此操作。

Text(
     "$item.brand\n$item.model",
     style: const TextStyle(
     fontSize: 18,
     fontFamily: 'Avenir',
     fontWeight: FontWeight.bold),
     ),

在 dart 中你可以使用 + 运算符来连接字符串，但这不是必需的

【参考方案3】：

试试下面的代码希望对你有帮助。

在 Column 中声明两个 Text 小部件：

 Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Your First Text', //just change your text like item.brand
          style: TextStyle(
            fontSize: 18,
            fontFamily: 'Avenir',
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          'Your Second Text', //just change your text like item.model
          style: TextStyle(
            fontSize: 18,
            fontFamily: 'Avenir',
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    ),

使用上述小部件的结果屏幕->

在 Text 小部件中也使用 \n

Text(
          'Your First Text' + '\n' + 'Your Second Text',
          style: TextStyle(
            fontSize: 18,
            fontFamily: 'Avenir',
            fontWeight: FontWeight.bold,
          ),
        ),