Flutter：使容器在堆栈中占据其他容器大小

Question

我有一个Flutter应用，其中有一个堆栈，并在一个包含一些元素的Container中。我想进行一些手势检测，并在用户单击它时显示一个覆盖层。我已经考虑过用我想要的颜色和形状创建另一个容器，然后使其占据与另一个容器相同的空间，但位于其上方。

问题是我无法弄清楚如何使覆盖容器具有与主容器相同的大小。

这是我基本上拥有的：

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(Stack(
      children: <Widget>[
        GestureDetector(
          onTapDown: (TapDownDetails details) {
            setState(() {
              _layerVisible = true;
            });
          },
          onTapUp: (TapUpDetails details) {
            setState(() {
              _layerVisible = false;
            });
          },
          child: 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.")
                ],
              )),
        ),
        Visibility(
          visible: _layerVisible,
          child: Container(
            color: Colors.grey,
            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,
          ),
        ));
  }
}

我想要使堆栈中的最后一个容器占据另一个容器的相同空间，这样，当我单击它时可以创建一个覆盖层。

[我尝试使用Expanded，使用Positioned.fill，但此解决方案都不适合我。

谢谢。

Answer 1

尝试使用IntrinsicHeight上方的IntrinsicHeight。它将基于堆栈中最大的窗口小部件的Stack本身给出一个明确的大小。然后，确保在Stack上添加fit: StackFit.passthrough,。这会将尺寸信息从Stack传递给所有的子级。