时间戳

首页 > 解决方案 > Stack with Fittedbox 在布局中有奇怪的行为吗？

layout - Stack with Fittedbox 在布局中有奇怪的行为吗？

问题描述

我按照卡片主题的教程编写了flutter画廊卡片示例的代码

https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/cards_demo.dart

官方卡片示例在这里

我不知道堆栈与fitbox结合的逻辑。为什么会有高度？我只是按照将底部、左右边距设置为 16.0、16.0、16.0 的教程进行操作。如果我没有任何误解，这是父级和大小框之间的边距。为什么会有高度存在？有什么黑魔法代码吗？我只是想了解其中的逻辑。

我的结果图片

 var titleImage2 = new SizedBox(
      height: 200.0,
      child: new Stack(
        children : <Widget> [
            //new Text("First element" , style: new TextStyle(color: Colors.red),),
            new Positioned(
                //top: 0.0,
                left : 16.0, 
                right : 16.0, 
                bottom: 16.0,
                //width: 100.0,
              child: new FittedBox(
                fit : BoxFit.scaleDown, 
                alignment: Alignment.topLeft,
                child : new Container(
                  child: new Text(
                      "Hello world"
                  ),
                )
              ),
            )],
      ),
);

摘要：为什么只将左、右、下设置为边距16.0，它会出现一个现有的高度？我是颤振的新手

left : 16.0, 
right : 16.0, 
bottom: 16.0,

奇怪的图像

标签： layoutstackmaterial-designflutter

解决方案

我无法告诉你实现这一点的实际算法的细节，但我可以告诉你原因——因为你使用的是 FittedBox。FittedBox 会根据父项和子项的约束，进行各种计算以尝试将您的项目适合父项。它对于诸如具有特定纵横比但对其大小没有限制的图像很有用。

因为您有一个文本作为 FittedBox 的子级，所以它可能无法计算它可以缩放到的大小 - 我不知道 Text 会报告什么（而且我忽略了容器，因为它基本上只是将布局委托给它的子级如果它没有设置宽度和高度）。尝试将其设置为 BoxFit.cover，您会看到会发生什么。但我不知道为什么它会选择那个特定的尺寸。

除非您使用图像，否则我建议您删除 FittedBox；这是你所看到的原因。

推荐阅读