Flutter中RotatedBox内文本无法保持水平居中问题求助

问题原因 #

RotatedBox是在原有布局约束下对子组件进行旋转，当窗口尺寸缩小，父容器（Column）的水平约束变化时，旋转后的组件无法自动适配新的居中需求——因为RotatedBox不会改变子组件的布局约束方向，只是视觉上旋转，导致布局计算仍基于原方向的尺寸。

修复方案 #

将RotatedBox替换为Transform.rotate，并配合Center组件确保旋转后的文本始终保持水平居中。同时调整容器布局，让组件在旋转前后都能正确响应父容器的约束变化：

Expanded(
  flex: 1,
  child: Padding(
    padding: const EdgeInsets.all(2.0),
    child: Center( // 添加Center确保旋转前的容器居中
      child: Transform.rotate(
        angle: pi / 2, // 等价于quarterTurns:1（90度）
        child: Visibility(
          visible: gearItems[index].isPacked,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(30.0),
            child: Container(
              color: const Color(0xFF2b8293),
              child: const Padding(
                padding: EdgeInsets.fromLTRB(4, 1, 4, 1),
                child: Text(
                  'PACKED',
                  style: TextStyle(
                      fontSize: 9,
                      fontWeight: FontWeight.bold,
                      letterSpacing: 2,
                      color: Color.fromARGB(255, 255, 255, 255)),
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  ),
),

关键调整点 #

• 用Transform.rotate替代RotatedBox：Transform是纯粹的视觉旋转，不会改变子组件的布局约束逻辑，配合Center可以确保旋转后的组件在父容器中始终居中。
• 移除多余的Align组件：Text本身默认是居中对齐，嵌套Align反而可能干扰布局。
• 外层添加Center：让旋转前的容器先在Expanded的空间内水平居中，旋转后自然保持水平居中状态。

备选方案（保留RotatedBox） #

如果必须使用RotatedBox，可给Column显式声明对齐方式，同时给RotatedBox的父容器添加宽度约束：

Expanded(
  flex: 1,
  child: Padding(
    padding: const EdgeInsets.all(2.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center, // 显式声明水平居中
      mainAxisAlignment: MainAxisAlignment.center, // 垂直方向也居中
      children: [
        SizedBox(
          width: double.infinity, // 让RotatedBox占满Column的宽度
          child: RotatedBox(
            quarterTurns: 1,
            child: Visibility(
              visible: gearItems[index].isPacked,
              child: Center( // 在RotatedBox内部添加Center
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(30.0),
                  child: Container(
                    color: const Color(0xFF2b8293),
                    child: const Padding(
                      padding: EdgeInsets.fromLTRB(4, 1, 4, 1),
                      child: Text(
                        'PACKED',
                        style: TextStyle(
                            fontSize: 9,
                            fontWeight: FontWeight.bold,
                            letterSpacing: 2,
                            color: Color.fromARGB(255, 255, 255, 255)),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        )
      ],
    ),
  ),
),

内容的提问来源于stack exchange，提问作者Ten Digit Grid