Flutter使用Markdown组件传入字符串时触发RenderBox布局报错如何解决？

问题原因 #

你遇到的报错和传入的Markdown字符串本身没有关系，是Flutter布局约束冲突导致的。
Markdown组件默认会尝试占满父组件提供的最大可用空间，而你将Markdown放在了Row容器内的无固定宽度的Container中，Row在水平方向不会给子组件传递明确的宽度边界，导致Markdown无法计算自身尺寸，最终触发RenderBox was not laid out的布局异常。

解决方案 #

按照你的布局需求选择对应方案即可：

• 如果需要Markdown占满Row的剩余水平空间：用Expanded组件包裹Markdown的父容器，同时给Markdown加上shrinkWrap: true属性让高度自适应内容
• 如果需要Markdown固定宽度：直接给包裹Markdown的Container设置固定width属性即可
• 如果不需要Markdown滚动展示：开启shrinkWrap: true后组件会根据内容自动调整自身尺寸，不需要额外嵌套滚动组件

修正后代码示例 #

class MarkdownTest extends StatelessWidget {
  final String markdownString = 'Hello!';

  @override
  Widget build(BuildContext context) {
    return Card(
      color: AppColors.background,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(10),
                    child: Markdown(
                      data: markdownString,
                      shrinkWrap: true,
                    ),
                  ),
                ),
                SizedBox(width: 10),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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