Flutter中ListWheelScrollView顶部留白及位置偏移问题求助

开发者阿泽

2026-7-11

解决ListWheelScrollView顶格显示及顶部留白问题

问题根源

嵌套RotatedBox后，坐标系发生旋转，MediaQuery.removePadding的removeTop参数不再对应视觉上的顶部方向
父级容器未设置对齐规则，内容默认居中排布
旋转后的布局逻辑未适配原有的padding移除策略

修复方案

调整MediaQuery.removePadding的参数：旋转-1/4圈后，原视觉顶部对应旋转坐标系的左侧，改用removeLeft移除对应方向padding，同时保留removeTop做兼容
给父级Container设置alignment: Alignment.topLeft，强制内容顶格对齐
优化容器布局参数，避免默认居中逻辑影响

修改后的完整代码

return Scaffold(
  body: Container(
    alignment: Alignment.topLeft, // 强制内容顶格
    child: RotatedBox(
      quarterTurns: -1,
      child: MediaQuery.removePadding(
        context: context,
        removeLeft: true, // 适配旋转后的顶部方向
        removeTop: true,
        child: ListWheelScrollView(
          magnification: 2.0,
          onSelectedItemChanged: (x) {
            setState(() {
              selected = x;
            });
            print(selected);
          },
          controller: _scrollController,
          children: List.generate(
            itemCount,
            (x) => RotatedBox(
              quarterTurns: 1,
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 400),
                width: x == selected ? 70 : 60,
                height: x == selected ? 80 : 70,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: x == selected
                      ? const Color.fromRGBO(249, 220, 222, 1)
                      : Colors.transparent,
                  borderRadius: BorderRadius.circular(15),
                ),
                child: Text('week \n \n   $x'),
              ),
            ),
          ),
          itemExtent: itemWidth,
        ),
      ),
    ),
  ),
);