如何在Flutter的Flexible小部件中使用flex参数？

Question

[当小部件之间有多余空间时，flex属性将按预期工作。如文档中所述，要使用的公式如下

remainingSpace * (flex / totalOfAllFlexValues)

但是当您必须缩小窗口小部件时，flex属性就不再有意义了。得到这样的结果。

在此基础上，这里的小部件会溢出，因此我使用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

在此instagram页面中学习Flutter Widget：

Instagram：https://instagram.com/flutter_video