如何在Flutter中显示多行文本?
Text("Text1\n Text2\n Text3",maxLines: 20, style: TextStyle(fontSize: 16.0 ,fontWeight:FontWeight.bold,color: Colors.black) , )
如何在Flutter中显示多行文本?
Text("Text1\n Text2\n Text3",maxLines: 20, style: TextStyle(fontSize: 16.0 ,fontWeight:FontWeight.bold,color: Colors.black) , )
方法一 使用三引号
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
对我而言,从本地sqlite数据库获取文本中带有'\n'的数据时,这个方法可行:
var message = await db.getDataFromDB();
return Text(message.replaceAll('\\n', '\n'))
var response = await getMessageFromServer();
String message = getMessage(response);
return Text(message.replaceAll('\n', '\n'))
.replaceAll(r'\n', '\n')
有效。 - easeccy我发现另外一个选择是使用 RichText
小部件,具体操作如下:
RichText(
text: TextSpan(
text: 'A line with a newline character\n',
children: [
TextSpan(
text: 'A second line',
),
],
),
),
只需使用这个
Text('${userInfo.name}'
'\n${userInfo.email}'
'\n${userInfo.mobilenumber}',maxLines: 20, style: TextStyle(fontSize: 16.0 ,fontWeight:FontWeight.bold,color: Colors.black) , )