Flutter中向Container添加Column子组件无显示问题的解决方法

你的代码中RichText组件的TextSpan未指定文本样式，导致文字无法正常显示。RichText不会像Text组件那样自动继承上下文的默认文本样式，当TextSpan的style为null时，文字颜色可能和页面背景色一致（比如默认Scaffold背景为白色，TextSpan默认颜色也匹配背景），因此看起来屏幕无内容。

修复方法 #

方法1：继承上下文默认样式 #

通过DefaultTextStyle.of(context).style让TextSpan继承当前页面的文本样式：

return Container(
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RichText(
          text: TextSpan(
            style: DefaultTextStyle.of(context).style,
            children: [
              TextSpan(text: "Text 2"),
            ],
          ),
        ),
      ],
    ),
  ),
);

方法2：自定义文本样式 #

如果需要个性化样式，直接给TextSpan设置style属性：

return Container(
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RichText(
          text: TextSpan(
            text: "Text 2",
            style: TextStyle(
              color: Colors.black,
              fontSize: 16,
            ),
          ),
        ),
      ],
    ),
  ),
);

补充说明 #

如果只是显示普通文本，完全可以用Text组件替代RichText，它会自动处理样式继承，代码更简洁：

return Container(
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("Text 2"),
      ],
    ),
  ),
);

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