将Markdown包裹在SingleChildScrollView导致Flutter布局异常的解决方法

你遇到的布局异常，本质是flutter_markdown库中的Markdown组件内部默认集成了滚动容器（类似ListView），当将其嵌套进SingleChildScrollView时，两个滚动组件都无法确定自身高度，触发布局约束冲突。以下是两种可行的解决方案：

方案一：使用MarkdownBody替代Markdown组件 #

MarkdownBody仅负责渲染Markdown内容，不自带滚动逻辑，能直接适配SingleChildScrollView的高度计算需求。

修改makeMarkdown函数如下：

Widget makeMarkdown(BuildContext context) {
  Widget child = MarkdownBody(
    data: """Markdown
* First item
* Second item
* Third item

1. First item
1. Second item
1. Third item
""",
  );
  return child;
}

方案二：调整Markdown组件的参数 #

如果必须使用Markdown组件，可通过以下参数配置让它适配外层滚动容器：

• shrinkWrap: true：让组件根据内容高度收缩，而非占用无限空间
• physics: NeverScrollableScrollPhysics()：禁用组件自身的滚动逻辑，交给外层SingleChildScrollView处理

修改后的makeMarkdown函数：

Widget makeMarkdown(BuildContext context) {
  Widget child = Markdown(
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),
    data: """Markdown
* First item
* Second item
* Third item

1. First item
1. Second item
1. Third item
""",
  );
  return child;
}

两种方案都能解决布局异常问题，且无需固定高度，适配内容动态变化的场景。

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