如何让Flutter图片组件相对父Container组件进行缩放？

问题描述 #

我希望图片能相对父Container组件进行缩放，在AssetImage()中设置了scale: 0.8但并未生效，该如何解决？

Container(
  margin: const EdgeInsets.only(top: 30),
  alignment: Alignment.centerLeft,
  child: Wrap(
    children: [
      GestureDetector(
        onTap: () {
          print("test");
        },
        child: Container(
          width: 50,
          height: 50,
          decoration: const BoxDecoration(
            color: Colors.blue,
            shape: BoxShape.circle,
            image: DecorationImage(
              fit: BoxFit.fill,
              image: AssetImage('images/prop/lock.png'),
              scale: 0.8,//此处设置未生效
            ),
          ),
        ),
      ),
    ],
  ),
),

补充尝试 #

我尝试用LayoutBuilder()实现相对缩放，但也无法正常工作：

Container(
  margin: const EdgeInsets.only(top: 30),
  alignment: Alignment.centerLeft,
  child: Wrap(
    children: [
      GestureDetector(
        onTap: () {
          print("test");
        },
        child: Container(
          width: 50,
          height: 50,
          decoration: const BoxDecoration(
            color: Colors.blue,
            shape: BoxShape.circle,
          ),
          child: LayoutBuilder(
            builder: (context, constraints) {
              return Image.asset(
                'images/prop/lock.png',
                fit: BoxFit.none,
                height: constraints.maxHeight * 0.1,
                width: constraints.maxWidth * 0.1,
              );
            },
          ),
        ),
      ),
    ],
  ),
),

解决办法 #

1. 为什么scale参数不生效？ #

DecorationImage中的scale是基于图片原始分辨率的缩放比例，和父容器尺寸无关。再加上你设置了fit: BoxFit.fill，这个属性会强制图片拉伸/压缩填充整个容器，直接覆盖了scale的效果，所以设置不会生效。

2. 两种可行的实现方案 #

方案一：通过Padding实现相对缩放

利用父容器的尺寸计算padding值，间接让图片占父容器的指定比例，同时配合ClipOval保证图片适配圆形：

Container(
  margin: const EdgeInsets.only(top: 30),
  alignment: Alignment.centerLeft,
  child: Wrap(
    children: [
      GestureDetector(
        onTap: () {
          print("test");
        },
        child: Container(
          width: 50,
          height: 50,
          decoration: const BoxDecoration(
            color: Colors.blue,
            shape: BoxShape.circle,
          ),
          // padding值为父容器尺寸的10%，图片占剩余80%
          child: Padding(
            padding: const EdgeInsets.all(5), // 50*0.1=5
            child: ClipOval(
              child: Image.asset(
                'images/prop/lock.png',
                fit: BoxFit.fill,
              ),
            ),
          ),
        ),
      ),
    ],
  ),
),

方案二：正确使用LayoutBuilder

基于LayoutBuilder获取的父容器约束，直接计算图片尺寸，再居中显示并裁剪为圆形：

Container(
  margin: const EdgeInsets.only(top: 30),
  alignment: Alignment.centerLeft,
  child: Wrap(
    children: [
      GestureDetector(
        onTap: () {
          print("test");
        },
        child: Container(
          width: 50,
          height: 50,
          decoration: const BoxDecoration(
            color: Colors.blue,
            shape: BoxShape.circle,
          ),
          child: LayoutBuilder(
            builder: (context, constraints) {
              // 取父容器尺寸的80%作为图片大小
              final double imageSize = constraints.maxWidth * 0.8;
              return Center(
                child: ClipOval(
                  child: Image.asset(
                    'images/prop/lock.png',
                    width: imageSize,
                    height: imageSize,
                    fit: BoxFit.fill,
                  ),
                ),
              );
            },
          ),
        ),
      ),
    ],
  ),
),

3. 关键注意事项 #

• 避免在BoxFit.fill生效时使用AssetImage的scale，二者逻辑冲突；
• 圆形容器内的图片必须用ClipOval裁剪，否则会超出圆形边界；
• 相对父容器缩放的核心是基于父容器的尺寸计算图片的显示大小，而非依赖图片自身的缩放参数。

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