Stack with Fittedbox在布局中有一种奇怪的行为？

Posted 2021-05-06

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

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,

奇怪的形象

答案

我无法告诉你实际算法的具体细节，但我可以告诉你原因 - 因为你使用的是FittedBox。 FittedBox根据父项和子项的约束，执行各种计算以尝试使项目适合父项。它对于像具有特定宽高比但不限制其大小的图像之类的东西很有用。

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

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