Flutter问题：Flexible嵌套Column后组件完全消失

原正常代码 #

@override
Widget build(BuildContext context) {
  final messageTextGroup = Flexible(
      child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        padding: EdgeInsets.all(14),
        decoration: BoxDecoration(
          color: Colors.grey[900],
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(18),
            bottomLeft: Radius.circular(18),
            bottomRight: Radius.circular(18),
          ),
        ),
        child: Text(
          message.message,
          style: TextStyle(
              color: Colors.white, fontFamily: 'Monstserrat', fontSize: 14),
        ),
      ),
      CustomPaint(painter: Triangle(Colors.grey[900])),
    ],
  ));

  return Padding(
    padding: EdgeInsets.only(right: 18.0, left: 50, top: 5, bottom: 5),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        SizedBox(height: 30),
        messageTextGroup,
      ],
    ),
  );
}

修改后的问题代码 #

@override
Widget build(BuildContext context) {
  final messageTextGroup = Column(
    children: [
      Flexible(
          child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.all(14),
            decoration: BoxDecoration(
              color: Colors.grey[900],
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(18),
                bottomLeft: Radius.circular(18),
                bottomRight: Radius.circular(18),
              ),
            ),
            child: Text(
              message.message,
              style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'Monstserrat',
                  fontSize: 14),
            ),
          ),
          CustomPaint(painter: Triangle(Colors.grey[900])),
        ],
      )),
      //timeago text
      Padding(
        padding: const EdgeInsets.only(right: 8.0),
        child: Text(
          timeago.format(message.dateTime),
          style: TextStyle(
              color: Colors.grey[600],
              fontFamily: 'Monstserrat',
              fontSize: 10),
        ),
      ),
    ],
  );
}

问题原因 #

最直接的原因是修改后的build方法没有返回任何Widget。原代码最后通过return语句返回了包含消息气泡的Padding布局，但修改后的代码只定义了messageTextGroup变量，却没有将它作为返回值返回，导致build方法默认返回null，整个组件自然不会显示。

另外还有一个潜在布局问题：原代码中的Flexible是在水平布局的Row中使用，修改后把它放到垂直布局的Column里，Flexible会默认尝试占据垂直方向的剩余空间，可能导致气泡高度异常。

修复方案 #

1. 补全return语句，把messageTextGroup放回原有的Padding和Row结构中返回；
2. 给Column设置crossAxisAlignment: CrossAxisAlignment.end，让时间文本靠右对齐，符合消息气泡的排版逻辑；
3. 移除原Row中无用的SizedBox(height:30)（Row是水平布局，该SizedBox的height属性不会影响布局）；
4. 去掉包裹Row的Flexible，避免垂直方向的异常扩展。

修复后的完整代码：

@override
Widget build(BuildContext context) {
  final messageTextGroup = Column(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.all(14),
            decoration: BoxDecoration(
              color: Colors.grey[900],
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(18),
                bottomLeft: Radius.circular(18),
                bottomRight: Radius.circular(18),
              ),
            ),
            child: Text(
              message.message,
              style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'Monstserrat',
                  fontSize: 14),
            ),
          ),
          CustomPaint(painter: Triangle(Colors.grey[900])),
        ],
      ),
      //timeago text
      Padding(
        padding: const EdgeInsets.only(right: 8.0, top: 4),
        child: Text(
          timeago.format(message.dateTime),
          style: TextStyle(
              color: Colors.grey[600],
              fontFamily: 'Monstserrat',
              fontSize: 10),
        ),
      ),
    ],
  );

  return Padding(
    padding: EdgeInsets.only(right: 18.0, left: 50, top: 5, bottom: 5),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        messageTextGroup,
      ],
    ),
  );
}

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