Flutter布局求助：如何实现文本与数字上下分层排列？

需求与现状 #

• 目标效果：文本“Waiting Approval”在上，数字“7”在下，垂直排列
• 当前问题：两者在同一行显示

修改后的代码 #

Container(
  height: 100,
  width: 900,
  alignment: Alignment.centerRight,
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.transparent,
      width: 1.0,
    ),
  ),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Text(
        'Waiting Approval',
        style: TextStyle(
          fontSize: 17,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),
      ),
      SizedBox(height: 4), // 可自定义上下文本间距
      Text(
        '7',
        style: TextStyle(
          fontSize: 17,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),
      ),
    ],
  ),
)

关键说明 #

• 用Column组件实现垂直布局，替代原有的单行Text
• mainAxisSize: MainAxisSize.min确保Column仅占用内容所需高度，避免撑满容器
• crossAxisAlignment: CrossAxisAlignment.center让两个文本水平居中对齐
• 移除了原代码中错误使用的Expanded（它仅能在Row/Column等布局组件内生效）
• 可通过调整SizedBox的height参数，自定义上下文本的间距

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