使用qr_flutter包的QRImage组件设置size属性后二维码尺寸不变问题

问题产生原因 #

• Expanded组件仅可在Row/Column/Flex这类弹性布局容器中使用，你的代码里将Expanded放在RepaintBoundary下，父组件不属于弹性布局，因此Expanded完全失效，还会导致布局约束计算异常
• 外层嵌套了SingleChildScrollView，垂直方向的布局约束为无限大，给QrImage设置固定大尺寸后，父容器没有明确的尺寸截断规则，超出可视区域的尺寸就会表现为底部空白，二维码本身的渲染尺寸被父级约束限制没有变化
• 嵌套层级冗余，Container→Center→RepaintBoundary的结构没有给子元素明确的尺寸约束，导致QrImage的size属性无法正确生效

解决方法 #

1. 首先移除QrImage外层无效的Expanded组件
2. 将QrImage的size属性绑定你自定义的动态变量，响应调整即可
3. 如果需要避免二维码超出屏幕宽度，可以给size增加最大值限制，比如取用户选择的尺寸和屏幕可用宽度的较小值

修正后的代码示例：

// 定义动态存储尺寸的变量，你可以通过选择器修改这个值
double _qrSize = 200.0;

// 布局部分代码
body: SingleChildScrollView(
  child: Container(
    padding: EdgeInsets.all(20.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Center(
          child: RepaintBoundary(
            key: globalKey,
            child: QrImage(
              data: qrData,
              // 也可以加屏幕宽度限制：size: min(_qrSize, MediaQuery.of(context).size.width - 40)
              size: _qrSize,
            ),
          ),
        ),
        // 后续可自行添加尺寸选择控件，修改_qrSize即可触发二维码尺寸更新
      ],
    ),
  ),
),

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