如何在多个Widget中渲染图片并限制单Widget高度不超120px？

要实现像你CSS示例中那样把一张图片拆分成多个固定高度的区域，分别用Image Widget显示并放入Column，可以通过裁剪+图片偏移的组合来实现，以下是两种可行方案：

方案1：固定拆分（已知图片尺寸） #

如果已经知道图片的具体尺寸，比如示例中图片高240px、宽240px，要拆成两个120px的块：

Column(
  children: [
    // 显示图片上半部分
    ClipRect(
      child: SizedBox(
        width: 240,
        height: 120,
        child: Align(
          alignment: Alignment.topCenter,
          heightFactor: 0.5, // 仅显示图片上半段（垂直压缩为原高度的50%）
          child: Image.asset('assets/cat.jpeg'),
        ),
      ),
    ),
    // 显示图片下半部分
    ClipRect(
      child: SizedBox(
        width: 240,
        height: 120,
        child: Align(
          alignment: Alignment.bottomCenter,
          heightFactor: 0.5, // 仅显示图片下半段
          child: Image.asset('assets/cat.jpeg'),
        ),
      ),
    ),
  ],
)

各组件作用：

• SizedBox：固定每个区域的宽高（限制高度不超过120px）
• Align + heightFactor：通过垂直缩放图片，配合对齐方式，只保留需要显示的区域
• ClipRect：裁剪掉超出SizedBox范围的图片内容

方案2：动态拆分（适配任意图片尺寸） #

如果图片尺寸不确定，需要自动按120px高度拆分，可以先获取图片真实尺寸，再动态生成对应数量的Widget：

// 先定义获取图片尺寸的工具方法
Future<Size> _getImageSize(String assetPath) async {
  final imageData = await rootBundle.load(assetPath);
  final decodedImage = await decodeImageFromList(imageData.buffer.asUint8List());
  return Size(decodedImage.width.toDouble(), decodedImage.height.toDouble());
}

// 构建动态拆分的Column
FutureBuilder<Size>(
  future: _getImageSize('assets/cat.jpeg'),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return const CircularProgressIndicator();
    
    final imageSize = snapshot.data!;
    const itemHeight = 120.0;
    final itemCount = (imageSize.height / itemHeight).ceil();

    return Column(
      children: List.generate(itemCount, (index) {
        return ClipRect(
          child: SizedBox(
            width: imageSize.width,
            height: itemHeight,
            child: Transform.translate(
              // 向上偏移对应距离，显示图片的指定段落
              offset: Offset(0, -index * itemHeight),
              child: Image.asset(
                'assets/cat.jpeg',
                fit: BoxFit.none,
                alignment: Alignment.topLeft,
              ),
            ),
          ),
        );
      }),
    );
  },
)

这个方案的核心逻辑：

1. 先获取图片的真实宽高
2. 计算需要拆分成多少个120px的块
3. 每个块通过Transform.translate向上偏移对应高度，让图片的目标区域落在SizedBox范围内
4. 用ClipRect裁剪掉偏移后超出容器的部分

对比CSS实现逻辑 #

你用CSS的background-position控制显示区域，本质是偏移背景图并只显示容器内的部分；Flutter中通过Align或Transform.translate实现图片偏移，再配合ClipRect裁剪，逻辑完全对应，只是用Widget组合替代了CSS属性。

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