如何在Flutter的Flexible widget中使用flex参数？

Question

当widget之间有多余的空间时，flex属性就会像预期的那样工作，正如文档中提到的那样，使用公式如下

remainingSpace * (flex / totalOfAllFlexValues)

但是当你必须缩小widgets的时候，flex属性就不再有意义了.给出了这样的结果。

在此基础上，这里的widgets溢出，所以我使用flex来收缩框1和2。

当使用flex值时，会发生以下情况

class Caja extends StatelessWidget {

  Color color;
  int numero;
  double ancho;

  Caja(this.color, this.numero, this.ancho);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: this.ancho,
      height: this.ancho,
      color: this.color,
      child: Center(
        child: Text(
          this.numero.toString(),
          style: TextStyle(
            fontSize: 30.0
          ),
        ),
      ),
    );
  }
}

我用户下面的灵活小部件

 Column(
      crossAxisAlignment: CrossAxisAlignment.start,

      children: <Widget>[
          Flexible(flex: 1, child: Caja(Colors.blue, 1, 200.0)),

          Flexible(flex: 6, child: Caja(Colors.red, 2, 200.0)),

          Caja(Colors.green, 4, 400.0),
      ],
 )

这个新的剩余空间是怎么来的呢，谁能给我解释一下？

Answer 1

我将第二个框的flex值改为1--没有空白。然后改成2--也没有白色空间。从弹性值3开始，出现了一个白色的空间，并且越来越大。

"......，Flexible并不要求孩子填满可用空间。"

如果你检查一下Flexible的源代码，注释中说

"如果非零的话，孩子们在主轴上可以占据的空间是根据灵活孩子们的弹性系数来划分空闲空间（放置不灵活孩子后）来决定的。"

我想可能是不灵活的孩子--你的绿框有问题。如果你把第二个盒子的挠性系数设置得那么高，你就会希望你的第一个盒子非常小。 但是柔性儿童只是考虑了不灵活儿童之前的自由空间，而没有考虑它之后的自由空间。