Flutter：如何让Stack中的容器与另一容器尺寸完全一致

我懂你遇到的麻烦了——想要让灰色覆盖层完美贴合黄色容器的大小，不管黄色容器内容怎么变化都能完全覆盖对吧？你之前尝试的Positioned.fill()其实是正确方向，但问题出在结构上，现在我来帮你调整代码：

核心思路 #

Stack的尺寸默认是由非定位的子元素（也就是你的黄色Container）决定的，所以只要给覆盖层加上Positioned.fill()，它就会自动填满整个Stack的空间，也就是和黄色容器的尺寸完全一致。另外要注意把覆盖层放在Stack的最后，这样它才会显示在主容器上方。

修改后的完整代码 #

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  bool _layerVisible = false;
  @override
  Widget build(BuildContext context) {
    List<Widget> array = List();
    array.add(
      // 把GestureDetector移到外面，包裹整个Stack，点击区域更准确
      GestureDetector(
        onTapDown: (TapDownDetails details) {
          setState(() {
            _layerVisible = true;
          });
        },
        onTapUp: (TapUpDetails details) {
          setState(() {
            _layerVisible = false;
          });
        },
        child: Stack(
          children: <Widget>[
            // 黄色主容器：非定位元素，决定Stack的大小
            Container(
              padding: EdgeInsets.all(8),
              color: Colors.yellow,
              child: Column(
                children: <Widget>[
                  Padding(
                    child: Text("Title text"),
                    padding: EdgeInsets.only(bottom: 10),
                  ),
                  Text(
                    "Veeery long text. This is a dynamic value so we don't really know how long it's going to be...this means that the parent container is going to grow.")
                ],
              ),
            ),
            // 灰色覆盖层：用Positioned.fill()填满Stack（也就是黄色容器的大小）
            Visibility(
              visible: _layerVisible,
              child: Positioned.fill(
                child: Container(
                  color: Colors.grey.withOpacity(0.8), // 加个透明度更友好
                  child: Center( // 让文本居中显示
                    child: Text(
                      "This is the container that I want to fit exactly in the yellow container."),
                  ),
                ),
              ),
            )
          ],
        ),
      )
    );
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: 300,
        child: ListView(
          children: array,
        ),
      )
    );
  }
}

关键改动说明 #

• Positioned.fill()：这个组件会让子元素填充整个Stack的可用空间，而Stack的大小由黄色主容器（非定位子元素）决定，所以覆盖层会完美匹配主容器的尺寸，不管主容器内容怎么变化。
• 调整GestureDetector位置：把它移到Stack外面，这样点击覆盖层区域也能触发tap事件（原来的结构里点击覆盖层可能不会触发，因为覆盖层在GestureDetector的子节点外面）。
• 添加透明度和居中：给灰色背景加了withOpacity(0.8)，让主内容隐约可见，同时把文本居中，提升用户体验。

这样修改后，不管黄色容器的内容多长，灰色覆盖层都会完全贴合它的大小，点击时的覆盖效果就正常啦！

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