Flutter如何将条形码与二维码放入同一个Container容器实现目标布局

修改方案 #

核心调整逻辑为将条形码组件移入目标Container内部，使用Column组件在容器内纵向排列条形码和二维码，同时调整内边距避免布局溢出。

修改后完整代码 #

body: SafeArea(
  child: Center(
    child: Container(
      decoration: BoxDecoration(
        color: mFillColor,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: mBorderColor, width: 1),
      ),
      margin: const EdgeInsets.only(left: 30, right: 30),
      width: double.infinity,
      height: 350,
      child: Column(
        children: [
          // 上方条形码区域
          const SizedBox(height: 20),
          SizedBox(
            height: 50,
            child: SfBarcodeGenerator(
              value: 'www.syncfusion.com',
            ),
          ),
          // 下方二维码区域
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 70, vertical: 30),
              child: QrImage(
                data: 'This is a simple QR code',
                version: QrVersions.auto,
                gapless: false,
              ),
            ),
          )
        ],
      ),
    ),
  ),
),

核心修改点 #

• 移除了原最外层包裹条形码和Container的Column组件，将条形码直接移入带边框背景的目标Container内部
• Container内部新增Column作为根容器，从上到下依次放置条形码、二维码组件，实现二者处于同一容器内的效果
• 使用Expanded包裹二维码区域，自动分配Container剩余高度给二维码，避免固定padding导致的布局溢出
• 可根据实际展示需求调整条形码上方的空白高度、二维码的内边距参数，修改组件的展示大小和位置

内容的提问来源于stack exchange，提问作者Jian Yuan Ng