Flutter横向ListView缩放后显示被截断 无法展示全部可视区域元素

问题根因 #

Flutter中的transform属性仅在绘制阶段对组件做视觉变换，不会改变组件在布局阶段占用的空间尺寸。
你当前的写法中，外层Container布局时的宽度默认撑满设备屏幕原始宽度，内部的ListView计算可展示区域时，会直接使用父容器的原始宽度来计算可渲染的列表项数量。你将整体缩放到80%之后，视觉上屏幕可容纳的列表项数量变多，但ListView的布局逻辑仍以原始屏幕宽度为准，因此就出现了后面的列表项被截断的问题。

修复方案 #

给外层Container主动设置宽度为「屏幕宽度 / 缩放比例」，这样经过transform缩放后，视觉上刚好撑满屏幕宽度，同时ListView布局阶段能拿到更大的可用宽度，足以布局足够多的列表项填满视觉可见区域。

修复后完整代码 #

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  static const actualTotalItems = 40;
  static const sideLength = 50.0;
  static const scale = .8;

  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      scrollBehavior: MyCustomScrollBehavior(),
      home: Scaffold(
        body: LayoutBuilder(
          builder: (context, constraints) {
            // 获取当前父容器可用宽度，此处即为屏幕宽度
            final screenWidth = constraints.maxWidth;
            return Container(
              transform: Matrix4.diagonal3Values(scale, scale, 1),
              // 主动设置布局宽度，缩放后刚好撑满屏幕可视区域
              width: screenWidth / scale,
              height: sideLength,
              child: ListView.builder(
                itemCount: actualTotalItems,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) => Container(
                  width: sideLength,
                  height: sideLength,
                  alignment: Alignment.center,
                  child: Text(index.toString()),
                  decoration: BoxDecoration(
                    border: Border.all(width: 3, color: Colors.red),
                  ),
                ),
              ),
            );
          }
        ),
      ),
    );
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}

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