Flutter中如何处理TextField换行以适配Markdown显示

1. 你输入的换行符是什么？ #

Shift+Enter在Flutter TextField中输入的是换行符LF（Line Feed），对应ASCII码10，字符表示为\n。你可以通过打印text.codeUnits来确认，对应位置的数值会是10。

2. 如何让flutter_markdown识别换行？ #

Markdown原生规则里，单个\n不会被解析为换行，只有两个空格加\n，或者段落间空一行，才会显示换行效果；另外也可以用HTML的<br>标签强制换行。

给你两种实用的转换方式：

方式一：转为Markdown原生换行格式 #

把文本中的单个\n替换成 \n（两个空格加换行），代码示例：

var text = textController.text;
// 替换单个换行符为Markdown可识别的换行
String markdownText = text.replaceAll('\n', '  \n');
// 传入MarkdownBody展示
MarkdownBody(data: markdownText);

方式二：用HTML换行标签替换 #

直接把\n替换成<br>，flutter_markdown默认支持HTML标签，代码示例：

var text = textController.text;
String markdownText = text.replaceAll('\n', '<br>');
MarkdownBody(data: markdownText);

如果你的flutter_markdown禁用了HTML支持，可通过配置extensionSet开启：

MarkdownBody(
  data: markdownText,
  extensionSet: MarkdownExtensionSet.gitHubFlavored,
)

内容的提问来源于stack exchange，提问作者progNewbie