扑。 如何用另一个容器覆盖具有动态大小的容器？

Question

我有一个容器，代表一张带有动态内容的卡片。 所以它可以是大约 175 像素的高度，可以是 300。如果这张卡被禁用，我想用另一个容器覆盖这张卡，比如说，不透明度为 0.5 的灰色。 我已经意识到我可以为此使用 Stack，但是如何为覆盖容器定义正确的大小？

  Widget build(BuildContext context) {
    return Center(
      child: Stack(children: [
        _buildCard(context),
        Container(
            margin: EdgeInsets.only(top: 8, left: 16, right: 16, bottom: 8),
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
                color: Colors.blue.withOpacity(0.75),
                borderRadius: BorderRadius.circular(20.0)),
            child: Center(
                child: Text(
              AppTranslations.of(context).text("pending"),
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.bold),
            )))
      ]),
    );
  }

  Widget _buildCard(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(top: 8, left: 16, right: 16, bottom: 8),
        child: Container(
          decoration: new BoxDecoration(
            borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey,
                blurRadius: 10.0,
              ),
            ],
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(20.0)),
            child: Material(
              clipBehavior: Clip.antiAlias,
              color: Colors.white,
              child: Column(
                children: <Widget>[
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      _buildImageLogo(),
                      Expanded(
                          child: Container(
                        padding: EdgeInsets.only(top: 12, left: 6, right: 6),
//                        margin: EdgeInsetsDirectional.fromSTEB(0, 8, 0, 16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            Row(
                              mainAxisSize: MainAxisSize.min,
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LimitedBox(
                                  maxWidth: 135,
                                  child: Text(
                                    widget.serviceInfo.title == null
                                        ? ""
                                        : widget.serviceInfo.title,
                                    style: TextStyle(fontSize: 16),
                                    textAlign: TextAlign.start,
                                  ),
                                ),
                                LimitedBox(
                                  maxWidth: 50,
                                  child: Container(
                                    margin: EdgeInsetsDirectional.fromSTEB(
                                        0, 0, 8, 0),
                                    child: Text(
                                      widget.serviceInfo.price == null
                                          ? ""
                                          : ("AED" +
                                              widget.serviceInfo.price
                                                  .toString()),
                                      style: Theme.of(context)
                                          .textTheme
                                          .title
                                          .copyWith(
                                              fontSize: 13,
                                              color: Colors.black54),
                                      textAlign: TextAlign.end,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(
                              height: Size.fromHeight(15).height,
                            ),
                            Text(
                              widget.serviceInfo.description == null
                                  ? ""
                                  : widget.serviceInfo.description,
                              style: Theme.of(context)
                                  .textTheme
                                  .caption
                                  .copyWith(fontSize: 13),
                            ),
                            serviceOptions(),
                          ],
                        ),
                      )),
                    ],
                  ),
                  SizedBox(
                    height: Size.fromHeight(10).height,
                  ),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(
                              top: 8, bottom: 8, left: 8, right: 8),
                          child: _btnDecline(),
                        ),
                      ),
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(
                              top: 8, bottom: 8, left: 8, right: 8),
                          child: _btnAccept(),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ));
  } 

完整的层次结构看起来像Scaffold -> Consumer -> Center -> Column -> Expanded -> Consumer -> ListView -> ServiceCard

Answer 1

你GlobalKey得到BuildContext并使用它用它的找出你的容器的大小RenderBox 。 然后，您可以将此大小指定给覆盖容器。 然而，这太过分了。

您还可以定义一个布尔值来查看您的容器是否应该被覆盖并有条件地调整它的装饰。