Flutter使用Transform.scale缩放水平ListView时尾部元素无法显示

问题根源 #

Transform.scale 仅会在绘制阶段对子组件进行缩放，不会修改子组件自身的布局占用尺寸，也不会改变子组件内部的滚动计算逻辑。
你给ListView外层套了2倍缩放，ListView本身的布局宽度还是和屏幕宽度一致，它的最大滚动偏移是按照「原始总item宽度 - ListView自身布局宽度」计算的。但缩放后，ListView在屏幕上的可视区域对应的原始内容宽度只有「屏幕宽度 / 缩放比例」，滚动到最大偏移时，右侧会有 (缩放比例 - 1) * 屏幕宽度 / 缩放比例 的原始内容无法滚动到可视区域，对应你场景下就是刚好4个item的宽度。

通用解决方案 #

方案1：给ListView添加末端padding（侵入性最低，适配任意缩放场景）

通过LayoutBuilder获取父容器宽度，计算需要补充的滚动偏移量，直接给ListView加对应padding即可，不需要修改其他业务逻辑：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final sideLength = 50.0;
    final scale = 2.0;

    return MaterialApp(
        scrollBehavior: MyCustomScrollBehavior(),
        home: Scaffold(
            body: Transform.scale(
          scale: scale,
          alignment: Alignment(-1, -1),
          child: Container(
              height: sideLength * scale,
              // 用LayoutBuilder获取父容器宽度
              child: LayoutBuilder(
                builder: (context, constraints) {
                  // 计算需要补充的右侧padding，垂直滚动替换为bottom即可
                  final extraPadding = (scale - 1) * constraints.maxWidth / scale;
                  return ListView.builder(
                    padding: EdgeInsets.only(right: extraPadding),
                    itemCount: 20,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (context, index) => Container(
                        width: sideLength,
                        height: sideLength,
                        child: Text(index.toString()),
                        decoration: BoxDecoration(
                            border: Border.all(width: 3, color: Colors.red))),
                  );
                },
              )),
        )));
  }
}

方案2：直接缩放组件尺寸替代Transform.scale（性能最优）

如果你的缩放是全局响应式适配逻辑，完全可以不用Transform变换，直接把所有组件尺寸乘以缩放比例，Flutter原生布局会自动计算正确的滚动范围，没有额外的绘制变换开销：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final sideLength = 50.0 * 2.0; // 直接缩放item尺寸
    return MaterialApp(
        scrollBehavior: MyCustomScrollBehavior(),
        home: Scaffold(
            body: Container(
              height: sideLength,
              // 移除外层Transform.scale
              child: ListView.builder(
                itemCount: 20,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) => Container(
                    width: sideLength,
                    height: sideLength,
                    child: Text(index.toString()),
                    decoration: BoxDecoration(
                        border: Border.all(width: 3, color: Colors.red))),
              ),
        )));
  }
}

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