如何在Flutter的文本小部件中使用换行符

Question

如何在Flutter中显示多行文本？

Text("Text1\n Text2\n Text3",maxLines: 20, style: TextStyle(fontSize: 16.0 ,fontWeight:FontWeight.bold,color: Colors.black) , )

- Atmaram

Answer 1

方法一 使用三引号

      child: Container(
         child :  Text('''
                          Text1
                          Text2
                          Text3''',maxLines: 20, style: TextStyle(fontSize: 16.0 ,fontWeight:FontWeight.bold,color: Colors.black) , )
      ),

方法二 使用\n，以下是动态字符串的示例：

        var readLines = ['Test1', 'Test2', 'Test3'];
        String getNewLineString() {
           StringBuffer sb = new StringBuffer();
           for (String line in readLines) {
              sb.write(line + "\n");
           }
           return sb.toString();
        }


        child: Container(
           child: Text(
          getNewLineString(),
          maxLines: 20,
          style: TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.bold,
              color: Colors.black),
        )),

方法三：使用具有 \n 的静态文本

  Text('Welcome\nto\nMyWorld\nHello\nWorld\n');

如需了解更多信息，请参考此链接 https://api.dartlang.org/stable/2.5.0/dart-core/String-class.html

- Amit Prajapati

---

谢谢@Amit Prajapati，如果文本来自服务器响应，您知道如何实现相同的效果吗？使用上述格式的本地文本可以正常工作。 - Atmaram

你可能需要用 \n 替换空格 - Amit Prajapati

我在我的问题中提到了同样的(\n) .. 但它没有起作用。 - Atmaram

我检查了一下，它显示在新行中，你的意思是当你用空格分割并添加到变量中时，它不起作用吗？ - Amit Prajapati

服务器返回的换行符不起作用，但我在本地进行了修改，将换行符放在需要的位置，现在它可以正常工作了。谢谢。 - Atmaram

Answer 2

对我而言，从本地sqlite数据库获取文本中带有'\n'的数据时，这个方法可行：

    var message = await db.getDataFromDB();
    return Text(message.replaceAll('\\n', '\n'))

- Amarok

---

这适用于来自数据库、API、远程服务器的数据.. ;) 谢谢.. - ege men

Answer 3

如果您想在Flutter中与来自外部的字符串换行，您应该修改Flutter内部的字符串。 因此，如果您从API获取了一个字符串“Order received！\n Wait in the line！”并且换行符不起作用，那么您应该在Flutter内替换“\n”。

var response = await getMessageFromServer();
String message = getMessage(response);
return Text(message.replaceAll('\n', '\n'))

这样你就能看到在Flutter中'\n'的颜色与其他颜色的不同。

我更喜欢在API中使用'/n'，然后在Flutter中使用replace.all('/n', '\n')替换。

- Gjomesquita

---

你的代码对我无效。.replaceAll(r'\n', '\n') 有效。 - easeccy

replace.all('/n', '\n') 对我有用。谢谢。 - Serdar

Answer 4

我发现另外一个选择是使用 RichText 小部件，具体操作如下：

RichText(
  text: TextSpan(
    text: 'A line with a newline character\n',
    children: [
      TextSpan(
        text: 'A second line',
      ),
    ],
  ),
),

- esengineer

Answer 5

您可以通过将每一行文本用单独的引号(" ")括起来，在小部件中编写多行文本。 就像这样，看一下屏幕截图。

- Abdur Rehman

Answer 6

只需使用这个

Text('${userInfo.name}'
                        '\n${userInfo.email}'
                        '\n${userInfo.mobilenumber}',maxLines: 20, style: TextStyle(fontSize: 16.0 ,fontWeight:FontWeight.bold,color: Colors.black) , )

- Mhamudul Hasan Mridul