Flutter如何让容器占满Stack最大子项空间并维持比例

要实现虚线边框覆盖整张图片、同时保持加号图标比例恒定的效果，可通过以下调整解决：

• 使用Positioned.fill让DottedBorder占满Stack的全部空间（即图片区域的尺寸）
• 用FittedBox包裹加号图标，确保其在虚线边框内按比例缩放，同时可自定义图标基础大小

修改后的完整代码：

import "package:dotted_border/dotted_border.dart";
import "package:flutter/cupertino.dart";
import "package:flutter/material.dart";
import "package:flutter/widgets.dart";

class Default extends StatefulWidget {
  const Default({super.key});

  @override
  State<Default> createState() => _DefaultState();
}

class _DefaultState extends State<Default> {
  Map Articles = {};
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("Published", style: Theme.of(context).textTheme.headlineLarge),
            Text("Drafts", style: Theme.of(context).textTheme.headlineLarge),
          ],
        ),
        Stack(
          alignment: Alignment.center,
          children: [
            Center(
              child: Container(
                  color: Colors.black,
                  child: const ColorFiltered(
                      colorFilter: ColorFilter.mode(
                          Color.fromARGB(76, 0, 0, 0), BlendMode.darken),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Expanded(child: Image(image: AssetImage("assets/images/shelf.png"))),
                          Expanded(child: Image(image: AssetImage("assets/images/shelf.png"))),
                        ],
                      )))),
            // 调整后的虚线边框与加号区域
            Positioned.fill(
              child: DottedBorder(
                borderType: BorderType.RRect,
                radius: const Radius.circular(0), // 可按需调整圆角
                color: Colors.white, // 可自定义虚线颜色
                child: FittedBox(
                  fit: BoxFit.contain,
                  child: SizedBox(
                    width: 80, // 控制加号基础大小，适配响应式缩放
                    height: 80,
                    child: const Icon(Icons.add, color: Colors.white),
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    ));
  }
}

关键逻辑说明： #

1. Positioned.fill：强制DottedBorder填充整个Stack空间，自动匹配图片区域的宽高，避免了直接设置double.infinity或BoxConstraints.expand()因缺少父级约束导致的报错。
2. FittedBox：保证加号图标在虚线边框内保持原有比例缩放，不会因容器尺寸变化拉伸变形。调整SizedBox的宽高即可控制加号的基础大小，使其在响应式布局中按比例适配。
3. 无依赖padding：布局完全依赖Stack与Positioned的约束关系，保持响应式特性，不会因固定padding导致适配问题。

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