Flutter：使容器占用堆栈内的其他容器大小答案

【问题标题】：Flutter: make container occupy other container size within a StackFlutter：使容器占用堆栈内的其他容器大小
【发布时间】：2020-02-25 20:12:27
【问题描述】：

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

问题是我不知道如何使覆盖容器与主容器具有相同的大小。

这就是我基本上拥有的：

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，但这个解决方案都不适合我。

谢谢。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

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

【讨论】：