展开的小部件不占据整个宽度或高度

Question

我正在学习 Flutter 中的 Expanded widget。 我的理解是，扩展小部件需要整个宽度/高度，具体取决于或

Row

/

Column

。

所以，这是我使用的代码

Row

：

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: Image(
            image: AssetImage('images/dice1.png'),
          ),
        ),
      ],
    );
  }
}

这是输出：

它占据了屏幕的整个宽度，这很好。

但是，对于

Column

，这就是我使用的：

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: Image(
            image: AssetImage('images/dice1.png'),
          ),
        ),
      ],
    );
  }
}

输出为：

为什么这里没有用图像拍摄整个高度？

Answer 1

我认为您的图像尺寸接近 1:1，因此扩展小部件会在图像允许的范围内将其扩展。尝试这个来拉伸图像：

child: Image(
            image: AssetImage('images/dice1.png'),
            fit: BoxFit.fill,
          ),

Answer 2

在扩展小部件中使用 flex 属性

Expanded(
    flex: 0,
),

Answer 3

我使用了Flexible，它很有帮助，因为Flexible小部件有参数：

this.fit = FlexFit.loose

它可以防止小部件占据整个宽度