如何在 Flutter Stack 中布局 2 个小部件，一个位于另一个之上？

Question

我有一个

CustomPaint

可以绘制具有一定宽度和高度的图像。我想创建一个半透明的覆盖小部件，它将在

CustomePaint

小部件顶部粘贴贴纸。如何正确调整覆盖小部件的大小，使其与

CustomPaint

小部件的大小相同？这是代码片段。

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    FittedBox(
      fit: BoxFit.cover,
      child: Center(
        child: CustomPaint(
          size: Size(1024, 768), // Set the size of the CustomPaint
          painter: _painter,
        ),
      ),
    ),
    Positioned.fill(
            return Align(
            alignment: Alignment.center,
            child: Container(
              width: ??
              height: ??
              color: Colors.red.withOpacity(0.5), // Adjust opacity for visibility
            ),
          );
        },
       ),
  ],
)

Answer 1

这对你有用吗？ （未经测试的代码）

const painterSize = Size(1024, 768);
return Center(
  child: Stack(
    children: <Widget>[
      SizedBox.fromSize(
        size: painterSize,
        child: CustomPaint(
          size: painterSize, // Set the size of the CustomPaint
          painter: _painter,
        ),
      ),
      Positioned.fill(
          child: ColoredBox(
        color: Colors.red.withOpacity(0.5),
      ))
    ],
  ),
);